I have been playing with Flex Builder 2 and have come across
some very odd behaviour. I have an application with a panel and two
canvases, one canvas inside the other which allows me to move the
inner canvas and hence its contents and it looks quite good.
In the inner Canvas I add Sprites dynamically, well I
actually have to add my custom Sprite's to a UIComponent and add
the UIComponent to the canvas for them to be visible. The Sprites
can be moved, using the mouse position in the canvas to set the x
and y coordinates of the Sprite. However, the Sprite's are visible
even outside of the canvas, and I can move them all over the web
page; they are not clipped at all and somehow the canvas can detect
the mouse anywhere on the screen.
Amazingly; if I add a button to the canvas and set this to
the same width, actually a little bigger, as the canvas, I can only
move the Sprites within the Canvas and not all over the screen;
they do seem to be clipped and the mouse is no longer detected
outside of the visible canvas. The button seems to set a bounding
box or forces the canvas to clip the Sprites at the edge.
Does anyone know why this occurs? If anyone can give any
advice on how to constrain the children of a canvas such that only
the parts of the Sprite in the visible x and y coordinates of the
Canvas are shown that would be great.
I have in some ways been a bit dim, but am still confused a
I have resized the inner canvas so that it is larger than the
outer canvas; hence the outer canvas acting as a view window to
limit what is visible of the inner canvas and I can move the inner
This works fine, the sprites are contained correctly and my
issues disappear, and I don't even have to add any buttons :)
However, I am still confused as to why having a smaller
canvas than the containing canvas has these weird issues about the
inner canvas getting mouse events no mater whether the mouse is
actually on the canvas or not. If anyone can explain that I would
be much happier.