javascript 在 html5 画布上拖动和调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19100009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-27 14:20:34 来源:igfitidea点击:
dragging and resizing an image on html5 canvas
提问by Deepu S A
I am building a HTML5 canvas image editor. After uploading an image in to the canvas i need to Dragg and resize it over the canvas. I managed to upload an image and make it draggable on the canvas. But i need to make it resizable also along the canvas. Thanks in advance.
我正在构建一个 HTML5 画布图像编辑器。将图像上传到画布后，我需要在画布上拖动并调整其大小。我设法上传了一张图片并使其可在画布上拖动。但我还需要让它沿着画布调整大小。提前致谢。
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);
I tried with kinetics js but it is not suitable with canvas.
我尝试过 kinetics js，但它不适合画布。
回答by markE
Here's example code to allow you to drag and resize an image using Canvas.
这是允许您使用 Canvas 拖动和调整图像大小的示例代码。
Resizing
调整大小
How to resize an image with 4 draggable anchors
如何使用 4 个可拖动锚点调整图像大小
- Draw a draggable anchor on each corner of an image.
- If the user mousedown's one if the anchors, start dragging that anchor.
- In the mousemove handler, resize the image using the dragging anchor's position(Note below).
- As the last act in mousemove, redraw the resized image and 4 new anchors.
- On mouseup, stop the anchor's drag.
- 在图像的每个角上绘制一个可拖动的锚点。
- 如果用户鼠标按下的是锚点，则开始拖动该锚点。
- 在 mousemove 处理程序中，使用拖动锚点的位置来调整图像大小（下面的注释）。
- 作为 mousemove 的最后一步，重新绘制调整大小的图像和 4 个新锚点。
- 在鼠标悬停时，停止锚点的拖动。
Note on the math used to resize the image:
注意用于调整图像大小的数学：
- The resized width is the difference between the mouseX position and the opposite corner's X.
- The resized height is the difference between the mouseY position and the opposite corner's Y.
- 调整后的宽度是 mouseX 位置和对角 X 之间的差值。
- 调整后的高度是 mouseY 位置和对角 Y 之间的差值。
Dragging
拖动
How to drag an image
如何拖动图像
- If the user mousedown's inside the image, save the mouses starting XY to begin dragging.
- In the mousemove handler, move the image by the current mouseXY minus the startingXY.
- Also in mousemove, reset the startingXY to the current mouseXY in preparation for continued dragging.
- On mouseup, stop the image's drag.
- 如果用户在图像内按下鼠标，则保存从 XY 开始的鼠标以开始拖动。
- 在 mousemove 处理程序中，按当前鼠标 XY 减去起始 XY 移动图像。
- 同样在 mousemove 中，将起始 XY 重置为当前鼠标 XY 以准备继续拖动。
- 在鼠标悬停时，停止拖动图像。
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/LAS8L/
这是代码和小提琴：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>
Also:
还：
Simon Sarris has done a nice tutorial on how to drag and resize "elements" on html canvas.
Simon Sarris 已经完成了一个关于如何在 html 画布上拖动和调整“元素”大小的很好的教程。
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape
