通过鼠标拖动在 HTML 画布内移动图像答案

【问题标题】：Move image inside HTML canvas with mouse dragging通过鼠标拖动在 HTML 画布内移动图像
【发布时间】：2014-02-21 21:10:40
【问题描述】：

我有一张图片需要在 Canvas 内调整大小、移动和旋转，而另一张图片则用作蒙版以使用 globalCompositeOperation = "source-in"; 剪辑另一张图片

这是一个fiddle。

我正在考虑添加按钮来移动图像，但为什么不添加鼠标？但是，我找不到如何在此代码中集成拖动功能的方法。我需要在这里改变或改变什么？

【问题讨论】：

我已更新为还显示移动剪辑区域。
另一个显示剪辑和图像的更新。我想我现在已经完成了，除非我错过了什么:)
谢谢，第二个小提琴更多/更少是我需要的，除了图像（鹰）应该是移动的而不是蒙版，它应该在单击鼠标和拖动时工作。但无论如何，谢谢，我会尝试使用你的例子，其余的我自己做。
见这里：jsfiddle.net/rVx5G/10。我也会更新我的答案。

标签： javascript jquery html html5-canvas

【解决方案1】：

原始 - 移动外部图像

看到这个jsfiddle

代码：

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

css:

#stcanvas
{
    position:absolute;    
}

您显然会添加一个按钮来启用移动。或者，您可能希望使用 jquery UI 进行内置拖放。

更新 - 移动剪辑

见this 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 - 移动剪辑和内部图像

见this fiddle

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

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

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

见this fiddle

主要变化是：

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

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

【讨论】：

我得到了它的工作需要，谢谢你。 See this fiddle
@user1977790 - 非常好。我建议的唯一更改是 $("#stcanvas").mouseup( 应该是 $(window).mouseup 否则，如果您在 mouseup 时将鼠标移出图像，则即使在鼠标向上时，当您下次越过图像时，图像也会继续拖动。希望这是有道理的。我的最终更新显示了这一点。
当我们点击图片进行拖动时，图片会占据初始位置，而且当我们拖动图片时，它不会随着鼠标移动，会有某种增加的延迟。我试图扭转这一点，但我对数学不太擅长想出正确的公式。知道如何解决这个问题吗？
听起来您想跟踪鼠标移动中的增量，最好在单独的问题中处理。如果您创建一个新问题并将链接放在 cmets 中，我会看看。
这里是：stackoverflow.com/questions/21999718/…