在html5画布上拖动和调整图像大小 [英] dragging and resizing an image on html5 canvas
本文介绍了在html5画布上拖动和调整图像大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在构建一个HTML5画布图像编辑器。将图像上传到画布后，我需要Dragg并在画布上调整大小。
我设法上传了一张图片并使其在画布上可拖动。但我需要在画布上调整它的大小。提前致谢。
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.
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);
我尝试使用kinetics js，但它不适合画布。
I tried with kinetics js but it is not suitable with canvas.
推荐答案
这是允许您使用Canvas拖动图像并调整图像大小的示例代码。
Here's example code to allow you to drag and resize an image using Canvas.
调整大小
如何使用4个可拖动锚点调整图像大小
- 在每个角落绘制一个可拖动的锚点图片。
- 如果用户mousedown是一个锚点，则开始拖动该锚点。
- 在mousemove处理程序中，使用拖动锚点调整图像大小位置（注意如下）。
- 作为mousemove中的最后一个动作，重新绘制已调整大小的图像和4个新锚点。
- 在mouseup上，停止锚点拖动。
- 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.
注意用于调整图像大小的数学运算：
Note on the math used to resize the image:
- 调整后的宽度是差异在鼠标X的位置和对角的X.
- 调整大小的高度是mouseY位置和对角Y的差值。
拖动
如何拖动图片
- 如果用户mousedown在图片中，保存鼠标开始XY以开始拖动。
- 在mousemove处理程序中，按当前mouseXY减去startingXY移动图像。
- 同样在mousemove中，将startingXY重置为当前mouseXY以准备继续拖动。
- 在鼠标上，停止图像的拖动。
- 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.
这是代码和小提琴： 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>
此外：
Simon Sarris已完成关于如何在html画布上拖动和调整元素的精彩教程。
Simon Sarris has done a nice tutorial on how to drag and resize "elements" on html canvas.
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape
这篇关于在html5画布上拖动和调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
