从DOM拖动,放入Canvas或SVG

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做的事情,因为画布上没有'对象',只有涂上油漆的像素,一旦涂上油漆就会立即干掉.)

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