RE: [flexcoders] Re: LinearGradient outside charts

[Ely Greenfield]

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 Pop Sent: Thursday, November 02, 2006 10:40 AM 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 [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 Software development tool Software development Software development services Home design software Software development company Your email settings: Individual Email|Traditional Change settings via the Web (Yahoo! ID required) Change settings via email: Switch delivery to Daily Digest | Switch to Fully Featured Visit Your Group | Yahoo! Groups Terms of Use | Unsubscribe __,_._,___