有关VML的放大?

我是参考http://www.itlearner.com/code/vml/step32.html格式写的.
改为<v:textbox />行吗?

to eglic(圪圪) 结合上面页面的如何实现?

可以把我的结果存成一个html文件,运行,双击鼠标左键,香港和高雄到圆点的位置基本保持一定的距离
而澳门就随着放大而变化,而且香港和高雄的变化保持同步,澳门变化不保持同步.

好像文本不能跟着放大？
奇怪
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<?xml version="1.0" encoding="gb2312" standalone="no" ?>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="pragma" content="no-cache" />
<style type="text/css">

</style>
<script language="JavaScript" src="/Script/Default.js"></script>
<script language="JavaScript">

</script>
<title></title>
</head>
<body>
<div style="width:250px;height:250px;overflow:auto;">
<v:group CoordSize="550,550" style="position:relative;left:0px;top:0px;width:250px;height:250px;" id="surface">
<v:textbox style="position:absolute;font-size:23px;">测试一下哦</v:textbox>
<v:line style="position:absolute;" from="30,270" to="30,0" >
<v:stroke EndArrow="Classic" weight="2px" dashstyle="Solid" Color="#000040"/>
</v:line>
<v:line style="position:absolute" from="30,270" to="530,270" >
<v:stroke EndArrow="Classic" weight="2px" dashstyle="Solid" LineStyle="ThinThick" Color="#000040"/>
</v:line>
</v:group>
</div>
<input type="button" onclick="zoomIn();" value="放大" />
<input type="button" onclick="zoomOut();" value="缩小" />
</body>
</html>

document.body.runtimeStyle.zoom = "100%" ........

不好搞定的话就用style.zoom属性来缩放吧
这个肯定好用的

是否和放大的x,y方向大小有关?现在的情况看起来是:
高雄和香港到圆点的距离一样；而澳门稍有点不同，但是放大后应该和放大前的比例应一样的，
就改澳门的坐标点位置：left:8070;top:400 改为 left:8570;top:880 但是结果不是这样，
放大后和放大前的比例不一样的。
晕，问题出在哪里？

谢谢 eglic(圪圪)！文本可以不考虑放大，现在考虑文本到圆点的距离变化问题。

用一个<v:shape>把<v:textbox>包含起来
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<?xml version="1.0" encoding="gb2312" standalone="no" ?>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="pragma" content="no-cache" />
<style type="text/css">

</style>
<script language="JavaScript" src="/Script/Default.js"></script>
<script language="JavaScript">

</script>
<title></title>
</head>
<body>
<div style="width:450px;height:450px;overflow:auto;background-color:white;border:solid 5px red">
<v:group CoordSize="550,550" style="position:relative;left:0px;top:0px;width:450px;height:450px;" id="surface">
<v:shape style="position:absolute;left:100px;top:100px;">
<v:textbox style="font-size:23px;">测试一下哦</v:textbox>
</v:shape>
<v:line style="position:absolute;" from="30,270" to="30,0" >
<v:stroke EndArrow="Classic" weight="2px" dashstyle="Solid" Color="#000040"/>
</v:line>
<v:line style="position:absolute" from="30,270" to="530,270" >
<v:stroke EndArrow="Classic" weight="2px" dashstyle="Solid" LineStyle="ThinThick" Color="#000040"/>
</v:line>
</v:group>
</div>
<input type="button" onclick="zoomIn();" value="放大" />
<input type="button" onclick="zoomOut();" value="缩小" />
</body>
</html>

to eglic(圪圪)
用一个<v:shape>把<v:textbox>包含起来不好定位，没比上面我的结果好定位。
因为用到的地名和经纬对有关。
能否使用我上面的结果来测试看看？

