2 liyaottt liyaottt 于 2013.12.08 23:20 提问

vml手绘闭合多边形,想转成SVG或者canvas的。

最近要实现一个功能,在一张图片上选好区域后,然后记录后选择的坐标。然后使用 map area 将所选区域显示出来。
我在网上找了一段vml的代码,能实现我的功能。
但是因为vml只支持ie,所以没有办法在 Chrome上用。
这个看了两天了,一直没有实现方法,请各位大神帮帮忙,能将代码改成 SVG或者canvas这种能支持Chrome浏览器的。
下面的代码是vml手绘闭合多边形的。
再次谢谢各位大神了。

<HTML xmlns:v>
  <head>
  <title>手绘多边形</title>
  <meta name="ContentType" content="text/html" />
  <meta name="CharSet" content="UTF-8" />
  <style type="text/css">
  v\:* {behavior:url(#default#VML);}
  </style>
  <script language="javascript">
    var Working=false;//判断是否画图的状态
    var poly1=null,oldvalue="",oldx=0,oldy=0  //为了完成铅笔、记忆点等连续线段
    var xx,yy;
    //鼠标单击事件
    function divMousedown()
    {
    if(!Working)//第一次点击鼠标
    {
        xx=event.x;
        yy=event.y;
        poly1=div1.appendChild(document.createElement("<v:shape path='m0,0 l0,0' filled='true' style='POSITION:absolute;z-index:1;left:"+xx+";top:"+yy+";width:100;height:100;filter: Alpha(Opacity=60);' strokecolor='black' strokeweight='1' coordsize='100,100' fillcolor='yellow'/>"));
        oldvalue=poly1.path.value.replace("e","");
        oldx=xx;
        oldy=yy;
        Working=true;
    }
    else
    {
        if (poly1!=null) oldvalue=poly1.path.value.replace(" e","");
    }
    }
    //鼠标移动的时候
    function divMouseMove()
    {
        tempx=event.x;
        tempy=event.y;
        if (poly1!=null)
        {
            poly1.path.value=oldvalue+","+(tempx-oldx)+","+(tempy-oldy);
            poly1.path.value=poly1.path.value.replace(",0,0,",",0,").replace(",0 e","e");
        }
    }

    function divMouseUp()
    {
        if(event.button==2) 
        {
            poly1.path.value=oldvalue+"x e";
            Working=false;
            poly1=null;
        }
    }
  </script>
  <body style="margin:0px;">
  <div id="div1" style="position:absolute; height:100%; width:100%; border:1px solid 0000FF;" onmousedown="divMousedown();" onmousemove="divMouseMove();" onmouseup="divMouseUp();" oncontextmenu="return false;">在页面上点击鼠标左键开始,右击鼠标右键结束</div>
  </body>
  </html>

1个回答

wzsxcz
wzsxcz   2014.06.04 17:38

去下个rapheal,自己画,ie,chrome什么的都兼容的

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!