VML学习笔记

<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图形引用”集合容器省略;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值