Question

我需要在Canvas中调整大小，移动和旋转一个图像，而不是使用另一个我用作遮罩的图像来使用globalCompositeOperation = "source-in";剪切另一个图像

这是 fiddle 。

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

Answer 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;
});

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

1 个答案: