canvas绘图history妙用

Posted 2021-02-04 zeussbook

function palette(canvas,ctx){   //初始化画布内部元素默认样式
    this.strokeColor = ‘red‘;  //默认选中红色触发颜色
    this.fillColor = ‘green‘;  //默认选中绿色填充色
    this.style = ‘tablet‘; //默认选中直线形状
    this.type = ‘stroke‘;  //默认的绘制方式是划
    this.ctx = ctx;    //默认为绘图环境
    this.canvas = canvas;     //默认画布
    this.canvasW = canvas.width;   //默认画布宽
    this.canvasH = canvas.height;     //默认画布高
    this.history = []; //默认的历史记录为数组,
    this.edges = ‘3‘;  //默认的边数为3
}

在切换绘图状态是都要对history 进行操作，不然将是两个不同画布的状态。

//  书写绘画函数
    palette.prototype.drawing = function(){
        //移动
        if(move){
            var that = this;
            this.canvas.onmousedown = function(e) {    //鼠标移动画布的函数
                moving=true;
                var point =  getLocation(e.clientX,e.clientY);
                //var s = getnear(point.x, point.y);
                //console.log("+++++++++++"+s);
                $.each(draws, function(n, v) {
                    restdraw(draws[n]);
                    if(ctx.isPointInPath(point.x, point.y)){
                        console.log("======================"+n);
                       // if(s==n){
                            moveItem = n;
                            console.log(n);
                            ctx.strokeStyle = "green";
                        //}
                    } else {
                        ctx.strokeStyle = "red";
                    }
                    ctx.stroke();
                })
            }
            //获取鼠标移动时的坐标
            canvas.onmousemove = function(e){
                if( moving==false && moveItem < 0 ) {
                    return;
                }
                p.ctx.clearRect(0, 0, p.canvasW, p.canvasH);
                var point = getLocation(e.clientX,e.clientY);
                $.each(draws, function(n, v) {
                    if(n !== moveItem ){
                        ctx.strokeStyle = "red";
                    } else {
                        ctx.strokeStyle = "green";
                        draws[n].l1=point.x-draws[n].l3/2;
                        draws[n].l2=point.y-draws[n].l4/2;
                    }
                    restdraw(draws[n]);
                    ctx.stroke();
                })
            }
            canvas.onmouseup = function(e){
                moving = false;
                moveItem =-1;
                ctx.save();
                that.history.push(that.ctx.getImageData(0,0,that.canvasW,that.canvasH));
            }
        }else{ //绘图
            var that = this;
//    console.log(this);
            this.canvas.onmousedown = function(e){ //鼠标移动画布的函数
//       * 获取鼠标起始位置
                var sx = e.offsetX;
//       获取鼠标到时间源的宽度
//       console.log(sx);
                var sy = e.offsetY;
//       获取鼠标到时间源的高度
//       console.log(sy);
                that.init();   //初始化样式
                if(that.style=="tablet"){
                    that.ctx.beginPath();
//            beginPath() 方法开始一条路径，或重置当前的路径
                    that.ctx.moveTo(sx,sy);
//            moveTo() 方法可把窗口的左上角移动到一个指定的坐标。
                }
//       获取鼠标移动时的坐标
                canvas.onmousemove = function(e){
                    var mx = e.offsetX;
//          console.log(mx);
                    var my = e.offsetY;
//          console.log(my);
                    if (that.style!= "eraser") {
                        that.ctx.clearRect(0, 0, that.canvasW, that.canvasH);
//                  console.log(that.canvasW + ‘,‘ + that.canvasH);
//             清除鼠标在画布移动的填充色
                        if(that.history.length>0){ //注：只能是that.history数组的长度大于0，才可以putImageData()
                            that.ctx.putImageData(that.history[that.history.length-1],0,0);
//                 putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。
                        }
                    }
//          console.log(that.history.length);
                    that[that.style](sx,sy,mx,my);
                }
//       获取鼠标移走的坐标
                canvas.onmouseup = function(){
                    that.history.push(that.ctx.getImageData(0,0,that.canvasW,that.canvasH));
//          getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
                    this.onmousemove=null;
                    // 清空鼠标移动事件
                    this.onmouseup=null;
                    // 清空鼠标移出事件
                }
            }
        }

    }