你看一下我的程序,结果1:
<HTML  xmlns:t ="urn:schemas-microsoft-com:time" xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">
<title>test</title>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE>
v\:* {  BEHAVIOR: url(#DEFAULT#VML)}
BODY         {font-family:arial;font-size:80%}
.time        {behavior: url(#default#time2)}
.box         {position:absolute;top:100;left:100;width:50px;height:22px;
             padding:8px;padding-left:15px;display:none;cursor:hand;font-family:arial;}</STYLE><META content="MSHTML 5.00.2920.0" name=GENERATOR>
</head>
<SCRIPT language=JavaScript>
window.onload = init;
window.status ="提示：双击鼠标进行放大。"
var flag=1;
var sf=1;
function init()
{
saveOriginalSizes("group")
zoomObjectsToWindow("group");
with(document.body)
{
   document.onclick=_onclick;
}
}function _ondblclick()      //
{
   fd();
}function fd()      //放大
{
   if(sf<1)
   {
     sf=sf*2;
   }
   else sf=sf+1;
   zoom(sf/1.5);
}
document.ondblclick=_ondblclick;
var xx=25000;
var yy=23000;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
}
function drawLines()
{
var nx,ny,xx,yy;
if(screen.width==1024)
{
     nx=30;
     ny=23
     xx=23000;
     yy=30000;
}
else
{
   if(screen.width==800)
   {
      nx=25;
      ny=23;
      xx=23000;
      yy=25000;
   }
}
var count=0;
for(var i=0;i<=nx;i++){ //画纵坐标
  var px=1000*i;
  var newLine;
  if(px==5000||px==10000||px==15000||px==20000||px==25000||px==30000)
  {
     newLine = document.createElement("<v:line StrokeWeight='1' strokecolor='#4060ff' from='"+px+" 0' to='"+px+" "+xx+"' style='position:absolute;z-index:4'></v:line>");
   }
  else
  {
     newLine = document.createElement("<v:line StrokeWeight='1' strokecolor='#babbae' from='"+px+" 0' to='"+px+" "+xx+"' style='position:absolute;z-index:4'></v:line>");
  }
  group1.insertBefore(newLine);
  count++;
}
count=0; //画横坐标
for(var i=0;i<=ny;i++)
{
   var py=1000*count;
   var newLine
   if(py==3000||py==8000||py==13000||py==18000||py==23000)
   {
      newLine = document.createElement("<v:line StrokeWeight='1' strokecolor='#4060ff' from='0 "+py+"' to='"+yy+" "+py+"' style='position:absolute;z-index:4'></v:line>");
   }
   else
   {
      newLine = document.createElement("<v:line StrokeWeight='1' strokecolor='#babbae' from='0 "+py+"' to='"+yy+" "+py+"' style='position:absolute;z-index:4'></v:line>");
   }
   group1.insertBefore(newLine);
   count++;
}
}var dragapproved=false;
var x=y=0;
function move()
{
   if(event.button==1 && dragapproved)
   {
      var sx=event.clientX-x;
      var sy=event.clientY-y;
      x=event.clientX;
      y=event.clientY;
      self.scrollBy(-sx,-sy);
   }
   return false;
}function drags()
{
if(event.button!=1) return;
dragapproved=true;
x=event.clientX;
y=event.clientY;
document.onmousemove=move;
}
document.onselectstart=new Function("self.event.returnValue=false");
document.onmousedown=drags;
</SCRIPT><BODY bgColor=#9cf7f7 leftMargin=0 topMargin=0 scroll=auto oncontextmenu=window.event.returnValue=false; onload=drawLines();zoom(1)>
<DIV id="oBody" align="center" style="position:absolute;left:-1;top:-1"><v:group id=group1 coordsize="75000,69000" style="WIDTH: 750px; HEIGHT: 690px" contextmenu="demo"><v:oval title="高雄" strokecolor="blue" fillcolor="blue" style="position:absolute;cursor:hand;left:15460;top:630;width:160;height:160;z-index:8">
</v:oval>
<v:shape strokecolor="none" filled="False" style="position:absolute;left:15710;top:630;width:5000;height:5000;z-index:9" inset="1px,1px,1px,1px">
<div title="高雄" style="Text-align:left;cursor:hand;font-size:9pt;color:blue">高雄</div>
</v:shape>
<v:oval title="香港" strokecolor="blue" fillcolor="blue" style="position:absolute;cursor:hand;left:9180;top:890;width:160;height:160;z-index:8">
</v:oval>
<v:shape strokecolor="none" filled="False" style="position:absolute;left:9430;top:890;width:5000;height:5000;z-index:9" inset="1px,1px,1px,1px">
<div title="香港" style="Text-align:left;cursor:hand;font-size:9pt;color:blue">香港</div>
</v:shape>
<v:oval title="澳门" strokecolor="blue" fillcolor="blue" style="position:absolute;cursor:hand;left:8320;top:880;width:160;height:160;z-index:8">
</v:oval>

<v:shape strokecolor="none" filled="False" style="position:absolute;left:8570;top:880;width:5000;height:5000;z-index:9" inset="1px,1px,1px,1px">
<div title="澳门" style="Text-align:left;cursor:hand;font-size:9pt;color:blue">澳门</div>
</v:shape><v:shape strokecolor="none" filled="False" style="position:absolute;left:15710;top:630;width:5000;height:5000;z-index:9" inset="1px,1px,1px,1px">
<div title="高雄" style="Text-align:left;cursor:hand;font-size:9pt;color:blue">高雄</div>
</v:shape>
<v:/group>
</DIV>
</body>
</html>

结果2:
<HTML  xmlns:t ="urn:schemas-microsoft-com:time" xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">
<title>test</title>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE>
v\:* {  BEHAVIOR: url(#DEFAULT#VML)}
BODY         {font-family:arial;font-size:80%}
.time        {behavior: url(#default#time2)}
.box         {position:absolute;top:100;left:100;width:50px;height:22px;
             padding:8px;padding-left:15px;display:none;cursor:hand;font-family:arial;}</STYLE><META content="MSHTML 5.00.2920.0" name=GENERATOR>
</head>
<SCRIPT language=JavaScript>
window.onload = init;
window.status ="提示：双击鼠标进行放大。"
var flag=1;
var sf=1;
function init()
{
saveOriginalSizes("group")
zoomObjectsToWindow("group");
with(document.body)
{
   document.onclick=_onclick;
}
}function _ondblclick()      //
{
   fd();
}function fd()      //放大
{
   if(sf<1)
   {
     sf=sf*2;
   }
   else sf=sf+1;
   zoom(sf/1.5);
}
document.ondblclick=_ondblclick;
var xx=25000;
var yy=23000;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
}
function drawLines()
{
var nx,ny,xx,yy;
if(screen.width==1024)
{
     nx=30;
     ny=23
     xx=23000;
     yy=30000;
}
else
{
   if(screen.width==800)
   {
      nx=25;
      ny=23;
      xx=23000;
      yy=25000;
   }
}
var count=0;
for(var i=0;i<=nx;i++){ //画纵坐标
  var px=1000*i;
  var newLine;
  if(px==5000||px==10000||px==15000||px==20000||px==25000||px==30000)
  {
     newLine = document.createElement("<v:line StrokeWeight='1' strokecolor='#4060ff' from='"+px+" 0' to='"+px+" "+xx+"' style='position:absolute;z-index:4'></v:line>");
   }
  else
  {
     newLine = document.createElement("<v:line StrokeWeight='1' strokecolor='#babbae' from='"+px+" 0' to='"+px+" "+xx+"' style='position:absolute;z-index:4'></v:line>");
  }
  group1.insertBefore(newLine);
  count++;
}
count=0; //画横坐标
for(var i=0;i<=ny;i++)
{
   var py=1000*count;
   var newLine
   if(py==3000||py==8000||py==13000||py==18000||py==23000)
   {
      newLine = document.createElement("<v:line StrokeWeight='1' strokecolor='#4060ff' from='0 "+py+"' to='"+yy+" "+py+"' style='position:absolute;z-index:4'></v:line>");
   }
   else
   {
      newLine = document.createElement("<v:line StrokeWeight='1' strokecolor='#babbae' from='0 "+py+"' to='"+yy+" "+py+"' style='position:absolute;z-index:4'></v:line>");
   }
   group1.insertBefore(newLine);
   count++;
}
}var dragapproved=false;
var x=y=0;
function move()
{
   if(event.button==1 && dragapproved)
   {
      var sx=event.clientX-x;
      var sy=event.clientY-y;
      x=event.clientX;
      y=event.clientY;
      self.scrollBy(-sx,-sy);
   }
   return false;
}function drags()
{
if(event.button!=1) return;
dragapproved=true;
x=event.clientX;
y=event.clientY;
document.onmousemove=move;
}
document.onselectstart=new Function("self.event.returnValue=false");
document.onmousedown=drags;
</SCRIPT><BODY bgColor=#9cf7f7 leftMargin=0 topMargin=0 scroll=auto oncontextmenu=window.event.returnValue=false; onload=drawLines();zoom(1)>
<DIV id="oBody" align="center" style="position:absolute;left:-1;top:-1"><v:group id=group1 coordsize="75000,69000" style="WIDTH: 750px; HEIGHT: 690px" contextmenu="demo"><v:oval title="高雄" strokecolor="blue" fillcolor="blue" style="position:absolute;cursor:hand;left:15460;top:630;width:160;height:160;z-index:8">
</v:oval>
<v:shape strokecolor="none" filled="False" style="position:absolute;left:15710;top:630;width:5000;height:5000;z-index:9" inset="1px,1px,1px,1px">
<div title="高雄" style="Text-align:left;cursor:hand;font-size:9pt;color:blue">高雄</div>
</v:shape>
<v:oval title="香港" strokecolor="blue" fillcolor="blue" style="position:absolute;cursor:hand;left:9180;top:890;width:160;height:160;z-index:8">
</v:oval>
<v:shape strokecolor="none" filled="False" style="position:absolute;left:9430;top:890;width:5000;height:5000;z-index:9" inset="1px,1px,1px,1px">
<div title="香港" style="Text-align:left;cursor:hand;font-size:9pt;color:blue">香港</div>
</v:shape><v:oval title="澳门" strokecolor="blue" fillcolor="blue" style="position:absolute;cursor:hand;left:8320;top:880;width:160;height:160;z-index:8">
</v:oval>
<v:shape strokecolor="none" filled="False" style="position:absolute;left:8070;top:400;width:5000;height:5000;z-index:9" inset="1px,1px,1px,1px">
<div title="澳门" style="Text-align:left;cursor:hand;font-size:9pt;color:blue">澳门</div>
</v:shape>
<v:/group>
</DIV>
</body>
</html>

就改
<v:shape strokecolor="none" filled="False" style="position:absolute;left:8570;top:880;width:5000;height:5000;z-index:9" inset="1px,1px,1px,1px">
<div title="澳门" style="Text-align:left;cursor:hand;font-size:9pt;color:blue">澳门</div>
</v:shape>
为:
<v:shape strokecolor="none" filled="False" style="position:absolute;left:8070;top:400;width:5000;height:5000;z-index:9" inset="1px,1px,1px,1px">
<div title="澳门" style="Text-align:left;cursor:hand;font-size:9pt;color:blue">澳门</div>
</v:shape>
而且就该了left:8570;top:880-->left:8070;top:400两个值.调整位置,放大时变化太大.脱离圆
点太远,而没改变时就和高雄,香港的变化一样.在原始图时看起来距离都差不多的,放大多次后变
化太大.

加我的MSN吧[email protected]

我细想了一下,是否就是放大时和X,Y方向的放大比例有关.
同时放在X方向的位置,比例就没变.

我细想了一下,是否就是放大时和X,Y方向的放大比例有关.
同时放在X方向的位置,比例就没变.
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
我也是这么想＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
我没有QQ

定位时,尽量以原点的坐标为参考坐标,放大时就不会变化多大.
再次谢谢 eglic(圪圪)!

调试易

有关VML的放大?

解决方案 »