在html5canvas上拖动和调整图像大小

我正在构建一个HTML5canvas图像编辑器。 将图像上传到canvas后，我需要Dragg并在canvas上resize。 我设法上传了一张图片并将其拖放到canvas上。 但我需要在canvas上调整它的大小。 提前致谢。

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但不适用于帆布。

Answer 1

这是允许您使用Canvas拖动和调整图像大小的示例代码。

调整

如何使用4个可拖动锚点调整图像大小

• 在图像的每个角上绘制一个可拖动的锚点。
• 如果用户mousedown的一个锚点，则开始拖动该锚点。
• 在mousemove处理程序中，使用拖动锚点的位置调整图像大小（请参阅下面的注释）。
• 作为mousemove中的最后一个动作，重新绘制已resize的图像和4个新锚点。
• 在mouseup上，停止锚点的拖动。

关于用于调整图像大小的数学的注意事项：

• resize的宽度是mouseX位置和对角X的差值。
• resize的高度是mouseY位置和对角Y的差值。

拖延

如何拖动图像

• 如果用户mousedown在图像内，请保存鼠标开始XY以开始拖动。
• 在mousemove处理程序中，按当前mouseXY减去startingXY移动图像。
• 同样在mousemove中，将startingXY重置为当前mouseXY以准备继续拖动。
• 在mouseup上，停止图像的拖动。

这是代码和小提琴： http ： //jsfiddle.net/m1erickson/LAS8L/

           
Resize the image using the 4 draggable corner anchors
 
You can also drag the image
    

也：

Simon Sarris做了一个关于如何在htmlcanvas上拖动和调整“元素”的精彩教程。

http://simonsarris.com/blog/225-canvas-selecting-resizing-shape