Question

I’m trying to translate this LinearGradient

<s:LinearGradient rotation="90" scaleX="44.2931" x="10.294" y="-0.276" >
    <s:GradientEntry color="#FFD500" ratio="0"/>
    <s:GradientEntry color="#F5A106" ratio="1"/>
</s:LinearGradient>

into an equivalent beginGradientFill call. My best guess of the translation is this

var matr:Matrix = new Matrix();
matr.createGradientBox(20, 20, Math.PI/2, 10.294, -0.276);
g.beginGradientFill(GradientType.LINEAR, [0xFFD500, 0xF5A106], [1,1], [0,1], matr); 

but I’m not sure if this is right, nor I know what the size of the box should be (the two 20s in the code above are just me trying stuff). Would love any expert expert opinions!

thank you!

Answer 1

This sample can illustrate how to draw the same fill as in s:LinearGradient:

<?xml version="1.0" encoding="utf-8"?>
<s:Application creationComplete="init()" xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
    <![CDATA[
        public static const GRADIENT_DIMENSION:Number = 1638.4;

        private static const GRADIENT_SCALE_X:Number = 44.2931;
        private static const GRADIENT_X:Number = 10.294;
        private static const GRADIENT_Y:Number = 0.276;
        private static const ROTATION_DEGREES:Number = 90;

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            var g:Graphics = drawingTarget.graphics;
            g.clear();
            var matrix:Matrix = getMatrix(ROTATION_DEGREES, GRADIENT_X, -GRADIENT_Y, GRADIENT_SCALE_X);
            g.beginGradientFill(GradientType.LINEAR, [ 0xFFD500, 0xF5A106 ], [ 1, 1 ], [ 0, 255 ], matrix);
            g.drawRect(0, 0, drawingTarget.width, drawingTarget.height);
            g.endFill();
        }

        private function getMatrix(rotationDegrees:Number, x:Number, y:Number, scaleX:Number = 1):Matrix
        {
            var commonMatrix:Matrix = new Matrix();
            commonMatrix.translate(GRADIENT_DIMENSION / 2, GRADIENT_DIMENSION / 2);
            commonMatrix.scale(1 / GRADIENT_DIMENSION, 1 / GRADIENT_DIMENSION);
            var compoundTransform:Matrix = new Matrix();
            compoundTransform.scale(scaleX, 1);
            compoundTransform.rotate(rotationDegrees * Math.PI / 180);
            compoundTransform.translate(x, y);
            commonMatrix.concat(compoundTransform);
            return commonMatrix;
        }

        private function init():void
        {
            invalidateDisplayList();
        }
    ]]>
    </fx:Script>
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:Rect height="50%" width="50%">
        <s:fill>
            <s:LinearGradient rotation="{ROTATION_DEGREES}" scaleX="{GRADIENT_SCALE_X}" x="{GRADIENT_X}"
                y="{GRADIENT_Y}">
                <s:GradientEntry color="#FFD500" ratio="0" />
                <s:GradientEntry color="#F5A106" ratio="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <mx:UIComponent height="50%" id="drawingTarget" width="50%" />
</s:Application>

Take a look at getMatrix() method which performs all the calculations.