JS svg 绘画。如何降低线条绘制频率（mousemove 事件）？

Question

我正在编写一个简单的 SVG 绘图应用程序，现在我正在尝试优化线条绘图。原始变体是在每个 mousemove 事件上每隔 'lineTo' 绘制一次。它会产生糟糕的清晰度。

我正在使用全局变量 testInt 来模拟 lineTo 动作之间的延迟，它提供了非常漂亮的平滑线，但似乎是不好的做法。谁能提出更好的解决方案？

这是我的 drawLine 函数代码（正如我所说，它基本上修改了现有的元素）：

drawLine: function(id, X, Y){
    var path = document.getElementById(id);
    if(path.getAttribute('d'))
    {
        testInt++;
        if(testInt>=6)
        {
            PathHelper.addLineTo(path, X, Y);
            testInt = 0;
        }
    }
    else
    {
        PathHelper.moveTo(path, X, Y);
    }
}

PathHelper 仅生成正确的字符串并将其插入到已创建的路径中。

Answer 1

这是一个解决方案，它会在每条线的绘制之间引入延迟。请注意 canDrawLine 标志存在于闭包中，因此没有使用全局变量。每次绘制一条线时，我都会使用 setTimeout 在延迟后将标志切换为 true。

drawLine: drawLineFactory();

function drawLineFactory() {

  var canDrawLine = true;

  //Decrease to draw lines more often; increase to draw lines less often
  var TIME_BETWEEN_LINES_MS = 100;

  function drawLine(id, X, Y) {

    //If a line was recently drawn, we won't do anything
    if (canDrawLine) {
      var path = document.getElementById(id);
      if (path.getAttribute('d')) {
        PathHelper.addLineTo(path, X, Y);

        //We won't be able to draw another line until the delay has passed
        canDrawLine = false;
        setTimeout(function() {
          canDrawLine = true;
        }, TIME_BETWEEN_LINES_MS);

      } else {
        PathHelper.moveTo(path, X, Y);
      }
    }
  }

  return drawLine;
}

JS svg 绘画。如何降低线条绘制频率（mousemove 事件）？

JS svg painting. How to lower Lines drawing frequency(mousemove event)?

javascript

svg

svg-path