Hi,
I've got the following sample code that draws a larger square with
another smaller square rendered halfway inside the larger square and
halfway out:
public function drawSquare():void {
var largeSquare:Canvas = new Canvas();
largeSquare.clipContent = true;
largeSquare.graphics.beginFill(0x0000FF, 0.5);
largeSquare.graphics.drawRect(800, 0, 400, 400);
largeSquare.graphics.endFill();
addChild(largeSquare);
var smallSquare:UIComponent = new UIComponent();
smallSquare.graphics.beginFill(0xFF0000, 0.5);
smallSquare.graphics.drawRect(1100, 100, 200, 200);
smallSquare.graphics.endFill();
largeSquare.addChild(smallSquare);
}
What I'd like to do is restrict the rendering of the smaller square
to be within the bounds of the larger square, in other words, I want
to crop the part of the smaller square that's hanging off the larger
square.
Someone advised me to use clipContent(), which by its description is
exactly what I want, however, it doesn't work. I've read that in
some cases, it won't do it because it's an expensive operation. It
sounds pretty lame in that sometimes it works and sometimes it
doesn't. If it doesn't work in the simple example above, then under
what conditions does it work?
Any help is much appreciated. Thanks.
