optimization - 使用 svg 库和 javascript 优化拖放

Question

目前大多数 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更好。

score 0 · Accepted Answer

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

1 回答 1