Flex 4根据用户要求填充颜色和渐变

时间:2013-01-08 06:22:01

标签: actionscript-3 flex4

我想为所选对象(显示对象,UIComponent或组)设计填充属性(* 颜色和渐变 *)。 我设计了一个颜色界面,但它只适用于填充颜色。 我如何设计填充颜色和同时填充渐变,以便用户可以根据他/她的要求填充颜色或渐变。

单个Object代码是: - `

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           implements="sharedData.IObjectProperty"
           xmlns:mx="library://ns.adobe.com/flex/mx" width="120" height="70">



<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.graphics.GradientEntry;
        import mx.graphics.LinearGradient;
        import mx.graphics.SolidColor;


        private var _color:uint = 0xFFFFFF;
        private var _alpha:uint=1;

        private var _strokeColor:uint = 0x000000;
        private var _strokeAlpha:uint = 1;
        private var _strokeWeight:uint =1;


        [Bindable]
        public function get strokeColor():uint
        {
            return _strokeColor;

        }

        public function set strokeColor(Color:uint):void
        {
            _strokeColor = Color;

        }

        [Bindable]
        public function get strokeAlpha():uint
        {
            return _strokeAlpha;

        }
        public  function set strokeAlpha(Size:uint):void
        {
            _strokeAlpha = Size;
        }
        [Bindable]
        public function get strokeWeight():uint
        {

            return _strokeWeight;
        }
        public function set strokeWeight(Weight:uint):void
        {
            _strokeWeight = Weight;
        }

        /*property for color and alpha*/

        [Bindable]
        public function get ObjColor():uint
        {
            return _color;

        }
        public function set ObjColor(ColorObj:uint):void
        {
            _color = ColorObj;
        }

        [Bindable]
        public function get ObjAlpha():uint
        {
            return _alpha;

        }
        public function set ObjAlpha(AlphaObj:uint):void
        {  
            _alpha = AlphaObj;

        }



    ]]>
</fx:Script>


    <!--s:Path width="100%" height="100%" data="M 10 0 L 120 0 L 110 10 L 0 10 L 10 0 M 110 10 L 110 70 L 0 70 L 0 10 M 120 0 L 120 60 L 110 70">
        <s:stroke>
            <s:SolidColorStroke color="#000033" alpha="1" 
                                weight="1" pixelHinting="true"/>
        </s:stroke>
        <s:fill>
            <s:SolidColor color="#FFFFFF" alpha="0.5"/>
        </s:fill>
    </s:Path-->

    <s:Path  width="100%" height="100%" data="M 10 0 L 130 0 L 120 10 L 0 10 L 10 0 M 0 10 L 0 70 L 120 70 L 120 10 M 120 70 L 130 60 L 130 0 L 120 10" id="iface">

        <s:stroke>
            <s:SolidColorStroke alpha="{strokeAlpha}" color="{strokeColor}" weight="{strokeWeight}"/>

        </s:stroke>

        <s:fill>
            <s:SolidColor alpha="{ObjAlpha}" color="{ObjColor}">

            </s:SolidColor>

        </s:fill>



    </s:Path>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
</s:Group>
`

1 个答案:

答案 0 :(得分:1)

假设我正确地阅读此内容,您可以采用以下两种方式之一。

1)您可以在fx:Declarations标签中创建填充对象,并在AS3中手动设置。

<fx:Declarations>
    <s:SolidColor id="solid" />
    <s:LinearGradient id="grad" />
</fx:Declarations>  
<fx:Script>
    <![CDATA[
        if ( this ) {
            this.graphicsObjects.fill = solid;
        }
        else if ( that ) {
            this.graphicsObjects.fill = grad;
        }
    ]]>
</fx:Script>

2)你可以使用状态。这是我喜欢这种行为的首选方法。

<fx:Declarations>
    <s:SolidColor id="solid" />
    <s:LinearGradient id="grad" />
</fx:Declarations>
<s:states>
    <s:State name="solidFill"/> <!-- Will default to the first state in the array -->
    <s:State name="gradFill"/>
</s:States>
<s:Rect fill.solidFill="{this.solid}" fill.gradFill="{this.grad}"/>
<fx:Script>
    <![CDATA[
             this.currentState = "solidFill";
             this.currentState = "gradFill";
    ]]>
</fx:Script>

如果您还不知道,State允许您定义对象在某些点(“状态”)的外观和/或行为方式。您将currentState设置为“gradFill”,MXML知道fill.gradFill对象使用Rect。它很简单,让内部机制处理交换。另外一个好处是,您也可以利用Transition(参见LiveDocs),甚至可以在每种状态下更改多个对象。

无论哪种方式都有效,所以您可以自行决定如何处理它。