[英]Move image inside HTML canvas with mouse dragging
I have one image that I need to resize, move, and rotate inside a Canvas, and than another image that I use as a mask to clip the other image using globalCompositeOperation = "source-in";
我有一个图像,我需要在画布内调整大小,移动和旋转,而不是另一个我用作蒙版的图像,使用globalCompositeOperation = "source-in";
剪辑另一个图像globalCompositeOperation = "source-in";
I was thinking about to add buttons to move the image but why not the mouse? 我正在考虑添加按钮来移动图像,但为什么不是鼠标呢? However, I can't find a way how to integrate a dragging function in this code. 但是,我找不到如何在此代码中集成拖动功能的方法。 What do I need to change or hadd here? 我需要更改或在这里做什么?
Original - move outer image 原创 - 移动外部图像
See this jsfiddle 看到这个jsfiddle
Code: 码:
$(window).mousemove(function(event) {
$("#stcanvas").css({"left" : event.pageX, "top" : event.pageY});
});
css: CSS:
#stcanvas
{
position:absolute;
}
You would obviously add a button to enable movement. 你显然会添加一个按钮来启动移动。 Alternatively, you may want to use jquery UI for in-built drag and drop. 或者,您可能希望使用jquery UI进行内置拖放操作。
Update - move clip 更新 - 移动剪辑
See this jsfiddle . 看到这个jsfiddle 。
If what you mean is that you would like to move the clip rather than the image, then do something like this: 如果您的意思是想要移动剪辑而不是图像,那么执行以下操作:
$(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();
});
and in make_pic
do this: 并在make_pic
执行此操作:
ctx.drawImage(mask_image, moveXAmount, moveYAmount);
Update 2 - move clip and inner image 更新2 - 移动剪辑和内部图像
see this fiddle 看到这个小提琴
If you want to move the image and the clip, then , basically you just add the moveXAmount and moveYAmount to drawImage. 如果你想移动图像和剪辑,那么,基本上你只需要将moveXAmount和moveYAmount添加到drawImage。 Hopefully I have exhausted all possibilities now ;) 希望我现在已经筋疲力尽了所有的可能性;)
ctx.drawImage(pic_image, -400 / 2+moveXAmount, -550 / 2+moveYAmount, im_width, im_height);
Update 3 move image and not mask as per comment 根据评论更新3移动图像而不是掩码
See this fiddle 看到这个小提琴
The main change is: 主要变化是:
$("#stcanvas").mousedown(function(){
isDragging = true;
});
$(window).mouseup(function(){
isDragging = false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.