Yuan Yijun (bbbush) wrote,
Yuan Yijun
bbbush

VML and SVG

* 用 css 指定 rotation 和 flip 的做法,比起 svg 的 transform() 函数,太寒酸了
* 根元素竟然是 v:group。说起来 svg:svg 和 svg:g 都用在 svg:svg 中时,有区别么?
* 貌似没办法指定画“边长为 10pt 的正方形”,因为那个 v:group 的 coordsize 属性不容易算。不过 HTML 不是 PDF。
* 竟然可以给 v:shapetype 传参数。svg 中相应的是设定 svg:use viewBox,觉得满晦涩的。
* gradient or pttern fill 好像比 svg 弱一点
* svg 更希望用 viewBox 和 clipPath 控制缩放,而不是修改坐标系的数字
* svg 支持 xlink
* vml 那些 gradientshapeok 之类的参数很别扭
* vml 的 formulas 和 handles 真是难懂。真他妈的想骂了,操!这啥意思这是?
http://www.w3.org/TR/NOTE-VML#h3:introduction.example
 <v:shapetype id="downArrow" coordsize="21600, 21600"
   adj="16200, 5400"
   path="m0@0l@1@0@1,0@2,0@2@0,21600@0,10800,21600xe">
  <v:stroke joinstyle="miter"/>
  <v:formulas>
   <v:f eqn="sum #0 0 0"/>
   <v:f eqn="sum #1 0 0"/>
   <v:f eqn="sum height 0 #1"/>
   <v:f eqn="sum 10800 0 #1"/>
   <v:f eqn="sum width 0 #0"/>
   <v:f eqn="prod @4 @3 10800"/>
   <v:f eqn="sum width 0 @5"/>
  </v:formulas>
  <v:path textboxrect="@1, 0, @2, @6"/>
  <v:handles>
   <v:h position="#1, #0" xrange="0, 10800" yrange="0, 21600"/>
  </v:handles>
 </v:shapetype>



update:
* 关于 formulas,是这样。每个 f 都是一个 formula,可以用 @n 来引用第 n 个公式的值。
公式 “sum A B C” 的结果是 A+B-C,而 “prod D E F” 的结果是 D*E/F,所以让人看了直想骂!
* vml 对文本的支持实在是太差了,几乎没法用{{
** spec 里面的 v-text-anchor 并没有实现,也无法用于 javascript
** css rotation 不能改变文本方向}}
* vml 的坐标计算实在是 horrible
一个 shape 既有 style.width 和 style.height,又有 coordsize。width/height 的单位是由外部的/上层元素的 coordsize 决定的,而 coordsize 决定了下层元素的 width/height。问题是,如果没有指定 coordsize,那么就继承上层的值。因此,除非很小心的计算一个 group 中每个 shape 的 coordsize,否则每个 shape 中的 path 就会有不同的单位长度。

很多东西都很别扭,不知道是怎么想的。
* 必须定义 shape, path, textbox/textpath 三个元素,且 path 与 textbox/textpath 并列为子元素,才能画出文本。path 已经背离了本意。


update 20060901:
http://www.w3.org/TR/NOTE-VML.html#_Toc416858382

Local Coordinate Space

The shape and group elements are containing blocks for their content - they define a CSS2 "block level box". Inside the containing block a local coordinate system is defined for any sub-elements using the coordsize and coordorigin attributes. All CSS2 positioning information is expressed in terms of this local coordinate space. Consequently CSS2 position attributes (left, top, width, height and so on) have no unit specifier - they are simple numbers, not CSS length quantities.

The coordsize attribute defines how many units there are along the width of the containing block. The coordorigin attribute defines the coordinate at the top left corner of the containing block. For example, if a group were defined as follows:



The containing block would be 300 pixels wide by 250 pixels high (assume that the parent element of this group was not another group). Then the coordinate system inside the containing block would range from –500.0 to 500.0 along the x-axis and –500.0 to 500.0 along the y-axis with 0.0, 0.0 right in the center of the rectangle. Any shapes inside the group are positioned and sized according to this local coordinate system. No matter how the width and height of the group is changed, the local coordinate system inside will remain the same.

The rationale behind this is that the vectors defining a shape can be specified in a local coordinate system. If the containing block for the shape is changed, the outline of the shape will be automatically scaled to the new box. Similarly, shapes within the local ordinate system of a group will be automatically scaled if the containing block of the group changes.

It is important to note that the containing block does not establish a clipping region. Sub-elements and paths may be drawn outside the boundaries of the containing block. The containing block merely serves to map the local coordinate space to the page space.


这一段是说,group 和 shape 都可以为子元素设定坐标系。但是这里没有提到 shapetype。实际上,shapetype 不仅为子元素设定坐标系,也为实例 shape 设定坐标系。另外,为子元素设定坐标系,包括 width.height.top.left 几个 css 属性,以及 path.textboxrect 等 xml 属性。shape 既可以把 path 作为 vml 属性,也可以作为子元素,因此同一个 path 字符串在属性和子元素中的含义不同。

spec 给的例子容易让人误解,或者让我这样的人火大。在 group 中先设定一个 coordsize,紧接着又在 shapetype 中设定一个 coordsize。group/@coordsize 只在 shapetype/@path 中应用了,其他地方都是 shapetype/@coordsize,包括 shapetype/path/@textboxrect 和实例 shape/@style.width 等等。不是说不行,而是很难让人理解,尤其是在例子中有错的时候:第一个错误就是子元素 path/@textboxrect 使用了 group/@coordsize,导致文本没有画出来,这种时候怎么会怀疑到例子本身是错的!

