javascript - Rotate Existing Image on Canvas -
i'm attempting rotate image has been drawn on html canvas, so:
var canvas = document.getelementbyid("editorcanvas"); var ctx = canvas.getcontext("2d"); var canvasoffset = $("#editorcanvas").offset(); var offsetx = canvasoffset.left; var offsety = canvasoffset.top; var startx; var starty; var isdown = false; var pi2 = math.pi * 2; var resizerradius = 4; var rr = resizerradius * resizerradius; var draggingresizer = { x: 0, y: 0 }; var imagex = 0; var imagey; var imagewidth, imageheight, imageright, imagebottom; var draggingimage = false; var startx; var starty; var img = new image(); img.crossorigin='anonymous'; img.onload = function () { var ratio = img.width / img.height; imagewidth = 71; imageheight = imagewidth / ratio; imagey = (245-imageheight)/2; if (imageheight > 245) { imageheight = 245; imagewidth = imageheight * ratio; imagey = 0; } imagex = ((canvas.width-imagewidth)/2); imagey = ((canvas.height-imageheight)/2); imageright = imagex + imagewidth; imagebottom = imagey + imageheight; draw(true, false); } function draw(withanchors, withborders) { // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw image ctx.drawimage(img, 0, 0, img.width, img.height, imagex, imagey, imagewidth, imageheight); // optionally draw draggable anchors if (withanchors) { drawdraganchor(imagex, imagey); drawdraganchor(imageright, imagey); drawdraganchor(imageright, imagebottom); drawdraganchor(imagex, imagebottom); } // optionally draw connecting anchor lines if (withborders) { ctx.beginpath(); ctx.moveto(imagex, imagey); ctx.lineto(imageright, imagey); ctx.lineto(imageright, imagebottom); ctx.lineto(imagex, imagebottom); ctx.closepath(); ctx.stroke(); } } function drawdraganchor(x, y) { ctx.beginpath(); ctx.arc(x, y, resizerradius, 0, pi2, false); ctx.closepath(); ctx.fill(); } function anchorhittest(x, y) { var dx, dy; // top-left 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); } function handlemouseup(e) { draggingresizer = -1; draggingimage = false; draw(true, false); } function handlemouseout(e) { handlemouseup(e); } function handlemousemove(e) { if (draggingresizer > -1) { mousex = parseint(e.clientx - offsetx); mousey = parseint(e.clienty - offsety); // resize image 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;} // set image right , bottom imageright = imagex + imagewidth; imagebottom = imagey + imageheight; // redraw image resizing anchors draw(true, true); } else if (draggingimage) { imageclick = false; mousex = parseint(e.clientx - offsetx); mousey = parseint(e.clienty - offsety); // move image amount of latest drag var dx = mousex - startx; var dy = mousey - starty; imagex += dx; imagey += dy; imageright += dx; imagebottom += dy; // reset startxy next time startx = mousex; starty = mousey; // redraw image border draw(false, true); } } $("#editorcanvas").mousedown(function (e) { handlemousedown(e); }); $("#editorcanvas").mousemove(function (e) { handlemousemove(e); }); $("#editorcanvas").mouseup(function (e) { handlemouseup(e); }); $("#editorcanvas").mouseout(function (e) { handlemouseout(e); }); i hoping simple:
function rotateimage() { var rotatecanvas = document.getelementbyid('editorcanvas'); var rotatecontext = canvas.getcontext('2d'); rotatecontext.rotate(90 * math.pi / 180); } but think way through redrawing image?
is there way of rotating image on canvas without redrawing it, if not how go rotating image on canvas?
you can use second in-memory canvas rotate existing canvas content if don't want store commands necessary recreate canvas.
- create second in-memory canvas.
- copy main canvas onto second canvas.
- clear main canvas.
- set rotation point center of main canvas.
- (but can set rotation point desire)
- rotate 90 degrees (==pi/2).
- redraw second canvas (now rotated) main canvas.
- clean -- unrotate , untranslate main canvas.
example code , demo:
var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); var cw=canvas.width; var ch=canvas.height; var img=new image(); img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/multple/leftarrow.png"; function start(){ ctx.drawimage(img,cw/2-img.width/2,ch/2-img.width/2); $('#rotate').click(function(){ rotate(cw/2,ch/2,90); }); } function rotate(rotationpointx,rotationpointy,degreerotation){ // create second in-memory canvas: var mcanvas=document.createelement('canvas'); mcanvas.width=canvas.width; mcanvas.height=canvas.height; var mctx=mcanvas.getcontext('2d'); // draw canvas onto second canvas mctx.drawimage(canvas,0,0); // clear main canvas ctx.clearrect(0,0,canvas.width,canvas.height); // rotate main canvas // set rotation point center of canvas // (but can set rotation point desire) ctx.translate(rotationpointx,rotationpointy); // rotate 90 degrees (==pi/2) var radians=degreerotation/180*math.pi; ctx.rotate(radians); // draw second canvas (now rotated) main canvas: ctx.drawimage(mcanvas,-canvas.width/2,-canvas.height/2); // clean -- unrotate , untranslate ctx.rotate(-radians); ctx.translate(-canvas.width/2,-canvas.height/2); }body{ background-color: ivory; } #canvas{border:1px solid red;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button id=rotate>rotate existing image.</button> <br> <canvas id="canvas" width=300 height=300></canvas>[ add rotate() questioners code ]
var canvas = document.getelementbyid("editorcanvas"); var ctx = canvas.getcontext("2d"); var canvasoffset = $("#editorcanvas").offset(); var offsetx = canvasoffset.left; var offsety = canvasoffset.top; var startx; var starty; var isdown = false; var pi2 = math.pi * 2; var resizerradius = 4; var rr = resizerradius * resizerradius; var draggingresizer = { x: 0, y: 0 }; var imagex = 0; var imagey; var imagewidth, imageheight, imageright, imagebottom; var draggingimage = false; var startx; var starty; var img = new image(); img.crossorigin='anonymous'; img.onload = function () { var ratio = img.width / img.height; imagewidth = 71; imageheight = imagewidth / ratio; imagey = (245-imageheight)/2; if (imageheight > 245) { imageheight = 245; imagewidth = imageheight * ratio; imagey = 0; } imagex = ((canvas.width-imagewidth)/2); imagey = ((canvas.height-imageheight)/2); imageright = imagex + imagewidth; imagebottom = imagey + imageheight; draw(true, false); } img.src='https://dl.dropboxusercontent.com/u/139992952/multple/leftarrow.png'; function draw(withanchors, withborders) { // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw image ctx.drawimage(img, 0, 0, img.width, img.height, imagex, imagey, imagewidth, imageheight); // optionally draw draggable anchors if (withanchors) { drawdraganchor(imagex, imagey); drawdraganchor(imageright, imagey); drawdraganchor(imageright, imagebottom); drawdraganchor(imagex, imagebottom); } // optionally draw connecting anchor lines if (withborders) { ctx.beginpath(); ctx.moveto(imagex, imagey); ctx.lineto(imageright, imagey); ctx.lineto(imageright, imagebottom); ctx.lineto(imagex, imagebottom); ctx.closepath(); ctx.stroke(); } } function drawdraganchor(x, y) { ctx.beginpath(); ctx.arc(x, y, resizerradius, 0, pi2, false); ctx.closepath(); ctx.fill(); } function anchorhittest(x, y) { var dx, dy; // top-left 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); } function handlemouseup(e) { draggingresizer = -1; draggingimage = false; draw(true, false); } function handlemouseout(e) { handlemouseup(e); } function handlemousemove(e) { if (draggingresizer > -1) { mousex = parseint(e.clientx - offsetx); mousey = parseint(e.clienty - offsety); // resize image 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;} // set image right , bottom imageright = imagex + imagewidth; imagebottom = imagey + imageheight; // redraw image resizing anchors draw(true, true); } else if (draggingimage) { imageclick = false; mousex = parseint(e.clientx - offsetx); mousey = parseint(e.clienty - offsety); // move image amount of latest drag var dx = mousex - startx; var dy = mousey - starty; imagex += dx; imagey += dy; imageright += dx; imagebottom += dy; // reset startxy next time startx = mousex; starty = mousey; // redraw image border draw(false, true); } } $("#editorcanvas").mousedown(function (e) { handlemousedown(e); }); $("#editorcanvas").mousemove(function (e) { handlemousemove(e); }); $("#editorcanvas").mouseup(function (e) { handlemouseup(e); }); $("#editorcanvas").mouseout(function (e) { handlemouseout(e); }); function rotate(rotationpointx,rotationpointy,degreerotation){ // create second in-memory canvas: var mcanvas=document.createelement('canvas'); mcanvas.width=canvas.width; mcanvas.height=canvas.height; var mctx=mcanvas.getcontext('2d'); // draw canvas onto second canvas mctx.drawimage(canvas,0,0); // clear main canvas ctx.clearrect(0,0,canvas.width,canvas.height); // rotate main canvas // set rotation point center of canvas // (but can set rotation point desire) ctx.translate(rotationpointx,rotationpointy); // rotate 90 degrees (==pi/2) var radians=degreerotation/180*math.pi; ctx.rotate(radians); // draw second canvas (now rotated) main canvas: ctx.drawimage(mcanvas,-canvas.width/2,-canvas.height/2); // clean -- unrotate , untranslate ctx.rotate(-radians); ctx.translate(-canvas.width/2,-canvas.height/2); } $('#rotate').click(function(){ rotate(canvas.width/2,canvas.height/2,90); });body{ background-color: ivory; } canvas{border:1px solid red;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button id=rotate>rotate</button> <br> <canvas id="editorcanvas" width=300 height=300></canvas>
Comments
Post a Comment