Question

我正在尝试翻译此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>

进入等效的beginGradientFill调用。我对翻译的最佳猜测是

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);

但是我不确定这是不对的，也不知道盒子的大小应该是多少（上面代码中的两个20只是我尝试的东西）。会喜欢任何专家的专家意见！

谢谢你！

Answer 1

此示例可以说明如何绘制与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>

查看执行所有计算的getMatrix()方法。

如何从spark.LinearGradient开始GraradientFill

1 个答案: