樓上的朋友,
能不能麻煩你說清楚點...? 不是要單純的移動, 是要以滑鼠拖曳. 以下是我的做法.
<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)被移除. 请问该如何做?!
请帮帮忙, 谢谢!! |
[返回] W3CHINA.ORG讨论区 - 语义网·描述逻辑·本体·RDF·OWL →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → SVG: 如何用javascript處理移動多個不定數目的圖形?
(订阅本版)
2010/1/26 18:02:00
新浪微博
