Question

我需要在鼠标绘图时调整大小和重绘画布我做了demo，但是这不起作用，所有当我调整画布大小时它都是干净的所有数据

我尝试了不同的选项，如：

临时画布
toDataURL

但没有成功

Answer 1

你的小提琴正在工作，我唯一想到的是调整画布的尺寸确实可以清除它，所以在提供的小提琴中，你实际上在鼠标的每一个动作中都清楚它。

编辑：好的，我想我理解你的问题。

1）在调整大小时，您将丢失内容 2）在调整松开当前路径的大小时，必须重新启动路径绘图 3）如果你在每次鼠标移动时创建一个画布，内存消耗将达到山脉，你的应用程序将不会被动反应 4）因为重新绘制发生在鼠标移动而不是requestAnimationFrame上，如果你只是在鼠标移动时进行完全重绘，整个事情看起来会很糟糕。

所以我更新了这个小提琴，以便解决所有这些问题：

在此处尝试：http://jsfiddle.net/gamealchemist/JHr2P/78/

我处理一个临时画布，当它不够大时会将它的大小加倍（所以它的大小变化要小得多。使用小于2倍的因子，或者如果你认为合适，可以采用另一种缓存策略）。所以内存使用不会那么大。
我在抚摸线条后将图像保存到临时画布。
（图像仅在鼠标上存储到localContent以减少开销）。
然后我从temp画布调整大小+重绘。
然后我重新开始画线。
以上所有内容都是在requestAnimationFrame中完成的，以避免出现闪烁的闪烁现象。

存储/恢复代码：

var _storeCanvas =  document.createElement('canvas');
var _storeCtx = _storeCanvas.getContext('2d');

function storeInTempCanvas() {
   if (_storeCanvas == null || _storeCanvas.width < canvas.width || _storeCanvas.height )    {   
    _storeCanvas.width = 2 * canvas.width; 
    _storeCanvas.height = 2 * canvas.height;
   }
   _storeCtx.drawImage(canvas, 0, 0);
}

function restorefromTempCanvas() {
    ctx.drawImage(_storeCanvas, 0, 0);
}

更新了鼠标移动代码：

var draw = {
      // ... same mousedwon code...

    mousemove: function(coordinates) {
        if (this.isDrawing) {
            requestAnimationFrame ( function() {
                        ctx.lineTo(coordinates.x, coordinates.y);
                        ctx.stroke();            
                        storeInTempCanvas();
                        canvas.width+=1;
                        restorefromTempCanvas();
                        ctx.beginPath();
                        ctx.moveTo(coordinates.x, coordinates.y);
            } );
       }
    },

 //... same mouseup code.


}

在鼠标绘图上重绘和调整画布大小

1 个答案: