在html5canvas上拖动和调整图像大小
我正在构build一个HTML5canvas图像编辑器。 将图像上传到canvas后，我需要拖动并在canvas上resize。 我设法上传一个图像，并使其在canvas上可拖动。 但是我需要在canvas上resize。 提前致谢。
var Img = new Image(); Img.src = file; Img.onload = function () { context.drawImage(Img, 50, 0, 200, 200); } mouseMove = function (event){ if (down) { context.clearRect(0,0,800,500); context.translate(0, -50); context.drawImage(Img, (event.clientX - offsetX), (event.clientY - offsetY), 200, 200); context.translate(0, 50); } } mouseUp = function () { down = false; } mouseDown = function () { down = true; } canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove',mouseMove, false); 我尝试动力学js，但它不适合与canvas。
下面是示例代码，允许您使用Canvas拖动和调整图像大小。
调整
如何用4个可拖动的锚点调整图像大小
- 在图像的每个angular上绘制一个可拖动的锚点。
- 如果用户选中了一个锚点，则开始拖动该锚点。
- 在mousemove处理程序中，使用拖动锚点的位置调整图像大小（下面的注释）。
- 作为mousemove的最后一个动作，重新resize的图像和4个新的锚点。
- 在mouseup上，停止锚点的拖动。
用于调整图像大小的math注意事项：
- 调整后的宽度是mouseX位置和对angular的X之间的差异。
- 调整后的高度是mouseY位置和对angular的Y之间的差异。
拖延
如何拖动图像
- 如果用户在图像中放置了鼠标，保存开始XY的鼠标开始拖动。
- 在mousemove处理程序中，通过当前mouseXY减去开始的XY来移动图像。
- 同样在mousemove中，将startingXY重置为当前鼠标XY，准备继续拖动。
- 在mouseup上，停止图像的拖动。
这里是代码和小提琴： http : //jsfiddle.net/m1erickson/LAS8L/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; padding:10px;} #canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var canvasOffset=$("#canvas").offset(); var offsetX=canvasOffset.left; var offsetY=canvasOffset.top; var startX; var startY; var isDown=false; var pi2=Math.PI*2; var resizerRadius=8; var rr=resizerRadius*resizerRadius; var draggingResizer={x:0,y:0}; var imageX=50; var imageY=50; var imageWidth,imageHeight,imageRight,imageBottom; var draggingImage=false; var startX; var startY; var img=new Image(); img.onload=function(){ imageWidth=img.width; imageHeight=img.height; imageRight=imageX+imageWidth; imageBottom=imageY+imageHeight draw(true,false); } img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png"; function draw(withAnchors,withBorders){ // clear the canvas ctx.clearRect(0,0,canvas.width,canvas.height); // draw the image ctx.drawImage(img,0,0,img.width,img.height,imageX,imageY,imageWidth,imageHeight); // optionally draw the draggable anchors if(withAnchors){ drawDragAnchor(imageX,imageY); drawDragAnchor(imageRight,imageY); drawDragAnchor(imageRight,imageBottom); drawDragAnchor(imageX,imageBottom); } // optionally draw the 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 the 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; } // enforce minimum dimensions of 25x25 if(imageWidth<25){imageWidth=25;} if(imageHeight<25){imageHeight=25;} // set the image right and bottom imageRight=imageX+imageWidth; imageBottom=imageY+imageHeight; // redraw the image with resizing anchors draw(true,true); }else if(draggingImage){ imageClick=false; mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // move the image by the amount of the latest drag var dx=mouseX-startX; var dy=mouseY-startY; imageX+=dx; imageY+=dy; imageRight+=dx; imageBottom+=dy; // reset the startXY for next time startX=mouseX; startY=mouseY; // redraw the image with border 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);}); }); // end $(function(){}); </script> </head> <body> <p>Resize the image using the 4 draggable corner anchors</p> <p>You can also drag the image</p> <canvas id="canvas" width=350 height=350></canvas> </body> </html>
也：
西蒙·萨里斯已经做了一个很好的教程，如何在HTMLcanvas上拖动和调整“元素”。
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape
