当前位置：文江博客话题详情

从 DOM 拖放到 Canvas 或 SVG 中

发布于 2024-10-19 10:58:51 字数 175 浏览 4 评论 0原文

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

想知道是否可以将常规 li-node 拖到画布/svg 上并检测画布上的位置以及哪个元素被删除？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浪菊怪哟 2024-10-26 10:58:52

和拉斐尔一起你会发现一切都很容易
加快开发速度，创建您的 SVG 并将其放入
转换器工具位于

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

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

回复收藏 0 原文

深海少女心 2024-10-26 10:58:51

是的，可以拖动到另一个元素上/上方并确定您在该元素上的位置。对于 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 执行的操作，因为画布上没有“对象”，只有油漆像素，一旦您绘制它们，它们就会立即干燥。）

我个人建议将您的 SVG 直接嵌入 XHTML 中，而不是通过

Yes, it's possible to drag onto/over another element and determine where on that element you are. For SVG, you'll want to use code like the following to transform from mouse coordinates to canvas local space:

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

For Canvas, you might want to ensure that the .style.offsetWidth of the canvas is the same as its width, or else transform between them to get into local space. (Only if you are resizing the display of your canvas.)

One of the best things about SVG compared to Canvas, however, is that it is a "retained graphics mode" drawing API. Among other things, this allows you to put event handlers on the SVG elements themselves and detect mouseover events on them, instead of attempting to determine from coordinates which object you are over. (The latter is what you'll need to do with a Canvas, as there are no 'objects' on the canvas, only pixels of paint that instantly dried once you painted them.)

I personally suggest embedding your SVG directly in XHTML, instead of via <object> or <img>, so that you have a single document to deal with. Here's an example page of mine that embeds multiple SVG's into a single XHTML page: http://phrogz.net/SVG/convert_path_to_polygon.xhtml

回复收藏 0 原文

~没有更多了~