從DOM拖放，放入Canvas或SVG

Question

我將要構建一個工具，允許用戶從列表中拖動項目並將其拖放到畫布中以構建樹/組織結構圖。

想知道是否有可能將常規li-node拖到canvas / svg上並檢測出畫布上的何處以及放置了哪些元素？

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

Answer 1

是的，可以在另一個元素上/上方拖動並確定您在該元素上的位置。 對於SVG，您需要使用以下代碼將鼠標坐標轉換為畫布局部空間：

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

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

與Canvas相比，SVG最好的優點之一是它是“保留圖形模式”繪圖API。 除其他外，這使您可以將事件處理程序放在SVG元素本身上並檢測其上的mouseover事件，而無需嘗試從坐標中確定您位於哪個對象上。 （后者是您需要使用Canvas進行的操作，因為畫布上沒有“對象”，只有顏料像素在繪制后立即變干。）

我個人建議直接將您的SVG嵌入XHTML中，而不要通過<object>或<img>嵌入，這樣您就可以處理一個document 。 這是我的示例頁面，該頁面將多個SVG嵌入到單個XHTML頁面中： http : //phrogz.net/SVG/convert_path_to_polygon.xhtml

Answer 2

通過Raphael Speed開發，您會發現它很容易，創建SVG並將其放入以下位置的Converter工具中

http://irunmywebsite.com/raphael/svgsource.php拖放示例

http://irunmywebsite.com/raphael/additionalhelp.php?q=bearbones