Question

我正在制作带幻灯片预览条的幻灯片编辑器。我正在使用电子并做出反应。我的每张幻灯片都包含一个用于图像/文本的背景画布和一个用于绘图的前景画布。我的绘图表现很好，直到我的预览条中有大约20张幻灯片，然后绘图速度非常慢。我正在绘制鼠标移动事件，以便用户看到它跟踪光标。

我想在绘制预览幻灯片时，我已将问题缩小到ctx.stroke（）行。预览幻灯片要小得多，但与用户实际绘制的主画布具有相同的分辨率。

在屏幕上显示＆gt; 40幅画布时，有什么方法可以提高效果吗？

apply(ctx, pointIndex) {
    let points = this.path.getPoints().slice(pointIndex);
    ctx.lineWidth = this.getLineWidth();
    if(points.length === 1){
        ctx.fillRect(points[0].x - (this.getLineWidth() / 2), points[0].y - (this.getLineWidth() / 2), this.getLineWidth(), this.getLineWidth());
        return;
    }
    ctx.beginPath();
    ctx.moveTo(Math.floor(points[0].x), Math.floor(points[0].y));
    points.slice(1).forEach(function(point) {
        ctx.lineTo(Math.floor(point.x), Math.floor(point.y));
    });
    ctx.stroke();
    ctx.closePath();
    ctx.lineWidth = 1;
    pointIndex = this.path.getPoints().length - 1;
    return pointIndex;
}

Answer 1

回答您的问题：是的，在您增加总画布尺寸时，重绘需要更长时间。通过添加全尺寸画布，您可以大幅增加画布总尺寸，即使这些画布按比例缩小为＆＃34;幻灯片尺寸＆＃34;。顺便说一下，.stroke不是你的问题 - 它渲染速度非常快。

每个幻灯片画布的分辨率与主画布相同。 DOM必须记住原始大小，因此每个新幻灯片的总画布大小会显着增加。

修复是使每个幻灯片画布更小（==显示尺寸），而不是保持与主画布相同的分辨率。如果用户想要重绘幻灯片，则从points为该幻灯片动态创建一个完整大小的画布。减少总画布尺寸==更好的性能。

Canvas有一个缩放命令，可让您轻松拍摄全尺寸画布内容并将其缩放到较小的显示尺寸：

var c=document.createElement('canvas');
var cctx=c.getContext('2d');
c.width=smallSlideWidth;
c.height=smallSlideHeight;
var scale=Math.min((slideWidth/mainCanvasWidth),(slideHeight/mainCanvasHeight));
cctx.scale(scale,scale);
... now draw your slide using the same coordinates as your main canvas

我们没有更多的代码，但如果您一直重新绘制每个幻灯片 - 请不要这样做！

Html画布绘图因画布元素太多而变慢

1 个答案: