以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  SVG: 如何用javascript處理移動多個不定數目的圖形?  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=79683)

--  作者：huajen_chen
--  发布时间：1/26/2010 6:02:00 PM

--  SVG: 如何用javascript處理移動多個不定數目的圖形?
您好,
   移動固定數量的圖形時我是以addEventListener來完成圖形拖曳的動作(有幾個圖形就寫幾遍).  但是如果現在一開始我不會知道有多少個圖形是可以拖曳的(可能1-500), 圖形個數會在與使用者互動的過程一直增加(add功能)或減少(remove功能), 請問我該如何處理這樣的需求?
   例如有一個畫布一開始是空的, 使用者可以按add鍵加一個圖形(例如圓形)到畫布上, 一旦加到畫布上就必須可以在畫布上被拖曳; 當然畫布上的圖形也要可以隨著被滑鼠點選後被移除.

  請您幫幫忙, 謝謝!!

--  作者：gj1989816
--  发布时间：1/27/2010 9:38:00 AM

--  
使用 g 元素 来包住所以的元素，在 transform   g元素
--  作者：huajen_chen
--  发布时间：1/27/2010 11:50:00 AM

--  
樓上的朋友,
   能不能麻煩你說清楚點...?  不是要單純的移動, 是要以滑鼠拖曳. 以下是我的做法.
<g id="g01" transform="scale(1.0)">
<rect id="rect001" x="100" y="100" width="0.1cm" height="1cm" fill="white" stroke="blue" stroke-width="1"/>
<rect id="rect002" x="100" y="200" width="0.1mm" height="1cm" fill="white" stroke="blue" stroke-width="1"/>
</g>
...
rectangle001 = document.getElementById('rect001');
rectangle002 = document.getElementById('rect002');
rectangle001.addEventListener("mousedown", mousedown_listener001, false);
rectangle002.addEventListener("mousedown", mousedown_listener002, false);
function mousedown_listener001(evt)
{
    dx001 = rectangle001.x.baseVal.value - evt.clientX;
    dy001 = rectangle001.y.baseVal.value - evt.clientY;
    document.addEventListener("mousemove", mousemove_listener001, true);
    document.addEventListener("mouseup", mouseup_listener001, true);
}
function mousedown_listener002(evt)
{
    dx002 = rectangle002.x.baseVal.value - evt.clientX;
    dy002 = rectangle002.y.baseVal.value - evt.clientY;
    document.addEventListener("mousemove", mousemove_listener002, true);
    document.addEventListener("mouseup", mouseup_listener002, true);
}
function mousemove_listener001(evt)
{
    var id = rectangle001.ownerSVGElement.suspendRedraw(1000);
    rectangle001.x.baseVal.value = evt.clientX + dx001;
    rectangle001.y.baseVal.value = evt.clientY + dy001;
    rectangle001.ownerSVGElement.unsuspendRedraw(id);
}
function mousemove_listener002(evt)
{
    var id = rectangle002.ownerSVGElement.suspendRedraw(1000);
    rectangle002.x.baseVal.value = evt.clientX + dx002;
    rectangle002.y.baseVal.value = evt.clientY + dy002;
    rectangle002.ownerSVGElement.unsuspendRedraw(id);
}
function mouseup_listener001(evt)
{
    document.removeEventListener("mousemove", mousemove_listener001, true);
    document.removeEventListener("mouseup", mouseup_listener001, true);
}
function mouseup_listener002(evt)
{
    document.removeEventListener("mousemove", mousemove_listener002, true);
    document.removeEventListener("mouseup", mouseup_listener002, true);
}
   但是如果一开始我不会知道有多少个图形是可以拖曳的(可能1-500个), 图形个数会在与使用者互动的过程一直增加(add功能)或减少(remove功能), 请问我该如何处理这样的需求?
   例如有一个SVG画布一开始是空的, 使用者可以按add键加一个图形(例如方形)到画布上, 一旦加到画布上就必须可以立即在画布上被拖曳; 当然画布上的图形也要可以随著被滑鼠点选后(例如double click)被移除. 请问该如何做?!  
   请帮帮忙, 谢谢!!
--  作者：Joey0720080246
--  发布时间：1/31/2010 11:23:00 AM

--  
js写一个鼠标拖曳对象MouseDragging. 用面向对象来解决
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 46.875ms