從DOM拖放，放置在畫布或SVG中

我即將構建一個工具，該工具允許用戶將列表中的項目拖放到畫布中以構建樹/組織結構圖。從DOM拖放，放置在畫布或SVG中

想知道是否可以將常規的li節點拖到canvas/svg上並檢測畫布上的哪個位置以及哪個元素被丟棄？

也許你有比使用canvas/svg更好的建議嗎？我唯一的要求是，用戶應該能夠直觀地從列表中拖動項目來構建圖表/組織結構圖。

2011-02-28 Mickel

是的，可以將其拖放到另一個元素上並確定該元素在哪裏。對於SVG，你要使用如下代碼從鼠標的座標轉換帆布局部空間：

function mouseXY(evt){ 
    var mxy = svg.createSVGPoint(); 
    mxy.x = evt.clientX; 
    mxy.y = evt.clientY; 
    return mxy.matrixTransform(svg.getScreenCTM().inverse()); 
}

畫布，你可能要確保畫布.style.offsetWidth相同的width ，或者在它們之間轉換以進入本地空間。（僅當您調整畫布的顯示大小時）。

然而，與SVG相比，SVG最好的一點是它是一個「保留圖形模式」繪圖API。除此之外，這允許您將事件處理程序放置在SVG元素上，並檢測它們上的事件，而不是嘗試從座標確定您所在的對象。（後者是你需要用Canvas做的事情，因爲畫布上沒有任何'對象'，只有當你繪製它們時立即乾燥的油漆像素。）

我個人建議直接嵌入你的SVG在XHTML中，而不是通過<object>或<img>，以便您有一個單一的document來處理。下面是嵌入了多個SVG的成單個XHTML頁面我的一個示例頁面：http://phrogz.net/SVG/convert_path_to_polygon.xhtml

來源

2011-02-28 16:30:37 Phrogz