使用 svg 库和 javascript 优化拖放

Posted 2023-02-16

【中文标题】使用 svg 库和 javascript 优化拖放

【英文标题】：optimize drag and drop with svg library & javascript

【发布时间】：2013-04-11 15:26:03

【问题描述】：

目前大部分 SVG 框架都提供拖放功能。我使用过 RaphaelJs、Extjs Drawing 和 SVG.js(http://www.svgjs.com/)。所有框架都通过将其与元素本身绑定来提供事件处理方法。例如：

dragStart: function(event)
    //'this' refers to the element itself
    this.doSomething();
    this.moveTo(event.x,event.y);
;

但是这样做的后果是浏览器性能大大下降，当有超过一百个元素和一些逻辑处理时。我的元素将是复合元素，这意味着可能是矩形中的一些文本或路径，但矩形应该是拖动时事件的目标（或 this）。元素将有其他事件要监听，例如 onclick、onDblClick、onHover 等。

我的问题是，有没有办法优化这个？在应用程序显示我上面提到的大量复合元素后，用户体验很差。

更新：

我已经使用上面提到的方法构建了一个应用程序。将事件处理程序绑定到每个对象。当元素正在侦听 onhover 和 onmousedown 事件时，结果不是非常用户友好。我正在考虑优化应用程序，但不确定如何。 FF中效果更明显，chrome更好。

【问题讨论】：

您需要提供更多详细信息，说明您所做的事情以及您尝试过的事情，是在所有浏览器中运行缓慢还是仅在某些浏览器中运行缓慢？

【参考方案1】：

您确定需要 SVG 吗？ Fabric.js 是一个很棒的 AP​​I，用于基于 Canvas 元素进行缩放、旋转、拖放和分组。