画布 - 如何保存用户输入的对象？

Question

我有一个应用程序，用户可以在画布上绘制笔触。我怎样才能保存输入，以便在我清除画布以清除例如已添加的Rects之后重新绘制输入。我使用了一个数组，但它需要很长时间才能重新绘制所有数组条目。

我的代码，实现招类似于此：http://jsfiddle.net/FgNQk/1/

var points[]; 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var width = window.innerWidth; 
var height = window.innerHeight; 
canvas.height = height; 
canvas.width = width; 
canvas.addEventListener('mousedown', function(e) { 
    this.down = true; 
    this.X = e.pageX ; 
    this.Y = e.pageY ; 
    this.color = rgb(); 
}, 0); 
canvas.addEventListener('mouseup', function() { 
    this.down = false;   
}, 0); 
canvas.addEventListener('mousemove', function(e) { 

    if(this.down) { 
     with(ctx) { 
      beginPath(); 
      moveTo(this.X, this.Y); 
      lineTo(e.pageX , e.pageY); 
      strokeStyle = "rgb(0,0,0)"; 
      ctx.lineWidth=1; 
      stroke(); 

      // saving via array 
      if (this.down) { 

      points.push({x:e.pageX,y:e.pageY}); 

    } 
     } 
     this.X = e.pageX ; 
     this.Y = e.pageY ; 
    } 
}, 0); 

Answer 1

你需要建立几个抽象层，以避免在你的代码主要 头痛。

我刚刚建立其保留用户上下文一个小“抽屉”类， 记住的是他素描，色彩，...和当前列表的所有东西绘制 。 然后，你需要一些类存储线，矩形，...数据

鼠标的每次移动，整个场面被重绘，这 将工作速度不够快于大多数设备/浏览器，我认为。

http://jsfiddle.net/ZS34V/1/

var Drawer = function() { 
    this.currentFigureType = 0 ; // 0 : free draw, 1 : line, 
           // 2 : square, ... 
    this.currentFigure = null ; 
    this.figures  = [] ; 
    this.currentColor = 0 ; 
    this.startX  = 0 ; 
    this.startY  = 0 ;  
    this.lastX  = 0 ; 
    this.lastY  = 0 ;  
    this.mouseDown  = false; } 

Drawer.prototype.draw = function(ctx) { 
    var figuresArray = this.figures; 
    for (var i=0, len=figuresArray.length; i < len; i++) { 
     figuresArray[i].draw(ctx); 
    } 
} 

现在在鼠标上/下/举动，我们将检查情况和采取相应的行动：开始鼠标按下一个新的人物，更新它的鼠标移动，并将其存储在鼠标松开。

canvas.addEventListener('mousedown', function(e) { 
     myDrawer.startX = e.pageX ; 
     myDrawer.startY = e.pageY ; 
     myDrawer.mouseDown = true ; 

     switch (myDrawer.currentFigureType) { 
      case 0 : break; 
      case 1 : break ; 
     } 

    }, 0); 

canvas.addEventListener('mouseup', function() { 
     myDrawer.mouseDown = false 
     switch (myDrawer.currentFigureType) { 
      case 0 : break; 
      case 1 : var newLine = new Line(myDrawer.currentColor, 
              myDrawer.startX, 
              myDrawer.startY, 
              myDrawer.lastX, 
              myDrawer.lastY); 
        myDrawer.figures.push(newLine); 
        break ; 
     } 

}, 0); 


canvas.addEventListener('mousemove', function(e) { 

    if(!myDrawer.mouseDown) { return } 

    myDrawer.lastX = e.pageX; 
    myDrawer.lastY=e.pageY; 

    ctx.clearRect(0,0,width, height); 
    myDrawer.draw(ctx); 
    switch (myDrawer.currentFigureType) { 
      case 0 : // draw + store point 
        break; 
      case 1 : 
      with(ctx) { 
       console.log('we here'); 
         beginPath(); 
         moveTo(myDrawer.startX, myDrawer.startY); 
         lineTo(e.pageX , e.pageY); 
         strokeStyle = myDrawer.currentColor; 
         ctx.lineWidth=1; 
         stroke(); 
        } 
        break; 
      } 
    }, 0);