Shape对象与VML坐标系

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› HTML›HTML/CSS编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

Shape是VML最基本的对象，利用它可以画出所有你想要的图形。在VML中，使用的坐标并不是Document的坐标，它有自己的坐标系，这样一来，动态改变它的坐标，就可以实现放大、缩小、旋转等功能了。shape的 CoordSize 属性就是用来定义坐标的，它有两个参数，<v:shape CoordSize="2800,2800" />，这里的2800,2800 是横纵坐标被分成了2800个点，并不是HTML里面默认像素。如果没有设置圆点，VML默认是 0,0 （左上角），当然你也可以使用 CoordOrig 属性设置VML的圆点坐标。

<v:shape CoordOrig="-1400,-1400" CoordSize="2800,2800" style="width:500;height:500" />

    注意:定义的坐标只是相对的，真正显示的图形大小还需要 style="width:500;height:500" 来定义！

    上面的定义后，你可用的坐标是 x(-1400到1400) y(-1400到1400) ，这样的坐标就像数学里面的坐标了，把画版分成了四个块。

    在解决实际问题的时候，我发现，IE会自动把可见的VML图象放在相对的(0,0)位置，意思是说，上面两张图如果没有增加两个辅助的坐标，在IE上显示出来是并列的两个正方形。
    shape中最主要的属性是Path，它是个功能强大的画笔，语法很简单，由几个字母组成，下面详细讲述：
m x,y:MoveTo把画笔移动到 (x,y)；
l x,y:LineTo从当前点到(x,y)画一条线；可以给连续的几个点，VML会连续画出来直到遇到 x 命令。
x:Close结束一条线；
e:End结束画图
    shape的其他常用属性:
FillColor:填充颜色，使用HTML中规定的颜色；例如:fillcolor=red
Filled:是否要填充图形，如果图形不是封闭的，也会自动封闭图形进行填充。当Filled="true"(默认),fillcolor才有效果；
StrokeColor:线的颜色；
StrokeWeight:线的宽度；
Title:当鼠标移动到该图形上的时候，显示的文字，和HTML里面的alt、tilte一样；
Type:指定该图形属于那个ShapeType，ShapeType可以为VML制定模版，将在以后加以描述；
    前面的这些属性，FillColor、Filled可以在<v:Fill />中使用，StrokeColor、StrokeWeight可以在<v:Stroke />中使用。也可以在 Shape 或者继承Shape的对象中使用它。
    在下面几节，将详细介绍 Shape 延伸出来的一些具体对象，诸如 Rect、RoundRect、Oval、Line等对象。