canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

引言

在上一篇日志“canvas 图片拖拽旋转之一”中，对坐标转换有了比较深入的了解，但是仅仅利用坐标转换实现的拖拽旋转，会改变canvas坐标系的状态，从而影响画布上其他元素的绘制。因此，这个时候需要用到一对canvas方法，在变换坐标系前保存canvas状态，在变换并绘制完成之后，恢复canvas状态，即save()和restore()。

[备注]

这篇文章只是记录分享下解决问题的过程，找我要demo的，或者问我什么东西怎么做的，就不要加我了。你可以加一个canvas相关的交流群，或者如果需要用到KineticJS/FabricJS的话，可以加群251572039。

一、理解save和restore的操作对象

对于save和restore方法，有一个误解就是，认为每一步都save之后restore就等同于ctrl+z。其实save保存的只是CanvasRenderingContext2D 对象的状态以及对象的所有属性，并不包括这个对象上绘制的图形。引用一段w3school上的解释：

save() 和 restore() 方法允许你保存和恢复一个 CanvasRenderingContext2D 对象的状态。save() 把当前状态推入到栈中，而 restore() 从栈的顶端弹出最近保存的状态，并且根据这些存储的值来设置当前绘图状态。

CanvasRenderingContext2D 对象的所有属性（除了画布的属性是一个常量）都是保存的状态的一部分。变换矩阵和剪切区域也是这个状态的一部分，但是当前路径和当前点并不是。

也就是说，save()可以保存canvas的状态(比如坐标系的状态)以及fillStyle、strokeStyle、lineWidth 等等属性。

基于这一点，我们就可以在变换坐标系之前save()，变换并绘制完成后restor()，这样就可以保证图形发生了旋转偏移而canvas坐标系仍然是屏幕坐标系的状态（类似于拿了一把标尺画完图之后又把标尺放回了原位）。关键代码如下：

ctx.save();

ctx.translate(PO.x,PO.y);//坐标原点移动到图片中心点

ctx.rotate(now_rotate_radian);//旋转画布 在屏幕坐标系基础上旋转 now_rotate_radian

ctx.drawImage(img,-imgW/2,-imgH/2);

drawRotateCtrl();

ctx.restore();//还原画布坐标系

二、实现思路

因为涉及到旋转，所以不管是进行拖拽还是旋转，每次绘制都是先将canvas坐标系原点translate到图片中心点，然后rotate旋转的角度。

根据坐标变换原则，在旋转时计算角度变化（鼠标相对于图片中心点与屏幕坐标系y轴负方向的夹角），拖拽时记录图片中心点偏移。

三、代码实现

　　demo链接：http://youryida.duapp.com/demo_canvas/img_move_rotate.html

<!doctype html>

<html>

<head>

    <title> </title>

    <meta http-equiv="X-UA-Compatible" content="IE=9">

    <meta charset="utf-8" />

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <style>

        #canvas{border:1px solid #ccc;}

    </style>

</head>

