I have written a pinstriped background class that extends HaloBorder. It
works great... (as the plainest example) basically I just overrode
updateDiplayList..
You basically end up with a rectangle with a light pinstripe effect.
Nice.
But what I want to do is follow any "rounded corners" that are being
drawn. I can draw a rounded rectangle (of course) but I don't know how
to "clip" my lines to the inner boundry of the rectangle. I am currently
drawing line after line for the full width in a loop after the backgound
is filled (see psudo-code below).
All you drawing experts... Is there a way to draw the portion of each
line which intersects with the already drawn rectangle?
the class looks similar to the following:
package {
import mx.skins.halo.HaloBorder;
public class HorizontalRuleBackground extends HaloBorder {
//
------------------------------------------------------------------------\
------------- //
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
// At this point we cannot do rounded corners, so we need to
// flatten the rounded corners no matter what
topCornerRadius = 0;
bottomCornerRadius = 0;
var matrix:Matrix= verticalGradientMatrix(0, 0, unscaledWidth,
unscaledHeight);
var backgroundColor:uint = getStyle("backgroundColor") as uint;
graphics.beginGradientFill("linear", [backgroundColor, backgroundColor],
[1,1], [0,255], matrix);
GraphicsUtil.drawRoundRectComplex(graphics, backgroundLeft,
backgroundTop, backgroundWidth, backgroundHeight, topCornerRadius,
topCornerRadius, bottomCornerRadius, bottomCornerRadius);
graphics.endFill();
var stepSize:int = 3;
var numberOfLines:Number = unscaledHeight/ stepSize;
var borderColor:uint = getStyle("borderColor");
graphics.lineStyle(1, borderColor, .2, true);
for(var i:int=0; i<unscaledHeight; i=i+stepSize) {
graphics.moveTo(0, i);
graphics.lineTo(unscaledWidth, i);
}
}
}
}
