Thanks Ely,
I'm happy to learn from the masters :-) I'm absolutely
in love with
what you do at quietlyscheming.com.
I'm a beginner
with extending components in AS and I admit that I
don't yet fully
understand the display hierarchy and the component
live cycle.
I wanted
to extend the canvas to allow gradient, using the fillCollor
and fillAlpha
styles.
So I did something like this, based on an example from the
docs. (I
skip the style management code and give you onli the update
method
)
package
{
[...]
// Define the variable to hold the
current gradient fill colors.
private var fillColorsData:Array;
//
Define the flag that indicates a change to fillColors.
private var
bFillColorsChanged:Boolean = true;
// Define variables for
additional controls on the fill.
// You can create style properties for
these as well.
private var alphas:Array = [0.8, 0.2];
private var
ratios:Array = [0x00, 0xFF];
// Constructor
public function
MyCanvas() {
super();
}
[...]
override public function
styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
// Check to see if style
changed.
if (styleProp=="fillColors" ||
styleProp=="fillAlphas")
{
//bFillColorsChanged=true;
invalidateDisplayList();
return;
}
}
// Override
updateDisplayList() to update the component
// based on the style
setting.
override protected
function
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,
unscaledHeight);
// Check to see if style changed.
if
(bFillColorsChanged==true)
{
// Redraw gradient fill only if style
changed.
fillColorsData = getStyle("fillColors");
alphas =
getStyle("fillAlphas");
var m:Matrix = new
Matrix();
m.createGradientBox(
unscaledWidth,
unscaledHeight,
-1.57,
0,
0
);
graphics.clear();
graphics.beginGradientFill(
GradientType.LINEAR,
fillColorsData,
alphas,
ratios,
m
);
graphics.drawRoundRect(
0,
0,
unscaledWidth,
unscaledHeight,
Number(getStyle("cornerRadius"))
);
}
}
}
}
It works great, but I wanted to be able to
specifi the colors,alphas
and ratios easier. Then I've found LinearGradient
and IFill, that were
used in charts to easily pass those values.
I
went a bit though the docs and the code and I tried this:
package
{
public class MyCanvas2 extends Canvas
{
[Bindable]
public
var fill:IFill;
// Constructor
public function MyCanvas2()
{
super();
}
// Override updateDisplayList() to update
the component
// based on the style setting.
override protected
function
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,
unscaledHeight);
var rect: RoundedRectangle =
new
RoundedRectangle(
0,
0,
unscaledWidth,
unscaledHeight,
Number(getStyle("cornerRadius"))
);
if
(fill) {
graphics.clear();
fill.begin(graphics,
rect);
fill.end(graphics);
graphics.drawRoundRect(
rect.left,
rect.top,
rect.width,
rect.height,
rect.cornerRadius);
}
}
}
}
But
it's not working. Nothing is drawn. I guess I'm missing some
method that
needs override.
Thanks,
Cristian Pop
--- In [EMAIL PROTECTED]ups.com,
"Ely Greenfield" <[EMAIL PROTECTED].> wrote:
>
>
>
> Post away, Cristian. I wrote the gradient classes in the charts,
and
> can probably help.
>
> Ely.
>
>
>
________________________________
>
> From: [EMAIL PROTECTED]ups.com
[mailto:[EMAIL PROTECTED]ups.com]
On
> Behalf Of Cristian Pop
> Sent: Thursday, November 02, 2006
1:57 AM
> To: [EMAIL PROTECTED]ups.com
>
Subject: [flexcoders] LinearGradient outside charts
>
>
>
> Hi,
>
> some time ago I've played a bit with creating
components in AS and
> I've extended the canvas to allow gradient using
fillColors.
> Back then I did not implement more than 2 colors.
>
In the meantime I've noticed the LinearGradient class and I thought
>
that I could use it to pass easier the parameters required by a
>
gradient. angle, fill colors, alphas and ratios.
>
> So I've
triend to extend the Canvas adding a fill property (IFill) and
> then in
updateDisplayList to use the begin method of the Linear
> Gradient to
fill the graphics of the Canvas.
>
> I'm not sure what I'm doing
wrong but it's not working. If anyone
> knows how LinearGradient works
and it can be used outside the scope
> shown in the documentation please
let me know.
>
> I will try to post the code later.
>
> Thanks,
>
> Cristian Pop
>
