VML编程之------大结局《VML极道教程》原著:沐缘华

1章19节:shadow阴影

1: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时，描述变换点阵的强度

2:shadow阴影 - 应用精彩实例 即使是极道教程，也没有什么好说的，一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手，是最佳的学习方法。另外该标记相当重要，务要靠自己的努力学会！

</v:Image>

</v:oval>

1章20节:fill填充

1: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	描述是否对比容器对齐图片

2:fill填充 - 应用精彩实例 即使是极道教程，也没有什么好说的，一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手，是最佳的学习方法。另外该标记相当重要，务要靠自己的努力学会！

</v:oval>

</v:oval>

</v:roundrect>

</v:shape>

</v:oval>

1章21节:extrusion立体3D

1:extrusion立体3D - 专用属性参考表

属性名	默认值	值类型/范围	用途
on	false	boolean	设置处理是否起效
type	parallel	parallel,Perspective	描述使用哪种立体模式
color	white	color	描述基本立体颜色
backdepth	35pt	number	描述后向立体厚度值
foredepth	0pt	number	描述前向立体厚度值
metal	false	boolean	描述是否给图形追加立体边框
diffusity	1.0	0.0-3.0	描述立体基本亮度
brightness	0.3	0.0-1.0	描述立体过度渐层的亮度
rotationangle	0,0	Vector2D%360	描述立体的上下、左右360全景旋转度
skewangle	0	-360-360	当type=parallel时，设置立体的倾斜度

2:extrusion立体3D - 应用精彩实例 即使是极道教程，也没有什么好说的，一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手，是最佳的学习方法。另外该标记相当重要，务要靠自己的努力学会！

</v:arc>

</v:rect>

</v:oval>

</v:rect>

</v:shape>

1章22节:textbox内容

1:textbox内容 - 专用属性参考表

属性名	默认值	值类型/范围	用途
inset	7pt,3pt,7pt,3pt	0-999pt*(1-4)	描述距离容器内边界左/上/右/下长度
print	false	boolean	暗示是否被打印机打印

2:textbox内容 - 介绍 该标记不同于其他二级标记，特点是它即可以当做二级标记应用于VML一级标记中、也可以当作一级标记直接在网页输出超文本内容（但这个一级标记不像oval、rect、line那样支持二级标记stroke、fill、extrusion的修饰）。它基本跟HTML的span标记类似，本身没有什么独特的专用属性（就inset、print[该通用属性其他一级标记都默认为true，而它默认为false]）、也不支持VML其他二级标记的修改，而是充分利用CSS对的font/text用于文本的样式表修饰超文本内容的样式（如控制文字大小、颜色、字体、缩进、字间隔度、行间隔度、周遍的留白、排版换行等） 3:textbox内容 - 当作一级标记应用实例

</v:Textbox>

仔细分析以上代码，不难看出它就是用于输出超文本，而本身专用属性很有限（只有inset描述与容器内边界的文本间隔度，但这个属性意义并不大了，因为完全可以用CSS的padding代替）。而描述内容文本各种样式则直接使用CSS提供的丰富样式，该标记基本跟HTML的span相同。 4:textbox内容 - 当作二级标记应用实例

这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
</v:roundrect>

可以看出，它也可以充当二级标记作为oval、rect、roundrect等图形的内容。你也许会问，我完全可以直接在图形内插入HTML超文本内容，还有必要用textbox？回答是看你用VML进行什么样的开发，如果只是简单的绘图那么可以说没必要，但如果进行的是WEB 3D网页开发、DVML编程，那么用textbox在某种情况可以剩时、剩力、剩代码、更好的组织性。

1章23节:imagedata背景图片 


1:imagedata背景图片 - 专用属性参考表

属性名	默认值	值类型/范围	用途
src	null	URLtext	描述图像URL地址来源
grayscale	false	boolean	描述图像是否为黑白效果
bilevel	false	boolean	描述图像是否为漫画卡通效果
blacklevel	null	number/-0.4-0.4	描述图像亮度
gain	null	number/0-100	描述图像对比度
gamma	null	number/0.9-0.1	描述图像颜色清晰度
chromakey	none	colortext	描述图像透明过滤的颜色
cropleft	null	number/0%-100%	描述图像左边的裁剪
cropright	null	number/0%-100%	描述图像右边的裁剪
croptop	null	number/0%-100%	描述图像上边的裁剪
cropbottom	null	number/0%-100%	描述图像下边的裁剪

2:imagedata背景图片 - 介绍 也许你又会问，二级标记fill不是有很强背景图像填充的方法么，怎么还有个imagedata背景图片？我的回答是“不管是实用/常用与否，VML为我们想的很周到”。的确fill的背景图像填充是很强的、效果眼花缭乱，而又的确imagedata我认为使用的机会不会很多，但不可否认imagedata我曾经实际应用中也有一些特长。请先看下面几个imagedata的例子，它的属性作用跟一级标记image一摸一样，只不过是用它插入的图片必须依附于像oval、rect、roundrect、arc等图形当中，当作平铺于该图形底下的“背景/场景图像” 3:imagedata背景图片 - 实例讲解

