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: 274
Filed under:
JavaScript
|html5-canvas
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
