I'm working on a canvas application, and implemented a zoom-in and out function using scale() and translate().
After zooming in, my canvas is actually bigger than it's seen on the screen, so I want to implement a drag and drop function for the whole canvas.
How can I do it?
Drag and drop what exactly?
You mean drag the whole canvas scene around? That's known as mouse-panning.
On the mousedown event, begin panning and save the mouse position
On the mousemove event, translate the context (ctx.translate(x,y)) by the difference between the current mouse position and the original position, then redraw the scene.
On the mouseup event, stop panning.
(There are harder ways, for instance you could implement scrollbars inside or outside the canvas)
Related
I Try to drag component using DragManager but it will not drag my component live. it will drag like given image below.
But i don't want to drag compoenent like this.
So, I will try to drag component by changing it's X Position. I will change it's X Position when i drag Component using mouse, for that i use MouseDown, MouseMove and MouseUp event. OnMouseUp I put that component at that place when MouseUp event call.
But, It didn't work smooth. I use event.updateAfterEvent(); for smooth move but still didn't get good output. The Component will jurk some times when i move and some times move go outside screen and component stick to mouse.
Is Live Drag Possible in flex? I Like to use drag component functionality in mobile application.
Thanks
Simply use "startDrag" and "stopDrag" function for your object.
On the "On Mouse Down" Event:
yourObject.startDrag();
And "On Mouse Up" Event:
yourObject.stopDrag();
For keeping the object inside specific bounds you can pass a Rectangle Object as parameter to the startDrag call:
yourObject.startDrag(false, new Rectangle(0, 0, stage.stageWidth, stage.stageHeight));
Above call will keep your object on the stage.
can I make objects drawn in canvas response to mouse events? for example, to change colors or to display toolips on mouseover? I can adjust some values by using other types of inputs (range, radio...), but cannot make direct mouse manipulation on objects drawn in canvas.
No.
Anything drawn on html canvas becomes unremembered pixels.
What you will need to do is "remember" everything about all the things you've drawn: shape, position, color.
Then you can respond to mouse events and compare the mouse position with the bounding boxes of your remembered drawings.
If you want to change any drawing (recolor, reposition, etc), you must redraw that drawing.
Most often when you redraw any one thing, you will erase the entire canvas and redraw all items that were on the canvas.
You can listen for mouse events on the canvas. The rest is up to you. If you keep a list of objects drawn on the canvas, you can scan through the list looking for one that is under the mouse.
My problem is really simple
I´ve an artifact with a mouse inside. When you use it it simulates moving the mouse cursor indefinitely to the right.
Of course when i run my project at some point the mouse will reach the right side of the movieclip and the Mouse_Move event wont work anymore
I need a way make my actionscript to recongnise mouse movement even if im out of bounds
(It´s a mobile aplication so using full screen wont work)
In other words i need a Mouse-Motion Listener!
Though it is not possible to track mouse movements outside of flash with only ActionScript, you could capture the mouse position with javascript in the browser and pass it to your SWF.
See this blog as an example. http://www.nelsond8.com/?p=515
You cannot track the mouse position or actions when it moves outside of the stage.
You can however track when the mouse actually leaves the stage using Event.MOUSE_LEAVE:
function mouseLeave(e:Event):void
{
trace("Mouse left the stage.");
}
stage.addEventListener(Event.MOUSE_LEAVE, mouseLeave);
From here you can decide what the most appropriate course of action will be for your application - adding some 'pause' functionality is pretty common.
Tip: MouseEvent.MOUSE_MOVE is what you should use to detect when the mouse re-enters the stage.
I'm trying to figure out how to drag and drop an image from one canvas to another canvas. Assuming the canvases are next to each other, would it be possible to seamlessly drag something across the border? If not, is it a better idea to drag a div over the canvas, get its ID, and place it by responding to the mouseup location on the canvas?
You don't drag items on a canvas. A canvas is a non-retained mode (or immediate mode) graphics API. You issue draw commands and you get pixels. Simulating dragging is comprised of tracking the user's mouse movements and choosing to repeatedly clear and re-draw the canvas with different parameters to make some subset of the pixels appear to move as a cohesive object.
Contrast this with HTML or SVG where you actually change position/transform properties of a real DOM object and the watch as the visual representation of your document updates automatically.
If you have two canvases and want to drag something from one to the other, what I would do is:
On mouse down on the 'menu' canvas, create a new canvas programmatically just as large as the object, and (using absolute CSS positioning) place it over top of the item the user clicked on.
Draw the item onto that canvas.
Track the mousemove event on the document, and update the position of the canvas relative to the mouse.
When the user releases the mouse over the destination canvas, throw away (or hide) your tiny 'dragging' canvas, and re-draw the main canvas with the item that was dragged in the appropriate location.
Though, what I'd probably really do here is use SVG. ;)
Check this answer.
It is for multiple select drag & drop, but maybe will be useful.
Why does this need to be 2 canvases? The canvas is your drawing area, you control it. Why do you need 2?
I'm working with the Canvas Tag to draw stuff to the screen, I have like 3 different shapes on the screen, and I want to make them linkable, they could be at different coordinates depending on the users interaction, is this possible with this?
Thanks!
You could attach an onmousemove handler to the element, and track the offset, if you need the mouse coordinates. Then you can just draw onto the canvas with those coords.