畫布 - 如何保存用戶輸入的對象？

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);