<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v/:* {behavior:url(#default#VML);}
</style>
</head>
<body>
画线:<v:line style="position:relative" from="0,0" to="100,0" ></v:line>
画圆:<v:oval style="position:relative;left:5;top:5;width:100;height:100"></v:oval>
</body>
</html>
、css中有个position属性,以前一直不明白使用static和使用absolute有啥区别:
今天学vml时恍然大悟(vml只支持ie),如果两个div并行写在html语言里,
static是平面分布结构(div之间顺序排列),而absolute可以实现3d分布(即div之间相互遮掩)
4、同事推荐的一个好东东--NHibernate数据库访问代码生成工具:MyGeneration;
5、vml学习笔记之画线:
<v:line strokecolor="red" strokeweight="3px" style="Z-INDEX:5; position:absolute;" top="0" left="0" from="0,0" to="95pt,95pt" />
以上这段代码里strokecolor为线颜色,strokeweight为线的粗细,style为css样式;
top和left分别为起始点距离页面最左上端的垂直和水平距离;
from为起始点的坐标(无太大用处,可以用css里的left和top属性代替它),
to为终止点的坐标(通过设定起始点和终止点坐标可以判断线段颜色);
pt为mac底下的像素单位,px为Windows下的像素单位,px与pt的比为4:3,即使30px=40pt;
6、vml学习笔记之画圆和矩形(rect为矩形,oval为圆):
<v:rect style="POSITION:absolute;Z-INDEX:1;LEFT:320px;TOP:150px;width:100;height:100;"/>
<v:rect style="POSITION:absolute;Z-INDEX:2;LEFT:260px;TOP:230px;width:100;height:50;" strokeweight="2px"/>
<v:oval style="POSITION:absolute;Z-INDEX:3;LEFT:290px;TOP:250px;width:50;height:100;" fillcolor="red" stroked="f"/>
oval、rect除了VML图形的通用属性外,没有专有属性。
CSS的POSITION:absolute;使其以Vector3D形式在网页输出,z-index:;定义3D高度,
left:;top:;则分别定义距离网页左、上方的位置,width:100;height:50;则分别描述图形的宽度为100px和高度为50px。
fillcolor、strokeweight、stroked则分别控制背景颜色、边框粗度、有无边框。
其中stroked="f"的“f"值即代表boolean变量类型的false的简写形式,表示不使用边框,
否则为stroked="t"或stroked="true"则代表图形有边框。true是图形的默认值,表示使用边框。
7、vml学习笔记之画圆形矩形:
<v:roundrect style="POSITION:absolute;Z-INDEX:1;LEFT:340;WIDTH:250;TOP:120;HEIGHT:200" strokecolor="green"
strokeweight="1px" arcsize="0.3" fillcolor="yellow"/>
roundrect的属性标记与圆和矩形很相似,只是多了一个arcsize属性,用来表示弧度;
8、vml学习笔记之画圆弧:
<v:arc style="Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100" startangle="-360" endangle="360"/>
<v:arc style="Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:340;HEIGHT:100" startangle="20" endangle="-20"/>
特有属性:
startangle:描述圆形的起点缺口(圆弧可以是圆形,或有缺口弧形),取值范围-360-360,默认值-180
endangle:描述圆形的终点缺口,取值范围-360-360,默认值null(0)
9、vml学习笔记之插入image图片:
<v:image src="Example.jpg" gamma='0.9' grayscale='false' bilevel='false' blacklevel='0' gain='1'
cropleft='30%' cropright='30%' croptop='30%' cropbottom='30%' style='position:absolute; width:365px;
height:480px; left:20; top:20; z-index:1;'/>
其中特有属性颇多,如下:
属性名 默认值 值类型/范围 用途
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% 描述图像下边的裁剪
10、vml学习笔记之画polyline多边形:
<v:polyline style="Z-INDEX:1;LEFT:71;POSITION:absolute;TOP:225" points="0,0,30,-40" filled="t" fillcolor="white"/>
特有属性:
points:描述多边形的形状,值类型/范围Vector2D,默认值0,0,Dhtml访问points.value
11-1、vml学习笔记之画shape多边形
<v:shape style="Z-INDEX:1;LEFT:571;WIDTH:5000;POSITION:absolute;TOP:300;HEIGHT:5000" coordsize="1000,1000" filled="t" strokecolor="blue" path="m0,0 l30,30,60,0,0,0 e"/>
特有属性:
(1)、coordsize:相当于坐标系的大小,coordsize="1000,1000" width:5000 height:5000与
coordsize="100,100" width:500 height:500在屏幕上的显示效果是一样的;
(2)、path与polyline中的points属性大同小异,但其中m、l、e三个字母都是必须的;
m(moveto):表示偏离原点的为止;
l(lineto):表示画线;
e(end):表示结束画的功能;
11-2、vml学习笔记之画shapeType模板:
定义:
<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"/>
11-3、vml学习笔记之画shape曲线:
<v:shape style="Z-INDEX:1;LEFT:100;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 c130,-90,30,90,150,180 e"/>
注:其实和画shape多边形一样,只是原先的mle现在换成了mce,c是curve(曲线)的简写
12:vml学习之画curve曲线:
<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:100" to="150px,0px" strokecolor="green" control1="100,50"/>
其中特有属性如下:
属性名 默认值 值类型/范围 用途
from null Vector2D 描述曲线起点偏移XY交接点位置
control1 null Vector2D 描述曲线的第一个曲度
control2 null Vector2D 描述曲线的第二个曲度
to null Vector2D 描述曲线偏移from的X2Y2终点
13、background、group和“vmlframe图形引用”集合容器省略;