javascript - 从 DOM 拖放，放入 Canvas 或 SVG

Question

我将要构建一个工具，允许用户将列表中的项目拖放到 Canvas 中以构建树/组织结构图。

想知道是否有可能将一个常规的 li-node 拖到 Canvas /svg 上并检测 Canvas 上的哪个位置以及哪个元素被丢弃了？

也许您有比使用 canvas/svg 更好的建议？我唯一的要求是用户应该能够直观地从列表中拖动项目以构建图表/组织结构图。

Answer 1

是的，可以拖动到另一个元素上/上方并确定您在该元素上的位置。对于 SVG，您需要使用如下代码将鼠标坐标转换为 Canvas 局部空间:

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

对于 Canvas，您可能希望确保 .style.offsetWidth Canvas 的大小与其 width 相同，或者在它们之间转换以进入本地空间。 (仅当您调整 Canvas 的显示大小时。)

然而，与 Canvas 相比，SVG 最好的地方之一是它是一种“保留图形模式” 绘图 API。除其他外，这允许您将事件处理程序放在 SVG 元素本身上并检测 mouseover。它们上的事件，而不是试图从坐标确定你在哪个对象上。 (后者是您需要对 Canvas 执行的操作，因为 Canvas 上没有“对象”，只有油漆像素，一旦您绘制它们就会立即变干。)

我个人建议将 SVG 直接嵌入 XHTML，而不是通过 <object>或 <img> , 这样你就有了一个 document去处理。这是我的一个示例页面，它将多个 SVG 嵌入到单个 XHTML 页面中:http://phrogz.net/SVG/convert_path_to_polygon.xhtml