Image re sizing not working after rotation in Html5 canvas

Posted by Deepu the Don on Stack Overflow See other posts from Stack Overflow or by Deepu the Don
Published on 2013-11-01T15:02:57Z Indexed on 2013/11/01 15:54 UTC
Read the original article Hit count: 280

Filed under:
|

In my HTML 5 + Javascript application, we can drag, re size and rotate image in Html 5 canvas. But after doing rotation, re sizing is not working. (I think it i related to finding dx,dy,not sure). Please help me to fix the code given below. Thanks in advance.

<!doctype html>
<html>
<head>
<style>
#canvas{
  border:red dashed #ccc;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){

    var canvas=document.getElementById("canvas"),ctx=canvas.getContext("2d"),canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left,offsetY=canvasOffset.top,startX,startY,isDown=false,pi2=Math.PI*2;
    var resizerRadius=8,rr=resizerRadius*resizerRadius,draggingResizer={x:0,y:0},imageX=50,imageY=50;
    var imageWidth,imageHeight,imageRight,imageBottom,draggingImage=false,startX,startY,doRotation=false;

    var r=0,rotImg = new Image();
    rotImg.src="rotation.jpg";
    var img=new Image();
    img.onload=function(){
        imageWidth=img.width;
        imageHeight=img.height;
        imageRight=imageX+imageWidth;
        imageBottom=imageY+imageHeight;
        w=img.width/2;
        h=img.height/2;
        draw(true,false);
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";

    function draw(withAnchors,withBorders){
        ctx.fillStyle="black";
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.save();
        ctx.translate(imageX,imageY);
        ctx.translate(imageWidth/2,imageHeight/2);
        ctx.rotate(r);
        ctx.translate(-imageX,-imageY);
        ctx.translate(-imageWidth/2,-imageHeight/2);
        ctx.drawImage(img,0,0,img.width,img.height,imageX,imageY,imageWidth,imageHeight);
        ctx.restore();

        if(withAnchors){
            drawDragAnchor(imageX,imageY);
            drawDragAnchor(imageRight,imageY);
            drawDragAnchor(imageRight,imageBottom);
            drawDragAnchor(imageX,imageBottom);
        }
        if(withBorders){
            ctx.save();
            ctx.translate(imageX,imageY);
            ctx.translate(imageWidth/2,imageHeight/2);
            ctx.rotate(r);
            ctx.translate(-imageX,-imageY);
            ctx.translate(-imageWidth/2,-imageHeight/2);
            ctx.beginPath();
            ctx.moveTo(imageX,imageY);
            ctx.lineTo(imageRight,imageY);
            ctx.lineTo(imageRight,imageBottom);
            ctx.lineTo(imageX,imageBottom);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
        }       
        ctx.fillStyle="blue";
        ctx.save();
        ctx.translate(imageX,imageY);
        ctx.translate(imageWidth/2,imageHeight/2);
        ctx.rotate(r);
        ctx.translate(-imageX,-imageY);
        ctx.translate(-imageWidth/2,-imageHeight/2);
        ctx.beginPath();
        ctx.moveTo(imageRight+15,imageY-10);
        ctx.lineTo(imageRight+45,imageY-10);
        ctx.lineTo(imageRight+45,imageY+20);
        ctx.lineTo(imageRight+15,imageY+20);
        ctx.fill();
        ctx.closePath();        
        ctx.restore();
    }

    function drawDragAnchor(x,y){
        ctx.save();
        ctx.translate(imageX,imageY);
        ctx.translate(imageWidth/2,imageHeight/2);
        ctx.rotate(r);
        ctx.translate(-imageX,-imageY);
        ctx.translate(-imageWidth/2,-imageHeight/2);
        ctx.beginPath();
        ctx.arc(x,y,resizerRadius,0,pi2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    function anchorHitTest(x,y){
        var dx,dy;
        dx=x-imageX;
        dy=y-imageY;
        if(dx*dx+dy*dy<=rr){ return(0); }
        // top-right
        dx=x-imageRight;
        dy=y-imageY;
        if(dx*dx+dy*dy<=rr){ return(1); }
        // bottom-right
        dx=x-imageRight;
        dy=y-imageBottom;
        if(dx*dx+dy*dy<=rr){ return(2); }
        // bottom-left
        dx=x-imageX;
        dy=y-imageBottom;
        if(dx*dx+dy*dy<=rr){ return(3); }
        return(-1);
    }

    function hitImage(x,y){
        return(x>imageX && x<imageX+imageWidth && y>imageY && y<imageY+imageHeight);
    }

    function handleMouseDown(e){
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);
      draggingResizer= anchorHitTest(startX,startY);
      draggingImage= draggingResizer<0 && hitImage(startX,startY);
      doRotation = draggingResizer<0 && !draggingImage && ctx.isPointInPath(startX,startY);
    }

    function handleMouseUp(e){
      draggingResizer=-1;
      draggingImage=false;
      doRotation=false;
      draw(true,false);
    }

    function handleMouseOut(e){
      handleMouseUp(e);
    }

    function handleMouseMove(e){
          mouseX=parseInt(e.clientX-offsetX);
          mouseY=parseInt(e.clientY-offsetY);

      if(draggingResizer>-1){
          switch(draggingResizer){
              case 0: //top-left
                  imageX=mouseX;
                  imageWidth=imageRight-mouseX;
                  imageY=mouseY;
                  imageHeight=imageBottom-mouseY;
                  break;
              case 1: //top-right
                  imageY=mouseY;
                  imageWidth=mouseX-imageX;
                  imageHeight=imageBottom-mouseY;
                  break;
              case 2: //bottom-right
                  imageWidth=mouseX-imageX;
                  imageHeight=mouseY-imageY;
                  break;
              case 3: //bottom-left
                  imageX=mouseX;
                  imageWidth=imageRight-mouseX;
                  imageHeight=mouseY-imageY;
                  break;
          }
          if(imageWidth<25)
            imageWidth=25;
          if(imageHeight<25)
            imageHeight=25;
          imageRight=imageX+imageWidth;
          imageBottom=imageY+imageHeight;

          draw(true,true);
      }else if(draggingImage){
          imageClick=false;
          var dx=mouseX-startX;
          var dy=mouseY-startY;
          imageX+=dx;
          imageY+=dy;
          imageRight+=dx;
          imageBottom+=dy;
          startX=mouseX;
          startY=mouseY;
          draw(false,true);
      }else if(doRotation){
          var dx=mouseX-imageX;
          var dy=mouseY-imageY;
          r=Math.atan2(dy,dx);
          draw(false,true);
      }

    }
    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});
}); 
</script>
</head>
<body>
    <canvas id="canvas" width=800 height=500></canvas>
</body>
</html>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html5-canvas