VML画连线箭头,line线加粗,vmlline
来源:互联网 发布:重庆行知小小学校招聘 编辑:程序博客网 时间:2024/05/21 03:55
一、什么是VML
VML相当于浏览器的画笔,它可以在浏览器中画出任何你想要的图形:小到直线、圆形、圆弧、曲线、矩形、圆角矩形、多边形;大到一张图画、一个动画、甚至于一个游戏。题中既以标明为简明教程,下边我们只限于讨论使用VML在浏览器中画一些直线、圆形、圆弧等小图。
VML是微软1999年前(具体时间不详)制作推出的,并集成到了IE5+浏览器,同样也是Microsoft Office Art(艺术图型,如word的艺术文字)的核心结构。VML由微软Visio、Autodesk、Macromedia等企业推荐给W3C(WWW最高权利协会),W3C采取、综合了各方的推荐,于1999年初开始发展SVG,并随后不久推出。SVG是综合VML、GML等的改进(输出效率、图型质量、标记扩展),被推荐为标准,但SVG需要专门的图像阅读器如(Adobe SVG Viewer),无法直接被浏览器引擎解析,以我见,SVG更适合于精度矢量图型应用软件开发、VML则适合应用在WEB页,有不少文章说VML已过时,但仁者见仁、智者见智,VML我感觉相当健全(图型质量、输出速度),它编写简单、浏览器可以解析、与HTML等语言完全兼容,它更具有实际WEB页应用的可行性、深层开发的可行性。但遗憾的是目前支持VML的浏览器仅有IE。
二、VML基础知识
如果你熟悉HTML的话,那么学VML并不是一件复杂的事,因为VML和HTML几乎一样,不仅表现在语法上,还有其对CSS、JS的支持都和HTML如出一辙。
1.基本语法
•标签以开头结尾,也支持空标签如
•标签不区分大小写
•标签中间可嵌套其他标签,可以是VML,也可以是HTML
•属性的写法为”parameter=value”,如,属性值可加双引号、单引号、也可不加
2.对CSS和JS的支持
•对CSS支持:
<html xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office"><head><title>第一个VML范例</title><style>v/:* { behavior: url(#default#VML);} o/:* { behavior: url(#default#VML);}</style></head><body><v:line style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/></body></html>
说明:
•xmlns:v="urn:schemas-microsoft-com:vml"
//关键语句,表示创建一个叫v的XML命名空间,其中v可自行修改
•xmlns:o=”urn:schemas-microsoft-com:office:office” //表示引用office相关的标记处理扩展,WEB中很少用,下边不讲
•v/:* { behavior: url(#default#VML);} //关键语句,指明XML名域v引用的数据是VML标记语言 .<v:line style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
//创建一条直线,VML在浏览器中画图的语句都是写在之间
三、通用属性
下边这些属性大部分的VML标签中都是可用的,为了便于记忆将其分成了三类,其中第二类和HTML相同、第三类和CSS相同。
1.line(直线)
a.示例:
创建一条从(0,0)到(200,200)的红色的边框为2px的直线
v/:* { behavior: url(#default#VML);}
b.专用属性:from 起点坐标;
to 终点坐标
2.Oval(圆)
a.示例:
创建一个宽400高400边框为红色填充为绿色的圆
v/:* { behavior: url(#default#VML);}
b.专用属性:无
c.其他说明:其高宽主要由style中的width和height决定
3.rect(矩形)
a.示例:
创建一个宽100高100的矩形
v/:* { behavior: url(#default#VML);}
b.专用属性:无
c.其他说明:其高宽主要由style中的width和height决定
4.roundrect(圆角矩形)
a.示例:
创建一个圆角矩形
v/:* { behavior: url(#default#VML);}
b.专用属性:arcsize 描述圆矩形四角的弧度值,0-0.5,默认值0.05
c.其他说明:其高宽主要由style中的width和height决定
5.arc(圆弧)
a.示例:
创建一个圆弧
v/:* { behavior: url(#default#VML);}
b.专用属性:startangle 圆弧的起点缺口,取值范围-360-360,默认值-180;
endangle 圆弧的终点缺口,取值范围-360-360,默认值null(0)
c.其他说明:其高宽主要由style中的width和height决定
6.polyline(多边形)
a.示例:
创建一个多边形
v/:* { behavior: url(#default#VML);}
b.专用属性:points 各折点坐标,上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点
7.curve(曲线)
创建一条曲线
v/:* { behavior: url(#default#VML);}
b.专用属性:from 起点
to 终点
control1 曲线的第一个曲度
control2 曲线的第二个曲度
c.其他说明:control1、control2可用都不用、用一个或用两个都用
8.shape(任意形状)
a.示例:
创建任意曲线
v/:* { behavior: url(#default#VML);}
b.专用属性:path 路径(m 起点、 l 画直线、 c 画曲线、x 曲线自动闭合、 e 结束)
coordsize 比例(实际宽:width*100/coordsize第一个值;实际高:height*100/coordsize第二个值)
type 引用模板的名称
9.shapetype(模板)
a.示例:
模板使用示例
v/:* { behavior: url(#default#VML);}
b.其他说明:shapetype是专门用来定义形状摸版的(不可见),而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形(可见)。
10.background(背景)
a.示例:
背景示例
v/:* { behavior: url(#default#VML);}
11.group(容器)
a.示例:
容器示例
v/:* { behavior: url(#default#VML);}
b.其他说明:当使用group后,容器内图形的left、top、width、height等值都是相对group的值。
五、二级标记
二级标记可以看作是对有限的属性进行扩展,就像CSS和HTML的关系一样,利用它我们可以做出更漂亮的图画出来,如上边background(背景)中就使用了fill二级标记,下边我们再来看下如何利用二级标记画一条带箭头的直线:
二级标记示例
v/:* { behavior: url(#default#VML);}
例子中的stroke即为二级标记,它可以用来设置边框样式,除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、textbox、imagedata(背景图片)等二级标记。二级标记也有自己的属性,我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单,直接嵌套于图形标签中即可
js vml 画图 2008-10-28 21:00
WawaMind beta v1.0
v/:* { BEHAVIOR: url(#default#VML) }
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
cursor:default;
width:1000px;
}
.wen{
padding-top:3px;
padding-left:3px;
padding-bottom:3px;
padding-right:3px;
FONT-SIZE: 9.2pt; LINE-HEIGHT: 20px;
BACKGROUND-COLOR: #99ccff;
BORDER-BOTTOM: #330099 1px solid;
BORDER-LEFT: #330099 1px solid;
BORDER-RIGHT: #330099 1px solid;
BORDER-TOP: #330099 1px solid;
/filter:Alpha(Opacity=”80”,FinishOpacity=”90”,Style=”0”);/
cursor:move;
z-index:100;
}
.editdiv
{
OVERFLOW: auto; background-color:#fff999; cursor:default;
height:50px;
}
.editdiv p
{
margin:0;
}
.expanbutton
{
cursor:hand; font-weight:bold; font-size:20px;
}
- VML画连线箭头,line线加粗,vmlline
- VML画连线箭头,line线加粗
- VML之Line
- 【bzoj1610】Line连线游戏
- VML编程之------标记实战与line线《VML极道教程》原著:沐缘
- VML极道教程(三) 标记实战与line线
- VML极道教程(三) 标记实战与line线
- 力导向图之弧形箭头连线
- uva216-Getting in Line(网络连线)
- 【Bzoj1610】[Usaco2008 Feb]Line连线游戏
- BZOJ 1610: [Usaco2008 Feb]Line连线游戏
- BZOJ 1610: [Usaco2008 Feb]Line连线游戏
- [BZOJ1610][Usaco2008 Feb]Line连线游戏
- bzoj1610【Usaco2008 Feb】Line 连线游戏
- 【bzoj1610】【Usaco2008 Feb】Line连线游戏
- bzoj1610 [Usaco2008 Feb]Line连线游戏
- bzoj 1610: [Usaco2008 Feb]Line连线游戏
- [BZOJ]1610: [Usaco2008 Feb]Line连线游戏
- Ubuntu14.04下载&编译Android(1)
- c/c++
- JSON.parseObject(jsonString, Object.class); 将json字符串转成一个对象
- (NYoj 104)最大和 --二维最大连续子串和转化为一维,动态规划
- Android中Home键的监听和代码操作程序Home键退出(实质没有退出而类似于最小化)
- VML画连线箭头,line线加粗,vmlline
- IOS UIAlertController 弹框 (ios 9.0 后代替了UIAlertView弹框 和 UIActionSheet下弹框)
- 周立功A3352-W128LI内核编译
- 2016多校训练Contest5: 1004 How Many Triangles hdu5784
- UVA11927
- 循环链表
- XML的查询
- 多路IO复用 select 和 poll 函数简介
- andorid基础之预备讲义