放大缩小VML

所属分类: 网络编程 / CSS/HTML 阅读数: 1548
收藏 0 赞 0 分享
由于VML是矢量的,放大缩小变得很容易了。我们先看一个例子,看看VML能做到什么程度。还是以前面的一个飞碟做为例子。它是用线、圆、弧等形状拼凑起来的一个图形。我增加了移动事件,当放大太多了,可以拖动图片查看。













    是否感觉出来了,放大缩小对 VML 的画质没有改变?因为 VML 是矢量的。动态改变它的 coordsize 值就可以了,注意,减小值等于放大,增大值就等于缩小。可以参考下面的脚本:

  var xx=6000;
  var yy=6000;
  function zoom(h)
  {
    group1.coordsize=xx/h+","+yy/h;
  }

    上面的 xx,yy 是指默认状态下的 coordsize 值。调用这个函数的时候使用 zoom(n) 其中 n 是要放大的倍数。
    当VML中包含 文字的时候,图形放大了,但文字不会自动放大。这样一来就很不对称了,有个技巧,就是文字都用一种标记包着,放大函数就需要改进一下了:
  var xx=6000;
  var yy=6000;
  var fs=9;
  function zoom(h)
  {
    group1.coordsize=xx/h+","+yy/h;
    for(var i=0;i<document.all.tags("DIV").length;i++)
      document.all.tags("DIV").item(i).style.fontSize=fs*h+"pt";
  }

    fs是默认状态下的文字大小。document.all.tags("DIV") 将返回页面上所有DIV元素,然后把他们的文字大小都变大。实践证明,放大后和VML的比例是不变的。
更多精彩内容其他人还在看

CHM集锦(CHM)

CHM集锦(CHM)
收藏 0 赞 0 分享

IE与FireFox的兼容性问题

IE与FireFox的兼容性问题
收藏 0 赞 0 分享

DIV 居中的绝好解决方法

DIV 居中的绝好解决方法
收藏 0 赞 0 分享

解决 select 挡住div的解决方法

解决 select 挡住div的解决方法
收藏 0 赞 0 分享

网站首页head区代码规范

网站首页head区代码规范
收藏 0 赞 0 分享

动态更改网页HTML元素(对象)内容

动态更改网页HTML元素(对象)内容
收藏 0 赞 0 分享

如何处理多国语言

如何处理多国语言
收藏 0 赞 0 分享

Firefox CSS私有属性备忘记录

Firefox CSS私有属性备忘记录
收藏 0 赞 0 分享

CSS兼容要点分析

CSS兼容要点分析
收藏 0 赞 0 分享

css静态滤镜 + A:Hover

css静态滤镜 + A:Hover
收藏 0 赞 0 分享
查看更多