Flex拖放

Question

I have an image that I show inside a canvas which I can zoom in on. The problem is that when zoomed in, I try to drag the image, I can see the outline of the image in the foreground, (ie) outside the canvas boundary. Is there anyway to tell the dragHandler to crop the "grabbed" image outside the canvas boundary?

Answer 1

In my experience using the built in drag/drop flex stuff is overkill for something that involves moving a component around in a canvas.

The easier way to do this (in my opinion) would be to listen for mouse down/up/move the image around in the canvas yourself.

When you detect a mouse down on your image, add a listener for mouse move (pro tip: make sure you set useCapture to true when calling addEventListener) and store the position of the mouse relative the origin of your image. Then whenever you get a mouse move, change the position of your image within your canvas taking into account the position of the mouse within the image (which you stored on mouse down). Keep doing this until mouse up occurs, then remove your mouse move listener.

There are some additional finer points to account for (what if the user drags outside of the canvas? Or outside of the browser window?), but this will get you started.

Hope that helps.