On Oct 26, 2007, at 12:20 PM, Kevin wrote:
this may be a silly question, but how exactly do you draw something
in "reverse order". I understand the concept, but I am not sure
how to do it. Can you do it with the Graphics class or do you need
to dig deeper?
Mmmm.. I guess I didn't describe my code... did you look at it?
This is clockwise drawing of a rectangle:
CLOCKWISE : Top Left -> Top Right -> Bottom Right -> Bottom Left ->
Top Left
target.moveTo(x, y);
target.lineTo(x+width, y);
target.lineTo(x+width, y+height);
target.lineTo(x, y+height);
target.lineTo(x, y);
This is counter-clockwise drawing of a rectangle (reverse order):
COUNTER-CLOCKWISE: Top Left -> Bottom Left -> Bottom Right - >Top
Right -> Top Left
target.moveTo(x,y);
target.lineTo(x, y+height);
target.lineTo(x+width,y+height)
target.lineTo(x+width,y);
target.lineTo(x,y);
You draw multiple closed shapes on one target (sprite, movieclip,
whatever) BEFORE you end the fill. It's a single graphics drawing
session on a single object. The direction that you draw the points
will determine whether or not they subtract or combine. You don't
create multiple 'sprites' or objects.
Below is the code from your post after this one modified (but untested).
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
// Draw a rectangular mask to darken the cropped out parts of
the image
var myMask:Sprite = new Sprite();
myMask.graphics.beginFill(0x000000);
myMask.graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
var x:Number = (unscaledWidth - frameWidth)/2;
var y:Number = (unscaledHeight - frameHeight)/2;
myMask.moveTo(x,y);
myMask.lineTo(x, y+frameHeight);
myMask.lineTo(x+frameWidth, y+frameHeight);
myMask.lineTo(x+frameWidth, y);
myMask.lineTo(x,y);
myMask.graphics.endFill();
myMask.alpha = .75;
this.addChild(myMask);
}
With a proper "drawRect" routine that would let you draw a rectangle
in "reverse" (counter-clockwise), you might end up with the following.
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
// Draw a rectangular mask to darken the cropped out parts of
the image
var myMask:Sprite = new Sprite();
myMask.graphics.beginFill(0x000000);
// Give me a fill
myMask.graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
// Now cut a hole out of that fill
myMask.graphics.drawRectReverse(0,0,unscaledWidth,unscaledHeight);
myMask.graphics.endFill();
myMask.alpha = .75;
this.addChild(myMask);
}
In my applications I have a Graphics class that has a method called
"drawFrame". It takes the outer and inner rectangle and draws a
cutout frame. That should be easy to write....
drawFrame( outer:Rectangle, inner:Rectangle);
good luck,
jon
