[flexcoders] Re: LinearGradient outside charts
Thanks to everybody on the list. It seems that it was a bit of misunderstanding. I was trying to create a Canvas component and to be able to fill the background with gradient but to specify more then 2 colors, like it is possible with let's say Button component. So I tried using LinearGradient class from mx.graphics. Like this : mis:MyCanvas width=200 height=100 borderStyle=solid borderThickness=10 cornerRadius=10 mis:fill mx:LinearGradient mx:entries mx:GradientEntry color=green ratio=0 alpha=.5/ mx:GradientEntry color=red ratio=.33 alpha=.5/ mx:GradientEntry color=blue ratio=.66 alpha=.5/ /mx:entries /mx:LinearGradient /mis:fill /mis:MyCanvas So Ely, I was going for the mx.graphics classes :-) Dirk, thanks for the great example of doing this using skins, but this time I wanted to try this approach. I guess it depends on what needs you have, in my case I can easily change the Linear Gradient to Radial, in Dirks case it's easier to skin more then just the canvas. And finally, my code was just fine but stupid me I was doing beginFill, endFill and then draw the shape :-) Thanks again guys, 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/
RE: [flexcoders] Re: LinearGradient outside charts
Hi,
try extending mx.skins.halo.HaloBorder and do the
gradient drawing the updateDisplayList method. Then, assign this class as the
border-skin for your component. This way you can use this gradient on any
component that supports border styles.
border-skin:
ClassReference("foo.bar.YourGradientClass");
Dirk.
From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of Cristian
PopSent: Thursday, November 02, 2006 10:40 AMTo:
flexcoders@yahoogroups.comSubject: [flexcoders] Re: LinearGradient
outside charts
Thanks Ely,I'm happy to learn from the masters :-) I'm absolutely
in love withwhat you do at quietlyscheming.com.I'm a beginner
with extending components in AS and I admit that Idon't yet fully
understand the display hierarchy and the componentlive cycle.I wanted
to extend the canvas to allow gradient, using the fillCollorand fillAlpha
styles.So I did something like this, based on an example from the
docs. (Iskip 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
functionupdateDisplayList(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,alphasand ratios easier. Then I've found LinearGradient
and IFill, that wereused 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
functionupdateDisplayList(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 somemethod 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
__._,_.___
--
Flexcoders Ma
[flexcoders] Re: LinearGradient outside charts
Brian,
I did not post the code for measure override, so that's not the problem.
I will try what Ely suggested and get back.
Cristian
--- In flexcoders@yahoogroups.com, Brian Deitte [EMAIL PROTECTED] wrote:
Hi Cristian, I had to override measuredWidth and measuredHeight to get
my gradient fill to display correctly. It's interested to me though
that your first example works correctly, which seems to indicate that
there's something else going on here. -Brian
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Cristian Pop
Sent: Thursday, November 02, 2006 1:40 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: LinearGradient outside charts
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 flexcoders@yahoogroups.com mailto:flexcoders%40yahoogroups.com
, Ely Greenfield egreenfi@ wrote:
Post away, Cristian. I wrote the gradient classes in the charts, and
can probably help.
Ely.
From: flexcoders@yahoogroups.com mailto:flexcoders%40yahoogroups.com
[mailto:flexcoders@yahoogroups.com mailto:flexcoders%40yahoogroups.com
] On
Behalf Of Cristian Pop
Sent: Thursday, November 02, 2006 1:57 AM
To: flexcoders@yahoogroups.com mailto:flexcoders%40yahoogroups.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
RE: [flexcoders] Re: LinearGradient outside charts
Hi,
I just uploaded a litte sample (source code included)
http://www.richinternet.de/blog/index.cfm?entry=ADD4FDD1-9B48-BFBC-2A70F
3C57EBC6892
Dirk.
-Original Message-
From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of Cristian Pop
Sent: Friday, November 03, 2006 12:52 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: LinearGradient outside charts
Brian,
I did not post the code for measure override, so that's not
the problem.
I will try what Ely suggested and get back.
Cristian
--- In flexcoders@yahoogroups.com, Brian Deitte [EMAIL PROTECTED] wrote:
Hi Cristian, I had to override measuredWidth and
measuredHeight to get
my gradient fill to display correctly. It's interested to
me though
that your first example works correctly, which seems to
indicate that
there's something else going on here. -Brian
From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED]
On Behalf Of Cristian Pop
Sent: Thursday, November 02, 2006 1:40 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: LinearGradient outside charts
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 flexcoders@yahoogroups.com
mailto:flexcoders%40yahoogroups.com
, Ely Greenfield egreenfi@ wrote:
Post away, Cristian. I wrote the gradient classes in the
charts, and
can probably help.
Ely.
From: flexcoders@yahoogroups.com
mailto:flexcoders%40yahoogroups.com
[mailto:flexcoders@yahoogroups.com
mailto:flexcoders%40yahoogroups.com
] On
Behalf Of Cristian Pop
Sent: Thursday, November 02, 2006 1:57 AM
To: flexcoders@yahoogroups.com
[flexcoders] Re: LinearGradient outside charts
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 flexcoders@yahoogroups.com, Ely Greenfield [EMAIL PROTECTED] wrote:
Post away, Cristian. I wrote the gradient classes in the charts, and
can probably help.
Ely.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Cristian Pop
Sent: Thursday, November 02, 2006 1:57 AM
To: flexcoders@yahoogroups.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
RE: [flexcoders] Re: LinearGradient outside charts
Ah, you're using the primitive graphics API, not the
mx.graphics.LinearGradient class. Good, that's probably the right way to
go.
A couple of questions for you:
1) Have you tried writing a simpler version that just uses
a solid color? That might make show you whether the problem is with the
gradient code, or rendering in particular.
2) when flex containers show borders, they're actually
creating a border object and adding it as a child. In flash, the graphics
of a Displayobject get rendered behind the children of the display object. Which
means if your component is showing a border or background( i.e., a
background as rendererd by the base class), it will obscure any drawing you do
in the component itself.
3) often, when people are writing custom components, they
reasonably assume that Canvas is the right starting point, when really they
should be using UIComponent as their base class. What kind of a component
are you writing? Are you just creating a Canvas with better background
capabilities? Or are you creating something else? If it's something else,
what's your reasoning for using Canvas as the base?
Ely.
From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of Cristian
PopSent: Thursday, November 02, 2006 10:40 AMTo:
flexcoders@yahoogroups.comSubject: [flexcoders] Re: LinearGradient
outside charts
Thanks Ely,I'm happy to learn from the masters :-) I'm absolutely in
love withwhat you do at quietlyscheming.com.I'm a beginner with
extending components in AS and I admit that Idon't yet fully understand the
display hierarchy and the componentlive cycle.I wanted to extend the
canvas to allow gradient, using the fillCollorand fillAlpha
styles.So I did something like this, based on an example from the docs.
(Iskip 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
functionupdateDisplayList(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,alphasand ratios easier. Then I've found LinearGradient
and IFill, that wereused 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
functionupdateDisplayList(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 somemethod 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
RE: [flexcoders] Re: LinearGradient outside charts
Hi Cristian, I had to override measuredWidth and
measuredHeight to get my gradient fill to display correctly. It's
interested to me though that your first example works correctly, which seems to
indicate that there's something else going on here.
-Brian
From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of Cristian
PopSent: Thursday, November 02, 2006 1:40 PMTo:
flexcoders@yahoogroups.comSubject: [flexcoders] Re: LinearGradient
outside charts
Thanks Ely,I'm happy to learn from the masters :-) I'm absolutely in
love withwhat you do at quietlyscheming.com.I'm a beginner with
extending components in AS and I admit that Idon't yet fully understand the
display hierarchy and the componentlive cycle.I wanted to extend the
canvas to allow gradient, using the fillCollorand fillAlpha
styles.So I did something like this, based on an example from the docs.
(Iskip 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
functionupdateDisplayList(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,alphasand ratios easier. Then I've found LinearGradient
and IFill, that wereused 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
functionupdateDisplayList(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 somemethod 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
__._,_.___
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
SPONSORED LINKS
