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

Question

我有一个图像,我需要在画布内调整大小,移动和旋转,而不是另一个我用作遮罩的图像来剪辑其他图像 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;
});