杨应红的WEB技术文档
WEB相关技术
是否感觉出来了,放大缩小对 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的比例是不变的
<script>
var xx=6000;
var yy=6000;
function zoom(h)
{
 group1.coordsize=xx/h+","+yy/h;
 group1.title="现在是"+h+"倍图";
}
var dragapproved=false;
var x=y=0;
function move()
 {
    if(event.button==1 && dragapproved){
      var sx=group1.style.posLeft+event.clientX-x;
   var sy=group1.style.posTop +event.clientY-y;
      x=event.clientX;
      y=event.clientY;
      group1.style.posLeft=sx;
   group1.style.posTop =sy;
    }
    return false
 }
function drags()
{
 if(event.button!=1) return
 dragapproved=true;
 x=event.clientX;
 y=event.clientY;
 document.onmousemove=move;
}
documentonselectstart=new Function("self.event.returnValue=false");
document.onmousedown=drags;
</script>
<v:group id="group1" style='position:relative;width:50;height:50;top:200;left:250' coordorigin="0,0" coordsize="6000,6000">
</v:group>
posted on 2006-11-27 11:27  落尘  阅读(265)  评论(0编辑  收藏  举报