Geek asks and answers

Moving an Image Inside an HTML Canvas Using Drag and Drop

I have one image that needs to be resized, moved and rotated inside the Canvas, and another image that I use as a mask to clip another image using globalCompositeOperation = "source-in";

Here is the fiddle .

I was thinking of adding buttons to move the image, but why not a mouse? However, I cannot find a way to integrate the drag and drop function into this code. What do I need to change or was it here?

+3
source share
1 answer

Original - move the external image

See jsfiddle

The code:

$(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 YAmount 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;
});
+9

More articles:


All Articles