</v:oval>

上例我们插入的图片是JPG格式的矩形图片，你只少应从例子中理解用imagedata插入的图像必须依附于图形、如果图像本事是JPG矩形的图片那么就会平铺于图形之下、图形本身的fillcolor填充也会无效、裁剪后被自动拉伸缩放剩下的图形部分 在看下面用gif动画的例子

</v:oval>

上例我们插入的图片是gif格式的带透明部分不规则动画图片，就跟JPG矩形图片有些不同之出了，由于gif动画图形的不规则问题，显现出图形本身的fillcolor颜色 4:imagedata背景图片 - 应用价值探讨 如一开始所说，imagedata的实际应用价值远不如fill、stroke等二级标记，但若制作照片框、图像浏览、处理类的DVML程序到还不错，下面给个很简单的例子。

</v:rect>

虽然用rect+image这两个一级标记也可以模拟实现上述效果，但DVML编程恐怕就需要花费很多关于坐标定位上的代码了（要更新rect也要更新image）。而imagedata是直接依附于rect内部的，坐标、大小更新时只需控制rect即可，简化了这方面编程的烦琐。

1章24节:textpath文本路径 ----


1:textpath文本路径 - 专用属性参考表

属性名	默认值	值类型/范围	用途
on	false	boolean	设置处理是否起效
string	null	string	描述使用的文本
fitpath	false	boolean	描述是否自动缩放文本已占满路径
fitshape	false	boolean	Stretches the text path out to the edges of the shapebox.
trim	false	boolean	Removes any additional space reserved for ascenders and descenders if not used.
xscale	false	boolean	Use straight x measurement instead of measuring along the path.

2:textpath文本路径 - 实例讲解

</v:oval>

textpath文本路径处理功能是VML一个很实用、很有用的二级标记，也许你还很陌生，所以这一章节我要详细的讲述它。 对于以上代码的分析： 1:应用textpath文本路径，必须增加<path textpathok="t"/>这个二级标记，它表示生成该图形文本路径，否则不行。 2:文字的颜色，继承其载体(oval)的strokecolor边框颜色属性 3:文字的粗度，继承其载体的strokeweight边框粗度属性 4:文字的背景，继承其载体的fillcolor填充属性，只是未放大看不出来，不过我会在接下的例子演示 5:第一个处理的fitpath="f"，表示文字不自动缩放占满整个路径，文字大小以CSS的font-size:;定义为30px，由于字数少所以它未占满 6:而其他的fitpath="t"的，运行效果表示，它们都可以自动缩放占满整个路径，而相对CSS定义的font-size字大小为50px就无效了 7:由于其on属性默认为false，所以我们必须增加on="t"表示textpath文本路径处理起作用 在继续看例子：

</v:rect>

对于以上代码的分析： 1:这次你应该看出文字的背景是继承其载体fillcolor="yellow"黄色的 2:而且line线也支持路径（其实curve,shape,roundrect等均支持文本路径，只有image,textbox不支持文本路径） 3:最后一个输出了好多的图形，这是因为CSS用FONT-FAMILY:;将它的字体定义为“Wingdings”。Wingdings是一种图形字体，其他还有“Wingdings 2、Wingdings 3、Webdings、Marlett”字体均为图形字体 4:最后一个还追加了fill填充渐变颜色效果，使图形字体看起来更好看 在继续看例子：

</v:curve>

对于以上代码的分析： 1:这次你看到的就是更多的图形字体，并演示他们按照曲线的轨迹路径排列 2:第二个则同时增加了填充、立体效果，使图形更加的好看 3:第三个则使用了extrusion的rotationangle属性让立体以不同的角度呈现 在继续看例子：

</v:oval>

对于以上代码的分析： 1:也许你惊呼“VML世界地图”！？其实也没什么好惊讶的，这只不过是textpath使用了Webdings字体而且只用了一个字母，而后我们给它增加了立体，使它有立体感 2:而第二个我们又给其增加了fill背景填充，它更加好看了而已，你甚至还可以换成gif动画…… 3:综合以上所有例子，由次可见textpath的有用之处了吧？？？ 4:你如果想知道所有的“Wingdings、Wingdings 2、Wingdings 3、Webdings、Marlett”字体，可以从LD5的“工具”菜单选择“综合工具包”，该工具包里即有这方面资料。或者你直接点击此处打开（我以将该工具追加于VML极道教程之中^-^）。

1章25节:其他标记与学习总结


