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

您需要构建多个抽象层以避免重要代码中的头痛。

我刚建了一个小的'Drawer'类来保持用户上下文，记住他的绘画，颜色，......和当前列表所有绘制的东西。然后你需要一些类来存储line，rect，... data

在鼠标的每次移动中，整个场景都会被重绘我认为在大多数设备/浏览器上都能运行得足够快。

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

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

1 个答案: