2

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

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

1 回答 1

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);
于 2013-05-12T12:42:29.657 回答