`
wfdoublext
  • 浏览: 127049 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

vml资料

360MicrosoftHTMLCC++ 
阅读更多

 

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边框

属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
weight 1pt number 描述边框粗度
color black color 描述边框颜色
opacity 1.0 0.0-1.0 描述边框透明度
dashstyle solid solid,dot,dash,dashdot,longdash,longdashdot,longdashdotdot,shortdot,shortdash,shortdashdot,shortdashdotdot 描述边框的线条样式
filltype solid solid,tile,pattern,frame 描述如何填充边框
src null URLstring 当filltype!=solid时，指定填充边框的图像地址
imagesize auto Vector2D 当filltype!=solid时，描述图像放大倍数
imagealignshape true boolean 当filltype!=solid时，描述图像是否居中对齐
color2 null color 当filltype=pattern时，描述图像的融合背景色
startarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述线起点的箭头样式
endarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述线终点的箭头样式
startarrowwidth medium narrow,medium,wide 当startarrow!=none时，描述起点箭头的宽度
startarrowlength medium short,medium,long 当startarrow!=none时，描述起点箭头的高度
endarrowwidth medium narrow,medium,wide 当endarrow!=none时，描述起点箭头的宽度
endarrowlength medium short,medium,long 当endarrow!=none时，描述起点箭头的高度
miterlimit 8.0 number 描述边框关节位置的厚度
joinstyle round round(rounded join),bevel(beveled join),miter(miter join) 描述边框参加的样式
endcap round flat,square,round 描述边框结束部分


2.fill填充
属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
type solid solid,gradient,gradientradial,tile,pattern,frame 描述使用哪种填充模式
color white color 描述基本填充颜色
opacity 1.0 0.0-1.0 描述填充透明度
以下属性只有当type=gradient,gradientradial渐变填充时有效
color2 white color 描述基本二级过度颜色
colors null number% color* 沿着一个渐行度填充颜色，并以百分比分配空间。例如1:colors="30% red,50% blue"。例如2:colors="30% red,50% blue,90% purple"
angle 0 -360-360 描述渐行效果以圆周顺时旋转、倾斜
focus 0% -100%-100% 描述渐层的位置
focussize 0,0 Vector2D 描述渐层在所有者的位置分布
focusposition 0,0 Vector2D 描述渐层在所有者的倾斜度分布
method sigma none,linear,sigma,any 描述均匀分布的对比
以下属性只有当type=tile,pattern,frame背景图像填充时有效
src null URL 描述填充使用的图像地址
size auto Vector2D 描述图像放大倍数
origin auto Vector2D 描述图像的分布位置，适用于tile、pattern
position auto Vector2D 描述图像放置的起源位置，适用于tile、pattern
aspect ignore ignore,atleast,atmost 描述图像居中还是充满整个图型
alignshape true boolean 描述是否对比容器对齐图片


3.shadow阴影
属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
type single single,double,emboss,perspective 描述使用哪种阴影效果
color black color 描述主要阴影颜色
obscured false boolean 暗示看穿图像如果没有在形状上填充
opacity 1.0 0.0-1.0 描述阴影透明度
offset 2pt,2pt Vector2D 描述阴影的XY偏移度
color2 gray color 当type!=single时，描述二次投影颜色
offset2 0pt,0pt Vector2D 当type!=single时，描述二次投影XY偏移度
origin 0,0 Vector2D 当filltype!=solid时，描述阴影与投影的交接度
matrix null string 当filltype!=solid时，描述变换点阵的强度

分享到：
| js 特效
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    vml资料（资料+例子供大家参考）

    vml资料（资料+例子供大家参考） vml资料（资料+例子供大家参考）

    VML 学习资料，入门资料

    自己整理的关于VML资料，里面挺简单的！很实用！

    VML参考资料/参考文档

    VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料

    JavaScript VML资料

    chm资料 关于js中的vml使用方法详解！自己做的

    VML极道教程（含实例的学习资料）

    下面介绍一下VML的优点： 　基于XML标准 　XML是公认拥有无穷生命力的下一代网络标记语言， VML具有先天的优势，它的表示方法简单，易于扩展等等。 　支持高质量的矢量图形显示 　矢量的图形，意味着图形可以任意...

    VML语言学习画图，可以详细的学习

    VML语言学习资料，VML语言学习画图，可以详细的学习

    一款vml绘图工具,界面及功能很完美

    一款vml绘图工具,界面及功能很完美,我也是从别人那里弄来的,是一款学习vml的好资料.

    vml三维报表资料.rar

    三维报表vml,三维报表vml,三维报表vml,三维报表vml,三维报表vml

    VML入门教程

    这只是学习VML的入门级教程，内容较浅，单便于学习，如需进一步学习，请自己查找其他资料。

    学习VML必不可少的资料

    学习VML必不可少的资料,VmlEditor 作品

    vml基础教程好东西

    very good 资料，我自己最近刚看完 ，觉得很好就，拿来哈大家一起分享了

    VML学习

    VML学习的资料,有益于在WEB下作图形输出

    ThinkInVML

    讲述了VML的开发基础，开发人员通过该资料可以完成VML的矢量图的开发。例如，在HTML中定义流程图等图形化操作

    CSS+HTML+DHTML+VML网页制作

    说明 ...本手册的内容全部来自Microsoft MSDN Library，若有疑问可直接访问Microsoft MSDN Library。 由于链接众多，错误之处在所难免，希望各位用户指正。...以上资料可在http://clgigi.8u8.com上下载。

    javascript vml 介绍

    如果需要在网页上提供图形化的资料，通常是将其制作成图片，但这样一来网络上的开销就太大了。有什么办法呢？这里向你提供一组JavaScript函数，来解决这一问题。虽然简单了点，但是对画点线图来说还是绰绰有余的！

    中高级网页设计师必备工具手册

    很多刚入行的开发人员，知道网页是如何展现的，也知道人家代码是如何组织的，但就是自己动手做...另外这份资料中还包括CSS长度单位参考、颜色表、语言代码、VML属性及方法， 绝对是你进阶中高级网页设计师必备的工具！

    zdz.rar_水文监测_环保 监测

    用vml语言开发的实现各类自动监测站（如水文、气象、环保等）监测资料共享的internet查询、统计及显示。

    Web HML5实战合集

    本合集包括了以下资料，需要的朋友可以自行下载： 1. HTML5表单新特征简介与举例 2. html-meta标签详解 3. JSP生成静态HTML页面的几种方法 4. 网页优化meta标签使用方法及规则 5. 使用-HTML5-canvas-进行-Web-绘图 6...

    VuiLib 是一个基于 DirectX2D 的轻量级 C++ Direct UI 库.zip

    VuiLib 是一个基于 DirectX2D 的轻量级 C++ Direct UI 库，由信号系统驱动，支持 VML&amp; VSS 进行界面描述，便捷，方便地开发！ 软件开发设计：应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、...

    网页制作完全手册

    网页制作的工具书，基本涵盖了所有需要的资料 包括：HTML，DHTML，CSS，滤镜，HTML+TIME ，VML，HTC 有些是我用过的，有些是我听都没听说过的，哈哈 美中不足：没有JavaScript，不过，这个严格说确实不...

Magicbox
Global site tag (gtag.js) - Google Analytics