Image re sizing not working after rotation in Html5 canvas
- by Deepu the Don
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>
