在鼠标绘图上重新绘制画布并调整其大小

debugcn 发表于 Dev

用户1058043

我需要在鼠标绘图上调整画布大小并重新绘制画布。
我做了演示，但这是行不通的，当我调整画布大小时，所有的数据都是干净的

我尝试了不同的选择，例如：

临时帆布
toDataURL

但是没有成功

游戏炼金术士

您的小提琴正在工作，我唯一想念的是调整画布的大小确实可以清除它，因此实际上，在您提供的小提琴中，您的鼠标的任何移动都可以清除它。

编辑：好的，我想我了解您的问题。

1）在调整大小时，您松开了内容。
2）调整大小后，您会松开当前路径，因此必须重新启动路径图。
3）如果您在每次鼠标移动时创建一个画布，则内存消耗将达到高峰，并且您的应用程序将不会响应。
4）由于重绘发生在鼠标移动而不是requestAnimationFrame上，因此，如果您只是在鼠标移动进行完整的重绘，则整个过程看起来会很麻烦。

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

在这里尝试：http : //jsfiddle.net/gamealchemist/JHr2P/78/

我处理的临时画布在不够大时会使其尺寸加倍（因此它的更改频率要少得多。请使用小于2倍的倍数，或者在认为合适的情况下使用其他缓存策略）。因此，内存使用不会太大。
抚摸线条后，我将图像保存到临时画布。
（仅将鼠标移到该图像上可以将图像存储到localContent，以减少开销）。
然后我调整大小+从临时画布重绘。
然后我重新开始画线。
以上所有操作都是在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.


}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。