例子第二个错误是后面两个 shape/@style.width 之类的都错了,第三个 shape/@path 写成了 shape/@v,都改掉的话,才能看到最终的结果。


现在还在用上个世纪的技术,被抛弃的技术,今天还要玩一天。一定是疯了。为啥就没有好用的,可以随产品发布的 svg plugin 呢,这是产品经理的失误吧?
没办法,legacy 代码太多了,懂 vml 的人也比 svg 多,毕竟开发/培养了这么久。



update:
看到一个不错的 BLOG: http://www.ziyuehome.com 因为主人挺老实的

http://www.ziyuehome.com/article.asp?id=90

VML习作——折线图
作者:ziyue 日期:2006-07-14


在一个Web开发项目中需要用到统计图,所以从头开始接触VML(Vector Markup Language),这在以前是从没有听说过的东西,唉孤陋寡闻很多年了。

折线图
以下算是我的第一个完成好的VML折线图,记录下来:

心得
虽然结果如我想象的出来了,但是其中也包含辛酸和泪水啊(是挺酸的),有几个问题时试验了很久才弄明白的:
1、 <v:group>这个元素的width、height和coordsize的关系,以及子元素位置和尺寸的表示。coordsize是坐标,width和height是他呈现出来的实际尺寸,如果coordsize="1000,500",width和height分别是800px和 400px,那么子元素的left、top、width、height的单位就以1000和500为基准了,而不管是否带单位px。例如<v:group>里面一个<v:rect>,和四边的距离都是100,那么就应该写成:<v:rect style="left: 100;top:100;width:800;height:300" />,这里的width和height就是坐标值了,那么实际尺寸有多大呢,这个就不一定了,取决于<v:group>元素width和height的取值。好晕啊~~~

2、坐标上的刻度。按美洲豹的Thinking in VML所说的,用绝对定位的

来实现,但在实际操作中有点儿问题,如果这个图形放大或者缩小以后,坐标上的刻度位置就变了。我怀疑可能是因为如果不是VML标签(例如P标签),那么其定位并不遵循坐标值,而是用的真实像素置。所以后来自己用<v:shape>标签来表示坐标上的刻度,经放大缩小试验均保持在原来位置。

3、为了在正式勾画折线的时候坐标值方便计算,在外层<v:group>内再嵌套一个和折线坐标大小相同的<v:group>,这样折线的坐标值就基于内层的<v:group>的坐标,很容易计算,不会受到其他对象的干扰。

4、如果折线和坐标线的出现顺序与上例并不一样,那么保险的方法是加入z-index属性,该属性用数字表示,数字越大表示越浮动于上层。

存疑
1、<v:group>的coordorig(坐标原点)属性不太好理解,我给这个属性设定任意值,但是图形没有任何变化,不解中...
2、想让坐标原点从左下角开始,这样计算每个点的坐标值正好是其真实值,而不用计算差值,不知道怎么实现,用coordorig属性好象并不能实现这种效果。

更多...
另外给出几个网址,感兴趣的朋友可以去研究一下:

* 微软的官方站:http://msdn.microsoft.com/workshop/author/vml/default.asp
* W3C:http://www.w3.org/TR/NOTE-VML
* 这儿有很多巨强的例子,老外的:http://www.causeway.co.uk/demos/vml/index.htm
* 用Javascript类和VML做饼图:http://blog.csdn.net/liuruhong/category/9094.aspx
* VML极道教程:http://www.lshdic.cn/vmljdjc.htm
* 美洲豹的Thinking in VML:http://www.itlearner.com/code/vml/index.html
* 好象是一个JS的类,没完全看明白:http://webfx.eae.net/dhtml/chart/chart.html
* 几个不错的实例:三维饼图、三维柱状图、饼图、柱状图


http://www.ziyuehome.com/article.asp?id=93



VML习作——扇形图
作者:ziyue 日期:2006-08-13

上个月写了一篇VML习作——折线图,今天再把制作的扇形图贴出来。做扇形图颇费周折,在网上找了一些例子,但是都只有最后出来的效果图,根本无法看出来他是如何计算,在美洲豹的Thinking in VML教程中,是利用了path的一个ac参数来做的,但是他要把角度转换为弧度,还有些其他计算,怎么也没有看明白。

最后发现利用path的ae参数作扇形图是最佳的选择,好理解也好计算。看看W3C网站上面对ae的解释:Description: center (x,y) size(w,h) start-angle, end-angle. Draw a segment of an ellipse as describes using these parameters. A straight line is drawn from the current point to the start point of the segment.

最后两个参数就是扇形所张开的角度,只是让人费解的是要把角度值乘以2^16,也就是65536。还有start-angle是起始角度,但是end-angle并不是结束角度,end-angle应该是扇形张开所经过的角度数,这个我试验了很久才弄明白。


看到那个什么 “VML 极道教程” 的作者是 '85 年的,初中文化,自学成才,做出来的教程真是漂亮,还有软件。心里挺羡慕的,这个人的过去虽然比我们艰辛一些,但是满有成就感。
Tags: 小东西, 转载
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments