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

Question

我有一个图像，我需要在画布内调整大小，移动和旋转，而不是另一个我用作蒙版的图像，使用globalCompositeOperation = "source-in";剪辑另一个图像globalCompositeOperation = "source-in";

这是一个小提琴 。

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

Answer 1

原创 - 移动外部图像

看到这个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;
});