Canvas - Как сохранить ввод пользователя в объект?

Question

У меня есть приложение, в котором пользователи могут рисовать штрихи на холсте. Как сохранить вход, чтобы он был перекрашен после того, как я очистил холст, чтобы удалить, например, исправления, которые были добавлены. Я использовал массив, но на самом деле требуется много времени, чтобы перерисовать все записи массива.

моего код, чтобы понять, мазки выглядеть примерно так: 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

Вам нужно построить несколько слоев абстракции, чтобы избежать серьезной головной боли в вашем коде.

Я только что построил небольшой класс «Drawer», который поддерживает контекст пользователя, , чтобы помнить, что он рисует, цвет и ... текущий список всех нарисованных вещей. Затем вам нужны некоторые классы для хранения строк, прямых, ... данных

На каждом шагу мыши вся сцена получает перерисованную, которая будет работать достаточно быстро на большинстве устройств/браузеров, о которых я думаю.

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

А теперь на мыши вверх/вниз/перемещения, мы будем проверять контекст и действовать соответствующим образом: начать новую фигуру на MouseDown, обновить его на MouseMove, и хранить его на MouseUp.

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