vml资料

最新推荐文章于 2012-04-18 09:23:00 发布
最新推荐文章于 2012-04-18 09:23:00 发布
阅读量159 收藏
点赞数
分类专栏： other 文章标签： 360 Microsoft HTML C C++

 

http://hi.baidu.com/greatmaster/blog/item/af801138930b5e26b8998fa3.html

（上一篇，下一篇）

 

 

1.line(直线)

a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条从(0,0)到(200,200)的红色的边框为2px的直线</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>

b.专用属性：from    起点坐标；
                    to    终点坐标
2.Oval(圆)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽400高400边框为红色填充为绿色的圆</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:Oval strokecolor='red' fillcolor='green' style='width:400;height:400'/>
</body>
</html>b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定

3.rect(矩形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽100高100的矩形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>
</body>
</html>

b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定
4.roundrect(圆角矩形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆角矩形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"/>
</body>
</html>

b.专用属性：arcsize    描述圆矩形四角的弧度值，0-0.5，默认值0.05
c.其他说明：其高宽主要由style中的width和height决定
5.arc(圆弧)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆弧</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"/>
</body>
</html>

b.专用属性：startangle    圆弧的起点缺口，取值范围-360-360，默认值-180；
                    endangle    圆弧的终点缺口，取值范围-360-360，默认值null(0)
c.其他说明：其高宽主要由style中的width和height决定
6.polyline(多边形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个多边形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/>
</body>
</html>
b.专用属性：points    各折点坐标，上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点

7.curve(曲线)

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条曲线</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>
</body>
</html>

b.专用属性：from    起点
                    to       终点
                    control1    曲线的第一个曲度
                    control2    曲线的第二个曲度
c.其他说明：control1、control2可用都不用、用一个或用两个都用
8.shape(任意形状)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建任意曲线</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"/>
<v:shape style="width:100;height:100" coordsize="50,50" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"/>
</body>
</html>
b.专用属性：path    路径(m    起点、 l     画直线、 c    画曲线、x    曲线自动闭合、 e    结束)
                   coordsize    比例(实际宽:width*100/coordsize第一个值；实际高:height*100/coordsize第二个值)
                   type    引用模板的名称
9.shapetype(模板)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>模板使用示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow">
<v:Path v="m0,0 l30,-30,60,0,0,0 e"/>
</v:ShapeType>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"/>
<v:Shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"/>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"/>
</body>
</html>
b.其他说明：shapetype是专门用来定义形状摸版的（不可见），而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形（可见）。
10.background(背景)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:background fillcolor="white">
<v:fill angle=50 type='gradient' color2="yellow"/>
</v:background>
</body>
</html>
11.group(容器)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>容器示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>

<v:group id="group2" style='position:absolute;left:100;top:100;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>

<v:group id="group3" style='position:absolute;left:100;top:100;z-index:1;width:200;height:200' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
</body>
</html>
b.其他说明：当使用group后，容器内图形的left、top、width、height等值都是相对group的值。

五、二级标记
二级标记可以看作是对有限的属性进行扩展，就像CSS和HTML的关系一样，利用它我们可以做出更漂亮的图画出来，如上边background(背景)中就使用了fill二级标记，下边我们再来看下如何利用二级标记画一条带箭头的直线：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>二级标记示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px">
<v:Stroke dashstyle="shortdot" endarrow='classic'/>
</v:line>
</body>
</html>
例子中的stroke即为二级标记，它可以用来设置边框样式，除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、textbox、imagedata(背景图片)等二级标记。二级标记也有自己的属性，我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单，直接嵌套于图形标签中即可。

.stroke边框

属性名默认值值类型/范围用途
ontrueboolean设置处理是否起效
weight1ptnumber描述边框粗度
colorblackcolor描述边框颜色
opacity1.00.0-1.0描述边框透明度
dashstylesolidsolid,dot,dash,dashdot,longdash,longdashdot,longdashdotdot,shortdot,shortdash,shortdashdot,shortdashdotdot描述边框的线条样式
filltypesolidsolid,tile,pattern,frame描述如何填充边框
srcnullURLstring当filltype!=solid时，指定填充边框的图像地址
imagesizeautoVector2D当filltype!=solid时，描述图像放大倍数
imagealignshapetrueboolean当filltype!=solid时，描述图像是否居中对齐
color2nullcolor当filltype=pattern时，描述图像的融合背景色
startarrownonenone,block,classic,diamond,oval,open,chevron,doublechevron描述线起点的箭头样式
endarrownonenone,block,classic,diamond,oval,open,chevron,doublechevron描述线终点的箭头样式
startarrowwidthmediumnarrow,medium,wide当startarrow!=none时，描述起点箭头的宽度
startarrowlengthmediumshort,medium,long当startarrow!=none时，描述起点箭头的高度
endarrowwidthmediumnarrow,medium,wide当endarrow!=none时，描述起点箭头的宽度
endarrowlengthmediumshort,medium,long当endarrow!=none时，描述起点箭头的高度
miterlimit8.0number描述边框关节位置的厚度
joinstyleroundround(rounded join),bevel(beveled join),miter(miter join)描述边框参加的样式
endcaproundflat,square,round描述边框结束部分


2.fill填充
属性名默认值值类型/范围用途
ontrueboolean设置处理是否起效
typesolidsolid,gradient,gradientradial,tile,pattern,frame描述使用哪种填充模式
colorwhitecolor描述基本填充颜色
opacity1.00.0-1.0描述填充透明度
以下属性只有当type=gradient,gradientradial渐变填充时有效
color2whitecolor描述基本二级过度颜色
colorsnullnumber% color*沿着一个渐行度填充颜色，并以百分比分配空间。例如1:colors="30% red,50% blue"。例如2:colors="30% red,50% blue,90% purple"
angle0-360-360描述渐行效果以圆周顺时旋转、倾斜
focus0%-100%-100%描述渐层的位置
focussize0,0Vector2D描述渐层在所有者的位置分布
focusposition0,0Vector2D描述渐层在所有者的倾斜度分布
methodsigmanone,linear,sigma,any描述均匀分布的对比
以下属性只有当type=tile,pattern,frame背景图像填充时有效
srcnullURL描述填充使用的图像地址
sizeautoVector2D描述图像放大倍数
originautoVector2D描述图像的分布位置，适用于tile、pattern
positionautoVector2D描述图像放置的起源位置，适用于tile、pattern
aspectignoreignore,atleast,atmost描述图像居中还是充满整个图型
alignshapetrueboolean描述是否对比容器对齐图片


3.shadow阴影
属性名默认值值类型/范围用途
ontrueboolean设置处理是否起效
typesinglesingle,double,emboss,perspective描述使用哪种阴影效果
colorblackcolor描述主要阴影颜色
obscuredfalseboolean暗示看穿图像如果没有在形状上填充
opacity1.00.0-1.0描述阴影透明度
offset2pt,2ptVector2D描述阴影的XY偏移度
color2graycolor当type!=single时，描述二次投影颜色
offset20pt,0ptVector2D当type!=single时，描述二次投影XY偏移度
origin0,0Vector2D当filltype!=solid时，描述阴影与投影的交接度
matrixnullstring当filltype!=solid时，描述变换点阵的强度

wfdoublext
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VML(IE绘图)
06-11
VML(IE绘图)
vml资料（资料+例子供大家参考）
10-24
VML，全称为Vector Markup Language，是一种用于在网页上描绘矢量图形的标记语言。它在HTML中嵌入，允许开发者创建出清晰、可缩放的图形，特别适合于需要精确控制图形细节的场景，如图表、流程图、地图等。VML在20...
用VML画图(一些基本的矢量图)
weixin_33953249的博客
09-22 128
注：其中所有的left:top:都是针对图左上角的，比如圆，他的左上角应该是以圆为中心的矩形的左上角 1.line(直线) a.示例： &lt;html xmlns:v="urn:schemas-microsoft-com:vml"&gt; &lt;head&gt; &lt;title&gt;创建一条从(0,0)到(200,200)的红色的边框为2px的直线&lt;/title&...
利用VML标记语言画图、动画制作
jaylongli的专栏
11-11 2525
 利用VML标记语言画图、动画制作进行信息技术与学科整合过程中，信息的加工处理过程中经常需要绘图，有时也需要一些动画。相当一部分绘图工作可使用Microsoft画图（可用于绘制各种较为复杂的电路图等），用Microsoft Word(可用于绘制各种几何图形等)，Microsoft Excel（绘制数据图表），用Microsoft Powerpoint等，使用这些软件作图是非常方便快捷的，工
JavaScript VML资料
01-14
chm资料 关于js中的vml使用方法详解！自己做的
VML.rar_VML
09-21
通过这些资料，你可以深入理解VML的语法、属性和方法，以及如何在实际项目中应用。同时，配合在线资源如MDN Web Docs、Stack Overflow等，可以更好地解决在学习过程中遇到的问题。 总结，虽然VML现在并非主流的矢量...
VML 学习资料，入门资料
01-27
自己整理的关于VML资料，里面挺简单的！很实用！
VML入门教程
03-14
这只是学习VML的入门级教程，内容较浅，单便于学习，如需进一步学习，请自己查找其他资料。
VML画图Demo
07-21
vml画图 实现VML画圆、画线、画矩形的操作 封转的挺好啊
一个简单的VML绘图工具
05-13
学习VML的好材料 程序中只有2个HTM文件,是个学习VML的好材料!
vml介绍(ie绘图)
06-03
VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为， VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。
vml类的js,方便使用vml实现画图
10-06
vml类的js,方便使用vml实现画图 js源代码,可以在任何平台上使用，简单，方便
一款vml绘图工具,界面及功能很完美
02-24
一款vml绘图工具,界面及功能很完美,我也是从别人那里弄来的,是一款学习vml的好资料.
Web绘图VML与SVG
weixin_34404393的博客
04-18 168
2019独角兽企业重金招聘Python工程师标准>>> ...
用VML画图
qq279102484的博客
03-26 164
1.line(直线) a.示例： &lt;html xmlns:v="urn:schemas-microsoft-com:vml"&gt; &lt;head&gt; &lt;title&gt;创建一条从(0,0)到(200,200)的红色的边框为2px的直线&lt;/title&gt; &lt;style&gt; v\:* { behavior: url(#default#VML);} ...
VML画图
iteye_1135的博客
09-22 111
注：其中所有的left:top:都是针对图左上角的，比如圆，他的左上角应该是以圆为中心的矩形的左上角 1.line(直线) a.示例： 创建一条从(0,0)到(200,200)的红色的边框为2px的直线&lt;style&gt; v\:* { behavior: url(#default#VML);} &lt;/style&gt; b.专用属性...
第一个VML网页实例
问道-正确认识人生的规律，只有从人生的规律中才能求得实实在在的名与利
02-22 1765
hello vml!!!v/:*{behavior:url(#default#VML);}第一个VML实例（2个OVAL圆形，1个roundrect圆矩形）：  包含内容 请你务必仔细分析上边的代码，不难看出编写VML标记的高度自由性（大小写、与HTML结合、与CSS结合……）。不但支持传统HTML的2D顺序输出结构（一个对象紧跟一个对象），以及3D输出（通过CSS的样式修改position:
javascript动态创建VML
最新发布
05-14
VML（Vector Markup Language）是一种早期的矢量绘图语言，用于在Internet Explorer中呈现图形。如果您需要使用JavaScript动态创建VML元素，可以使用以下代码： ```javascript // 创建VML元素 var vmlElement = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值