在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