性能问题:画布似乎在添加每个Path时重绘

时间:2016-07-09 15:55:50

标签: javascript html5-canvas paperjs

添加了很多路径点时,我会看到性能问题。当点太少时,曲线非常平滑。然而,当画布添加了适度的点数时,由于性能影响,曲线似乎变得尖锐。我注意到纸张js清除整个画布并在每个paper.view.update调用上再次绘制视图。每次鼠标事件都会调用此更新调用。 以下是我的申请摘要 -

  1. canvas指定鼠标事件侦听器
  2. onMouseDown - paper.Path已初始化
  3. onMouseMove - 使用paper.Point
  4. 绘制一个点
  5. onMouseUp - 路径简洁明了。
  6. 以下是我在完整版paperjs中调试的代码片段。线 - 11578以后

    CanvasView :
    
    update: function(force) {
            var project = this._project;
            if (!project || !force && !project._needsUpdate)
                return false;
            var ctx = this._context,
                size = this._viewSize;
            ctx.clearRect(0, 0, size.width + 1, size.height + 1);
            project.draw(ctx, this._matrix, this._pixelRatio);
            project._needsUpdate = false;
            return true;
        }
    

    此更新方法由纸张js调用。

    随着点数的增加,性能极度下降。如何改进这一点以使其可接受的性能? 我在paperjs论坛PaperJS forum question

    上提出了类似的问题

0 个答案:

没有答案