Question

我即将构建一个工具，允许用户从列表中拖动项目并将其放在画布中以构建树/组织结构图。

想知道是否甚至可以将常规li节点拖到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做的事情，因为画布上没有'对象'，只有涂上油漆的像素会在你画完后立即干掉。）

我个人建议您直接在XHTML中嵌入SVG，而不是通过<object>或<img>，这样您就可以使用document进行处理。这是我的一个示例页面，它将多个SVG嵌入到单个XHTML页面中：http://phrogz.net/SVG/convert_path_to_polygon.xhtml

Answer 2

你会发现拉斐尔很容易加速开发，创建您的SVG并将其放入

的转换工具

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

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

从DOM拖动，放入Canvas或SVG

2 个答案: