Rectangle 27 4

I have absolutely no idea whether this is a good, bad or ugly way of doing things however I've put together a simple fiddle which achieves what you are after - the basic principle of what i've done is this:

encapsulate your canvas objects within an object, where the canvas id's are the object keys, for example

var canvases = {
    canvas1 : new fabric.Canvas('canvas1'),
    canvas2 : new fabric.Canvas('canvas2')
 }

Then on the canvas mouse:down event, if there is an active object capture a reference to it along with the id of the canvas (using activeObject = this.getActiveObject(); and this.lowerCanvasEl.id respectively within the mouse:down callback.

note: you could use the object:selected event in place of mouse:down, however if you drag an already selected object on the canvas, it doesn't fire.

Then I bound a callback to the document mouseup event using jQuery on - the purpose of the callback is to first detect whether the target is a canvas element, if it is we get the id of your fabric canvas, compare it to the id that we stored on the mouse:down event earlier, and if they are different add the activeObject that we stored earlier to the new canvas target like so canvases[canvasId].add(activeObject); at the end of the mouseup callback I clear the activeObject and initialCanvas variables - this prevents the user from simply clicking a canvas object and then clicking on the new canvas and simulates a seamless drag-and-drop.

I hope that it's helpful, i'm sure it needs refining and improving though, especially getting the object from canvas1 to snap back to it's original starting place or disappear completely, rather than just being stuck out of the viewport of the canvas.

ThanQ, this is help for me but when i move object to other canvas then it hide inside canvas. i dont want to hide my object when i move. please help me

after the object is dragged, when the mouseup event fires you can simply reset the top and left properties of the activeObject from canvas A (the canvas you are dragging from) and it will snap back to whatever position you would like - i've done a quick update to make it snap back to left: 0 and top: 0 - here's the fiddle for it, i've commented above the two lines which update the position - hope it helps! jsfiddle.net/uppzL/14

can you add a fiddle that shows the text during the whole drag, and drop according to the top left corner's position? With your 14th example, you can't see the text when you're over the blue canvas until it snaps to {0,0}, and it would be huge if the text box would stay exactly where the mouseup event takes place...to be a bit more clear. Very helpful, Keir!

Drag Fabric.js object from one canvas to another - Stack Overflow

canvas drag-and-drop fabricjs
Rectangle 27 0

Svg drawing is limited to the viewport (read: canvas) that's setup.

There are many ways to do what you want. E.g make a new svg image that you move under the mouse while dragging. You can also make sure that the svg canvas covers the entire window, but note that that won't give you dragging outside the window (if that's something you want). Another more complete way is to use HTML5 drag&drop to set a dragimage and use the native functionality there.

Drag SVG object from one canvas to another canvas - Stack Overflow

canvas svg drag-and-drop raphael
Rectangle 27 0

I have absolutely no idea whether this is a good, bad or ugly way of doing things however I've put together a simple fiddle which achieves what you are after - the basic principle of what i've done is this:

encapsulate your canvas objects within an object, where the canvas id's are the object keys, for example

var canvases = {
    canvas1 : new fabric.Canvas('canvas1'),
    canvas2 : new fabric.Canvas('canvas2')
 }

Then on the canvas mouse:down event, if there is an active object capture a reference to it along with the id of the canvas (using activeObject = this.getActiveObject(); and this.lowerCanvasEl.id respectively within the mouse:down callback.

note: you could use the object:selected event in place of mouse:down, however if you drag an already selected object on the canvas, it doesn't fire.

Then I bound a callback to the document mouseup event using jQuery on - the purpose of the callback is to first detect whether the target is a canvas element, if it is we get the id of your fabric canvas, compare it to the id that we stored on the mouse:down event earlier, and if they are different add the activeObject that we stored earlier to the new canvas target like so canvases[canvasId].add(activeObject); at the end of the mouseup callback I clear the activeObject and initialCanvas variables - this prevents the user from simply clicking a canvas object and then clicking on the new canvas and simulates a seamless drag-and-drop.

I hope that it's helpful, i'm sure it needs refining and improving though, especially getting the object from canvas1 to snap back to it's original starting place or disappear completely, rather than just being stuck out of the viewport of the canvas.

ThanQ, this is help for me but when i move object to other canvas then it hide inside canvas. i dont want to hide my object when i move. please help me

after the object is dragged, when the mouseup event fires you can simply reset the top and left properties of the activeObject from canvas A (the canvas you are dragging from) and it will snap back to whatever position you would like - i've done a quick update to make it snap back to left: 0 and top: 0 - here's the fiddle for it, i've commented above the two lines which update the position - hope it helps! jsfiddle.net/uppzL/14

can you add a fiddle that shows the text during the whole drag, and drop according to the top left corner's position? With your 14th example, you can't see the text when you're over the blue canvas until it snaps to {0,0}, and it would be huge if the text box would stay exactly where the mouseup event takes place...to be a bit more clear. Very helpful, Keir!

Drag Fabric.js object from one canvas to another - Stack Overflow

canvas drag-and-drop fabricjs
Rectangle 27 0

One more query with this I am having is, With above answer I am able to drag images after Scaling/Zooming. But when I pan the Svg file then I am not able to drag those images. Which translate points should I add in imagesHitTests functions so that I am able to drag images after panning also?

I am not able to give reference of JavaScript files in jsfiddle. Links are mention there which need to use. jsfiddle.net/VSK9K/5

javascript - How to drag images / objects within Canvas after zooming ...

javascript jquery canvas 3d 2d
Rectangle 27 0

I solved this issue was in div overflow I changed HTML as below:

<div style="width: 900px; height: 800px; overflow: scroll" onscroll="setMyOffset();">
  <canvas id="canvas" width="800" height="700px" style="border: 1px solid #000000"></canvas>
</div> 

function setMyOffset() {
  canvas.calcOffset();
}

javascript library - Increasing canvas height at runtime in Fabric.js ...

html5-canvas javascript-library fabricjs
Rectangle 27 0

You have two mouseDown events...maybe the second one should be mouseUp?

I'm still a little confused on your desired functionality. Do you want the ball to move only if mouseDown=true or a ball should move if it is clicked once? Because you should be using click() handler in the second case.

Your mouseMove seems odd as well...are you trying to get any ball within a certain distance D to bind to the mouse coordinates? That will create some odd behavior.

1) On mouseDown, detect if a ball has been selected and save that ID. (set mousePressed=true)

2) On mouseMove, if mousePressed=true && ball is selected, bind that ball to the mouse coordinates. Do not update() this ball with any velocity.

Thank you so much, it helps a lot. The result is good: jsfiddle.net/nyTkU/5 except one out of three or four drags, a forbidden sign would appear and prevent user from dragging object within the canvas. that's the only odd thing.

javascript - How to write "drag" event for objects on canvas? - Stack ...

javascript html5 canvas mouseevent drag
Rectangle 27 0

KineticJS is one such Javascript Library that u can use exclusively for animations

html5 - Drag objects in canvas - Stack Overflow

html5 canvas draggable drag
Rectangle 27 0

The HTML Canvasunlike SVG or HTMLuses a non-retained (or immediate) graphics API. This means that when you draw something (like an image) to the canvas no knowledge of that thing remains. The only thing left is pixels on the canvas, blended with all the previous pixels. You can't really drag a subset of pixels; for one thing, the pixels that were 'under' them are gone. What you would have to do is:

  • Track the mousedown event and see if it's in the 'right' location for dragging. (You'll have to keep track of what images/objects are where and perform mouse hit detection.)
  • As the user drags the mouse, redraw the entire canvas from scratch, drawing the image in a new location each time based on the offset between the current mouse location and the initial mousedown location.

The HTML Canvas is good for a lot of things. User interaction with "elements" that appear to be distinct (but are not) is not one of those things.

Update: Here are some examples showing dragging on the canvas:

None of these have created a separate library for tracking your shapes for you, however.

I see. Thanks for the clarifications. My plan is to eventually turn my code into a simple game. I would like to keep using canvas because it sounds like canvas is going to be have more browser support in the future. For the time being I dont mind going through the steps you outlined above but ideally I would like to find a library that I can plug into my code which helps me handle mouse interaction with elements.

@Rigil - I agree with Phrogz. When I first heard about canvas, I though it was going to be like a flash surface that we could use without flash. However as he says, there is no heirachy of 'objects' on the canvas, just one big collection of pixels. Move one thing and you will need to clear the canvas and redraw everything.

html5 - Drag objects in canvas - Stack Overflow

html5 canvas draggable drag
Rectangle 27 0

I solved this issue was in div overflow I changed HTML as below:

<div style="width: 900px; height: 800px; overflow: scroll" onscroll="setMyOffset();">
  <canvas id="canvas" width="800" height="700px" style="border: 1px solid #000000"></canvas>
</div> 

function setMyOffset() {
  canvas.calcOffset();
}

javascript - Increasing canvas height at runtime in Fabric.js affectin...

html5-canvas javascript fabricjs
Rectangle 27 0

I have absolutely no idea whether this is a good, bad or ugly way of doing things however I've put together a simple fiddle which achieves what you are after - the basic principle of what i've done is this:

encapsulate your canvas objects within an object, where the canvas id's are the object keys, for example

var canvases = {
    canvas1 : new fabric.Canvas('canvas1'),
    canvas2 : new fabric.Canvas('canvas2')
 }

Then on the canvas mouse:down event, if there is an active object capture a reference to it along with the id of the canvas (using activeObject = this.getActiveObject(); and this.lowerCanvasEl.id respectively within the mouse:down callback.

note: you could use the object:selected event in place of mouse:down, however if you drag an already selected object on the canvas, it doesn't fire.

Then I bound a callback to the document mouseup event using jQuery on - the purpose of the callback is to first detect whether the target is a canvas element, if it is we get the id of your fabric canvas, compare it to the id that we stored on the mouse:down event earlier, and if they are different add the activeObject that we stored earlier to the new canvas target like so canvases[canvasId].add(activeObject); at the end of the mouseup callback I clear the activeObject and initialCanvas variables - this prevents the user from simply clicking a canvas object and then clicking on the new canvas and simulates a seamless drag-and-drop.

I hope that it's helpful, i'm sure it needs refining and improving though, especially getting the object from canvas1 to snap back to it's original starting place or disappear completely, rather than just being stuck out of the viewport of the canvas.

ThanQ, this is help for me but when i move object to other canvas then it hide inside canvas. i dont want to hide my object when i move. please help me

after the object is dragged, when the mouseup event fires you can simply reset the top and left properties of the activeObject from canvas A (the canvas you are dragging from) and it will snap back to whatever position you would like - i've done a quick update to make it snap back to left: 0 and top: 0 - here's the fiddle for it, i've commented above the two lines which update the position - hope it helps! jsfiddle.net/uppzL/14

can you add a fiddle that shows the text during the whole drag, and drop according to the top left corner's position? With your 14th example, you can't see the text when you're over the blue canvas until it snaps to {0,0}, and it would be huge if the text box would stay exactly where the mouseup event takes place...to be a bit more clear. Very helpful, Keir!

Drag Fabric.js object from one canvas to another - Stack Overflow

canvas drag-and-drop fabricjs