中文XML论坛--svg画直线怎么总是出错？

新书推介：《语义网技术体系》
作者：瞿裕忠，胡伟，程龚

>>中国XML论坛<<

W3CHINA.ORG讨论区

计算机科学论坛

SOAChina论坛

Blog

开放翻译计划

新浪微博

首页

软件下载

资料下载

核心成员

帮助

>> 本版讨论SVG, GML, X3D, VRML, VML, XAML, AVALON, Batik等基于XML的图形技术，以及有关GIS的应用。

[返回] 中文XML论坛 - 专业的XML技术讨论区 → XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → svg画直线怎么总是出错？

◇查看新帖 ◇ 用户列表 ◇

(订阅本版)

您是本帖的第 7797 个阅读者　　

*	贴子主题： svg画直线怎么总是出错？	举报打印推荐 IE收藏夹
	本主题类别:

zw1213

  等级：大一(高数修炼中)
  文章：13
  积分：123
  门派：XML.ORG.CN
  注册：2006/7/29

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	楼主

svg画直线怎么总是出错？

//画直线
function drawArrow()
{
   arrow=svgDoc.createElement("line");
   arrow.setAttribute("x1",x);
   arrow.setAttribute("y1",y);
   arrow.setAttribute("stroke","blue");
   arrow.setAttribute("stroke-width",3);
}
//鼠标onmousemove 事件
function moveArrow(evt)
{
   if(shape=="arrow")
   {
       x1=evt.clientX;
       y1=evt.clientY;
       arrow.setAttribute("x2",x1);
       arrow.setAttribute("y2",y1);
       drawing.appendChild(arrow);
   }
}
//onmouseup事件
function endDrawing()
{
  shape="";
}
鼠标抬起的话，也不停止画，第二次画的时候开始坐标就和前一次结束的位置一样
从结束那点开始画起了。连在一起了
请大家帮忙看一下，怎么回事。

   收藏   分享
顶(0)

2006/9/14 13:48:00

daidaixiong

  等级：大一(猛啃高等数学)
  文章：25
  积分：154
  门派：XML.ORG.CN
  注册：2006/4/25

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第2楼

你把完整代码发一下吧，包括mousedown的函数，看看可不可以找到毛病。

2006/9/14 17:16:00

tamefox

  威望：1
  等级：大四(每天看1小时莱昂氏)
  文章：129
  积分：1236
  门派：XML.ORG.CN
  注册：2005/7/6

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第3楼

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<desc>
  
</desc>
<script type="text/javascript"><![CDATA[
var x,y,arrow,shape;
function drawArrow(evt){
       var drawing=document.getElementById('drawing');
     if(evt.detail==2){
       document.getElementById("bg").setAttribute("visibility","hidden");
       return;
     }
        x=evt.screenX;
        y=evt.screenY;
        if(shape=="arrow"){
          arrow.setAttribute("x2",x);
    arrow.setAttribute("y2",y);
        }
        arrow=document.createElement("line");
        arrow.setAttribute("x1",x);
        arrow.setAttribute("y1",y);
        arrow.setAttribute("x2",evt.screenX);
        arrow.setAttribute("y2",evt.screenY);
        arrow.setAttribute("stroke","blue");
        arrow.setAttribute("stroke-width",1);
        drawing.appendChild(arrow);
        shape="arrow";
     }
    function moveArrow(evt)
     {
        if(shape=="arrow")
         {
     x=evt.clientX;
     y=evt.clientY;
     arrow.setAttribute("x2",x);
     arrow.setAttribute("y2",y);
        }
     }
    ]]></script>
<g id="drawing">
</g>
<rect id="bg" width="100%" height="100%" fill="none" pointer-events="visible" onclick="drawArrow(evt)"  onmousemove="moveArrow(evt)"/>
</svg>
----------------------------------------------
无为而无所不为
有为而有所不为

2006/9/15 9:08:00

daidaixiong

  等级：大一(猛啃高等数学)
  文章：25
  积分：154
  门派：XML.ORG.CN
  注册：2006/4/25

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第4楼

呵呵，怎么发的人换了。如果代码是一样的话，我做了如下改动
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<desc>
  
</desc>
<script type="text/javascript"><![CDATA[
  var x,y,arrow,shape;
  function drawArrow(evt){
       var drawing=document.getElementById('drawing');
     if(evt.detail==2){
       document.getElementById("bg").setAttribute("visibility","hidden");
       return;
     }
        x=evt.screenX;
        y=evt.screenY;
        if(shape=="arrow"){
          arrow.setAttribute("x2",x);
    arrow.setAttribute("y2",y);
        }
        arrow=document.createElement("line");
        arrow.setAttribute("x1",x);
        arrow.setAttribute("y1",y);
        arrow.setAttribute("x2",evt.screenX);
        arrow.setAttribute("y2",evt.screenY);
        arrow.setAttribute("stroke","blue");
        arrow.setAttribute("stroke-width",1);
        drawing.appendChild(arrow);
        shape="arrow";
     }
    function moveArrow(evt)
     {
        if(shape=="arrow")
         {
     x=evt.clientX;
     y=evt.clientY;
     arrow.setAttribute("x2",x);
     arrow.setAttribute("y2",y);
        }
     }
     function mouseup()
     {
        shape="";
     }
    ]]></script>
<g id="drawing">
</g>
<rect id="bg" width="100%" height="100%" fill="none" pointer-events="visible" onmousedown="drawArrow(evt)"  onmousemove="moveArrow(evt)" onmouseup="mouseup()"/>
</svg>
如果原来确实是onclick="drawArrow(evt)"，那么改成onmousedown="drawArrow(evt)"，因为事件响应的顺序总是先有mousedown，然后才有mouseup，如果将mousedown换成click，来设定初始坐标的话，当执行mousemove以后，就不会响应mouseup事件了。

2006/9/15 14:00:00

zw1213

  等级：大一(高数修炼中)
  文章：13
  积分：123
  门派：XML.ORG.CN
  注册：2006/7/29

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第5楼

我的mouseup不响应。
画的时候是用的onmousedown不是click，但mouseup不起作用
不知道是怎么回事？

[此贴子已经被作者于2006-9-17 11:05:44编辑过]

2006/9/15 14:55:00

daidaixiong

  等级：大一(猛啃高等数学)
  文章：25
  积分：154
  门派：XML.ORG.CN
  注册：2006/4/25

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第6楼

要不你还是发一段你比较完整的代码吧，凭空想象不出来啊

2006/9/18 8:52:00

zw1213

  等级：大一(高数修炼中)
  文章：13
  积分：123
  门派：XML.ORG.CN
  注册：2006/7/29

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第7楼

谢谢。问题已经解决了。
我的onmouseup放在<g>里就可以
放到<rect>里就不行。不知道是怎么回事

2006/9/19 16:28:00

ncepuyuyu

  等级：大二期末(汇编考了97分!)
  文章：59
  积分：443
  门派：XML.ORG.CN
  注册：2006/6/29

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第8楼

因为你的rect的一个属性被设成这个了fill="none"
你把fill随便设成别的，别为空，肯定就行了

2006/9/21 17:35:00

GoogleAdSense

  等级：大一新生
  文章：1
  积分：50
  门派：无门无派
  院校：未填写
  注册：2007-01-01

	广告

2024/12/22 10:00:02

本主题贴数8，分页： [1]

管理选项：修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	109.375ms