javascript - Canvas - 如何将用户输入保存在对象中？

Question

我有一个应用程序，用户可以在其中在 Canvas 上绘制笔画。如何保存输入，以便在我清除 Canvas 以删除例如已添加的矩形后重新绘制它。我使用了一个数组，但一段时间后重新绘制所有数组条目确实需要很长时间。

我实现笔画的代码类似于: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);
    }
 }

现在在鼠标上/下/移动时，我们将检查上下文并采取相应行动:在 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);