1

所以我想用SVG制作一个绘图工具，我使用一种相当幼稚的方法来改变我的Path的d属性：

$("div#drawarea").bind("mousemove", function(ev) {

  ev.preventDefault();

  ev.stopPropagation();

  var pX= (ev.pageX - this.offsetLeft);

  var pY= (ev.pageY - this.offsetTop);

  $path.attr("d", $path.attr("d") + " L" +pX+ "," + pY); //using jquery-svg here to change the d attribute

});

如您所见，我在 mousemove 函数上执行此操作。该代码有效，但是当我真正希望它是平滑线时，当鼠标快速移动创建许多直线时，它变得无响应。我认为这是因为我在 mousemove 事件上执行的大量字符串连接（当单击长时间保持时，路径上的 d 属性可能会变得非常大，实际上是数千个字符）。

我想知道是否有任何本机方法可以在路径末尾添加新值，而不是直接操作 d 属性。我检查了 jquery-svg 源代码，似乎该库在内部也使用了朴素的字符串连接模式，因此使用它的方法不会有任何好处。

另外我想知道是否是这种情况，或者浏览器是否只是限制了可以触发的 mousemove 事件的数量（每 X 毫秒一次？），因此没有性能优化可以改善这一点。

4

2 回答 2

2

使用SVG 路径，例如 DOM方法。您必须编写更复杂的代码，但浏览器不必重新解析整个路径属性。例如，Firefox 确实利用了这一点，其他浏览器也很可能也是如此。

于 2012-08-20T21:25:09.730 回答
1

如果其他人不知道什么是更新 SVG-Path 数据属性（用于实时应用程序）的最快方法的问题，我对此进行了一个小测试：

http://jsperf.com/svg-path-test

是的，将它设置为字符串意味着它需要被解析，这不是 DOM SVG 接口的情况，但第一种方法仍然更快。Maybee 界面会随着添加的每个点更新 DOM，从而减慢整个过程。

于 2016-01-29T16:21:56.500 回答