<body>

    <canvas id="canvas" width="500" height="300"></canvas>

    <br/>

    <pre>

    一、因为涉及到旋转，所以不管是进行拖拽还是旋转，每次绘制都是先将canvas坐标系原点移到图片中心点。旋转时记录角度变化，拖拽时记录图片中心点偏移。

    二、为了不影响坐标系变换后其他图形的绘制，使用ctx.save()保存旋转前的坐标系，绘制完成后ctx.restore()恢复。

    QQ：1140215489

    </pre>

    <script>

    var cvs =document.getElementById("canvas");

    var ctx =cvs.getContext("2d");

    var cvsH=cvs.height;

    var cvsW=cvs.width;

    var beginX,beginY;

    var LT={x:30,y:30};//图片初始载入左上角坐标

    var PO;

    var Selected_Round_R=12;

    var now_rotate_radian=0;//记录图片的旋转角度 初始为0

    var isDown=false;

    var moveAble=false,rotateAble=false;

    var imgH,imgW;

    var img = new Image();

    img.src ="img/niuniu.jpg";

    img.onload=function (){

        imgH=img.height;

        imgW=img.width;

        PO={x:LT.x+imgW/2,y:LT.y+imgH/2};

        onDraw();

    }

    function imgIsDown(x,y){

        var P={x:x,y:y};

        var A={x:PO.x-imgW/2,y:PO.y-imgH/2};

        var B={x:PO.x+imgW/2,y:PO.y-imgH/2};

        var C={x:PO.x+imgW/2,y:PO.y+imgH/2};

        var D={x:PO.x-imgW/2,y:PO.y+imgH/2};

        A=getRotatedPoint(A,PO,now_rotate_radian);

        B=getRotatedPoint(B,PO,now_rotate_radian);

        C=getRotatedPoint(C,PO,now_rotate_radian);

        D=getRotatedPoint(D,PO,now_rotate_radian);

        var APB=getRadian(A,P,B);

        var BPC=getRadian(B,P,C);

        var CPD=getRadian(C,P,D);

        var DPA=getRadian(D,P,A);

        var sum=(APB+BPC+CPD+DPA).toFixed(5);//某点与矩形四顶点夹角之和=360那么判断点在矩形内

        return (sum==(2*Math.PI).toFixed(5));

    }

    function RTIsDown(x,y){

        var RT={x:PO.x,y:PO.y-imgH/2-Selected_Round_R};

        var rotate_top=getRotatedPoint(RT,PO,now_rotate_radian);

        var bool=(x-rotate_top.x)*(x-rotate_top.x)+(y-rotate_top.y)*(y-rotate_top.y)<=Selected_Round_R*Selected_Round_R;

        return bool;

    }

    function onDraw(){

        ctx.clearRect(0,0,cvsW,cvsH);

        ctx.save();

        ctx.translate(PO.x,PO.y);//坐标原点移动到图片中心点

        ctx.rotate(now_rotate_radian);//旋转画布 在屏幕坐标系基础上旋转 now_rotate_radian

        ctx.drawImage(img,-imgW/2,-imgH/2);

        drawRotateCtrl();

        ctx.restore();//还原画布坐标系

    }

    function drawRotateCtrl(){

        var rotate_top={x:0,y:-imgH/2-Selected_Round_R};

        ctx.beginPath();

        ctx.arc(rotate_top.x,rotate_top.y,Selected_Round_R,0,Math.PI*2,false);

        ctx.closePath();

        ctx.lineWidth=2;

        ctx.strokeStyle="#0000ff";

        ctx.stroke();

    }

    cvs.addEventListener("mousedown", startMove, false);

    cvs.addEventListener("mousemove", moving, false);

    cvs.addEventListener("mouseup", endMove, false);

    cvs.addEventListener("mouseout",endMove, false);

    function startMove(){

        preventDefault();

        isDown=true;

        var loc=getEvtLoc();

        var x=loc.x,y=loc.y;

        beginX=x,beginY=y;

        moveAble=imgIsDown(x,y);

        rotateAble=RTIsDown(x,y);

        if (moveAble) cvs.style.cursor="move";

        if (rotateAble) cvs.style.cursor="crosshair";

    }

    function moving(){

        preventDefault();

        if(isDown==false) return;

        var loc=getEvtLoc();

        var x=loc.x,y=loc.y;

        if(moveAble){

            var dx=x-beginX,dy=y-beginY;

            PO.x=PO.x+dx;

            PO.y=PO.y+dy;

            onDraw();

        }

        if(rotateAble){

            var A={x:beginX-PO.x,y:beginY-PO.y};//转换为以PO为原点的屏幕坐标系 计算鼠标move前后两点与y轴反方向的角度

            var B={x:x-PO.x,y:y-PO.y};

            var a=Math.atan2(A.x,-A.y);

            var b=Math.atan2(B.x,-B.y);

            var θ=b-a;

            now_rotate_radian+=θ;

            onDraw();

        }

        beginX=x,beginY=y;

    }

    function endMove(){

        isDown=false;

        moveAble=rotateAble=false;

        cvs.style.cursor="auto";

    }

    function getEvtLoc(){

        return {x:event.offsetX,y:event.offsetY}

    }

//取消浏览器默认事件

function preventDefault(){

    if(event.preventDefault){

        event.preventDefault();

    }else{

        event.returnValue = false;//注意加window

    }

}

//获取三点角度

function getRadian(A,O,B) {

    var Xo=O.x,Yo=O.y;

    var Xa=A.x,Ya=A.y;

    var Xb=B.x,Yb=B.y;

    var oa = Math.sqrt((Xo - Xa) * (Xo - Xa) + (Yo - Ya)* (Yo - Ya));

    var ob = Math.sqrt((Xo - Xb) * (Xo - Xb) + (Yo - Yb)* (Yo - Yb));

    var ab = Math.sqrt((Xa - Xb) * (Xa - Xb) + (Ya - Yb)* (Ya - Yb));

    var aob = Math.acos((oa * oa + ob * ob - ab * ab) / (2 * oa * ob)); // 弧度

    return aob;//

}

//获取绕点旋转角度后的新点坐标

function getRotatedPoint(A,O,α){

    var dx =A.x-O.x;

    var dy =A.y-O.y;

    var x=Math.cos(α)*dx-Math.sin(α)*dy+O.x;

    var y=Math.cos(α)*dy+Math.sin(α)*dx+O.y;

    return {x:x,y:y};

}    

    </script>

</body>

</html>

巴特西

canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

最新文章

热门文章