VML一游戏类应用，赛车轨迹

在VML绘图中，当绘制shap的时候，网上普遍有个说法是通过调整CoordOrig可以调整坐标系的原点位置

可经过很多尝试以后依旧没有任何反应，当调整这个值的时候。

而且发现默认状态下，v:shape根本没有CoordOrig属性（null），后来终于发现，其实坐标系的调整是通过
改变CoordSize和shap本身的style.left/style.top来调整的。
一个width和height都是400的shape类型DOM，当绘制的内容超出范围的时候依然能够显示，没有任何影响。
所以，实际上原点始终在DOM的左上角，不同的是，我们的绘图区域可以超过DOM的左上角！！

CoordSize="400,-400"  的时候，表示DOM的右下角坐标是(400,-400), 而DOM的左上角始终是(0,0)

所以，就得到以后右为正的X轴和上为正的Y轴， 这时再进行绘图，就是以DOM的左上角为原点的一个常规数学坐标系。

下面是一则对line的小应用。经过改进的话可以做成一个简单的类似贪吃蛇的游戏。
使用键盘的左右键来调整方向，上下键调整速度

 

< html  xmlns ="http://www.w3.org/1999/xhtml"
   xmlns:v ="urn:schemas-microsoft-com:vml"
   xmlns:o ="urn:schemas-microsoft-com:office:office"  lang ="en" >
< head >
< title > 画斜线 </ title >
<!-- [if !mso]>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<![endif] -->
< style  type ="text/css" >
body { padding : 0px ; margin : 0px ; }
#line { position : absolute ; left : 0 ; top : 0 ; z-Index : 3 ; }
</ style >
</ head >
< body >

< v:line  id ="line" ></ v:line >
< v:PolyLine  id ="pLine"  filled ="false"  Points ="0,0 0,100" ></ v:PolyLine >
< v:shape  CoordOrig ="100,100"  CoordSize ="200,200" >

</ v:shape >

< script  language ="javascript" >
var  line = document.getElementById( " line " );

line.to = " 0,0 " ;
line.from = " 0,0 " ;
with (line.stroke)
{
 Color = " #FF0000 " ;
 Weight = " 1px " ;
 EndArrow = " Classic " ;
 DashStyle = " LongDashDot " ;
}

line = document.getElementById( " pLine " );
line.style.position = " absolute " ;
with (line.stroke)
{
 Color = " #000 " ;
 Weight = " 1px " ;
 EndArrow = " Classic " ;
 DashStyle = " Solid " ;
}
line.Points.value = " 10,10 100,100 200,300 400,500 " ;
var  html = " 10,10 " ;
var  direction = 0 ;
var  prePoint = [ 10 , 10 ];
var  step = 5 ;
function  Move()
{
  var  x = step * Math.cos(direction);
  var  y = step * Math.sin(direction);
  var  p = prePoint;
 p[ 0 ] += x;
 p[ 1 ] -= y;
 p[ 0 ] = Math.round(p[ 0 ]);
 p[ 1 ] = Math.round(p[ 1 ]);
  if (p[ 0 ] >= 0 && p[ 1 ] >= 0 && step > 0 )
 {
  prePoint = p;
  html += "   " + prePoint[ 0 ] + " , " + prePoint[ 1 ];
  line.Points.value = html;
 }
}
window.setInterval(Move, 50 );

function  document_KeyDown(e)
{
  var  e = window.event;
  if (e.keyCode == 37 )
  direction += 0.1 ;
  else   if (e.keyCode == 39 )
  direction -= 0.1 ;
  else   if (e.keyCode == 38 )
  step = Math.min(Math.max(step + 1 , 1 ), 15 );
  else   if (e.keyCode == 40 )
  step = Math.max(step - 1 , 0 );
}
document.onkeydown = document_KeyDown;
document.body.focus();
</ script >
</ body >
</ html >

 

来自BestEast的技术分享, JavaScript的奇思妙想, 抛砖引玉，希望能再激起哪位的好创意。


在一些图形应用上，VML极其之方便，但现如今日趋强大的非IE浏览器使得VML几近要退出历史舞台了。
在绘图的组建逻辑上，其实SVG和VML有不少共同之处，如果哪位牛人能够开发出一个兼容VML和SVG的客户端JS绘图组件……