javascript – 从DOM拖放,放入Canvas或SVG

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

想知道是否甚至可以将常规li节点拖到canvas / svg上并检测画布上的哪个元素和哪个元素被删除？

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

解决方法

是的,可以拖动到另一个元素上,然后确定该元素的位置.对于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与其宽度相同,或者在它们之间进行转换以进入本地空间. (仅当您调整画布的显示大小时.)

然而,与Canvas相比,SVG最好的一点是它是一个“保留图形模式”的绘图API.除此之外,这允许您将事件处理程序放在SVG元素本身上并检测它们上的鼠标悬停事件,而不是尝试从坐标确定您所在的对象. (后者就是你需要用Canvas做的事情,因为画布上没有’对象’,只有油漆的像素在你画完后立即干掉.)

我个人建议直接在XHTML中嵌入你的SVG,而不是通过< object>或者< img>,以便您有一个单独的文档来处理.这是我的一个示例页面,它将多个SVG嵌入到单个XHTML页面中：http://phrogz.net/SVG/convert_path_to_polygon.xhtml