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], "Ely Greenfield" <[EMAIL PROTECTED]> wrote:
>
>
>
> Post away, Cristian. I wrote the gradient classes in the charts, and
> can probably help.
>
> Ely.
>
>
> ________________________________
>
> From: [email protected] [mailto:[EMAIL PROTECTED] On
> Behalf Of Cristian Pop
> Sent: Thursday, November 02, 2006 1:57 AM
> To: [email protected]
> 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
>
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/flexcoders/join
(Yahoo! ID required)
<*> To change settings via email:
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