1:VML标记学习总结
直到现在，你已经经历了前面24章节VML标记、属性的学习，如果过程中你用心学了、动脑思考了、动手反复测试了、并自认为对VML标记已经很了解了。如果你真是这么想…………，那么我很高兴的告诉你，你已经精通了VML语言、已经熟悉或精通了VML所有标记/属性的50%-95%、具备去教别人的水准了。而我对你的期望值，是你至少已经掌握前面24章节所有涉及的知识、标记、属性的70%，这70%凝聚着VML所有最简单的、最实用的、最重要的。而剩下的那25%很复杂的、不实用的、不重要的，你精通了更好，不精通也没有关系，因为以后你很少会用得到。
前面24章节提及的约70%（较简单、实用的我建议一定精通或掌握）+25%（建议有一定认识/了解），还有剩下的5%（VML最复杂难懂、shape高精度数学/函数绘图相关、最不可能用到的），我会在本章节下面简单的说一说
假如我所描述的70%（例如就包括专用属性参考表红色标识的重要属性），你已经掌握，那么你现在即算完成“精通VML标记”这一大章的学业，已经算是一位VML高手了，否则我劝你在从头到尾、重新温习一下前面所有的24章节，直到会了全部的70%、或对自己有信心了为止。
如果你有更高的追求，可以进阶修行“DVML编程”这一大章，从VML静态绘图向DVML动态编程继续前进、从小用VML跨越到VML与用户互动、动画开发、游戏开发、服务器端程序开发等等。在以后你就可以凭借你的“VML标记知识+DVML编程知识+FlashVml(闪耀之星)”开发任何基于VML的WEB大小应用了。
否则你现在就可以直接使用FlashVml+你所学到的VML标记知识，进行普通的VMLWEB应用了。
2:VML的其他标记
我曾说过VML的强大功用、成熟与完善，前面24节所提及的概念、知识、标记、属性。是综合了我对VML的所有概念、知识、标记、属性的所学，然后精挑细选后又一一整理，按照我认为的难度、逻辑、实用程度进行课程排序。对今后你会较常用到的进行了深入/通俗的分析、讲解，不常用到的也给出了抽象/简单的范例、说明。
另外我所知的VML标记、属性还有一些，有些是不会用到的、意义不大的，还有些有一定应用意义但这些有不少连我也不熟悉、个别的甚至不知怎么用/是什么概念，更不可能在详细的教育、分析于你听了。我只能整理整理，不懂的就全且用W3C提供的英文说明，待汝有用之日来取。
3:path规则与路径 - 二级标记

属性名	默认值	值类型/范围	用途
v	m l e	string	描述shapetype形状模版的路径
limo	0,0	vector2D	A point along the x and y dimensions of a shape where the shape will limo stretch.
fillok	true	boolean	暗示一级标记是否有填充
strokeok	true	boolean	暗示一级标记是否有边框
shadowok	true	boolean	暗示一级标记是否支持阴影
arrowok	false	boolean	暗示一级标记是否支持箭头
gradientshapeok	false	boolean	暗示fill是否依照比例描述gradientradial渐变
textpathok	false	boolean	暗示一级标记是否支持文本路径
textboxrect	null	string	描述textbox内容与容器内边界的距离

该标记还算是有些用处、在某些时候甚至于必须使用，不过有用的概念、知识、实例，前面shape、shapetype、textbox相关的章节已经提及了，在这里不在阐述。 4:formulas - shape、shapetype、path_v函数计算实例 This sub-element may appear inside a shape or a shapetype to define formulas that can vary the path of a shape, its inscribed text rectangles, and connection sites. Formula values change as the adj values change on the shape. Formulas can reference other formulas defined earlier in the same formulas element.

</v:formulas>
</v:shape>

5:handles - 计算公式与输出规则定义 This sub-element may appear inside a shape or a shapetype to define user interface elements which can vary the adj values on the shape, thereby changing the value of formulas and the rendering of a path based on formulas and adj values.

</v:formulas>
 
</v:shape>
 

6:office skew歪斜艺术 - 二级标记

属性名	默认值	值类型/范围	用途
on	false	boolean	暗示一级标记是否支持歪斜
ext	view	edit,view,backwardCompatible	暗示歪斜被显示的方式
matrix	1,0,0,1,0,0	string	为歪斜定义一种远景变换
offset	0,0	-0.5-0.5,-0.5-0.5	描述歪斜的抵销值
origin	0,0	-0.5-0.5,-0.5-0.5	描述歪斜的起源

使用该标记必须定义xmlns:o="urn:schemas-microsoft-com:office:office"名域命名 7:更全面的英文参考 - 来自MSDN、W3C MSDN-VML首页 MSDN-VML参考 W3C-VML1998最初草案 《VML极道教程》第一卷[精通VML语言] 全文完！ 2005-2-19 0:42:57 - 沐缘华