使用鼠标拖动在HTML画布中移动图像

Question

使用鼠标拖动在HTML画布中移动图像

javascriptjqueryhtmlhtml5-canvas

5

我有一张图片需要在Canvas内进行调整大小、移动和旋转，然后使用另一张图像作为掩码来剪切另一张图像，使用globalCompositeOperation = "source-in"; 这是一个示例。

我想添加按钮来移动图片，但为什么不用鼠标呢？然而，我找不到如何在此代码中集成拖动功能的方法。我需要更改或添加什么？

- BeoWulf

1

我已经更新，以显示移动的裁剪区域。 - acarlon

又更新了一下，展示了剪辑和图片。我想现在应该完成了，除非我漏掉了什么 :) - acarlon

谢谢，第二个小提琴手是我需要的，除了图像（鹰）应该是移动而不是面具，并且应该在单击鼠标并拖动时工作。但无论如何，还是谢谢，我会尝试使用你的例子并自己完成剩下的部分。 - BeoWulf

请查看此处：http://jsfiddle.net/rVx5G/10/. 我也会更新我的答案。 - acarlon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- acarlon · Accepted Answer

翻译 - 移动外部图像

查看这个jsfiddle

代码：

$(window).mousemove(function(event) {
  $("#stcanvas").css({"left" : event.pageX, "top" : event.pageY});
});

CSS：

#stcanvas
{
    position:absolute;    
}

你显然需要添加一个按钮来启用移动功能。或者，你可以使用jQuery UI的内置拖放功能。

更新 - 移动剪辑

请参见此jsfiddle。

如果你的意思是想移动剪辑而不是图像，则可以像这样操作：

$(window).mousemove(function(event) {
    var cWidth = $("#stcanvas").width();    
    moveXAmount = (event.pageX / $(window).width())*cWidth;    
    moveXAmount = moveXAmount - (cWidth/2);
    var cHeight = $("#stcanvas").height(); 
    moveYAmount = (event.pageY / $(window).height())*cHeight;    
    moveYAmount = moveYAmount - (cHeight/2);
    buildcanvas();
});

在 make_pic 中执行以下操作：

ctx.drawImage(mask_image, moveXAmount, moveYAmount);

更新2-移动剪辑和内部图像

请参见此处的代码片段

如果您想移动图像和剪辑，那么基本上只需将moveXAmount和moveYAmount添加到drawImage中即可。希望我现在已经穷尽了所有可能性;)

ctx.drawImage(pic_image, -400 / 2+moveXAmount, -550 / 2+moveYAmount, im_width, im_height);

根据评论，更新3：移动图像而不是遮罩

请参见此处的代码片段

主要更改如下：

$("#stcanvas").mousedown(function(){
    isDragging = true;
});

$(window).mouseup(function(){
    isDragging = false;
});