3

Flex 4 / AS3：New-> MXMLスキンを選択し、ホストコンポーネントとして「TextInput--spark.components」を選択して、TextInputのカスタムスキンを作成しました。したがって、私の出発点は「SparkTextInputコンポーネントのデフォルトのスキンクラス」でした。

新しいスキン（「textinput_skin」と呼ばれます）内に、テキスト入力のテキストの左側に表示する新しい視覚要素を追加しました。

「ボタンの形状」は、次のようになります。http ://www.adobe.com/content/dotcom/en/devnet/flex/articles/flex4_skinning/_jcr_content/articlecontentAdobe/image_2.adimg.mw.125.jpg / 1279877300467.jpg （Adobeの例から描画するためのコードをコピーしたため）。

代わりに私のTextInput内では次のようになります：http：//i.imgur.com/8aWE7HB.png

これは、カスタムTextInputスキンのコードです（ほとんどが新しいものですが、新しいビジュアル要素を追加しました）。

<!-- border - NOT NEW STUFF --> 
<!--- @private -->
<s:Rect left="0" right="0" top="0" bottom="0" id="border">
    <s:stroke>     
        <!--- @private -->
        <s:SolidColorStroke id="borderStroke" weight="1" />
    </s:stroke>
</s:Rect>

<!-- fill - NOT NEW STUFF -->
<!--- Defines the appearance of the TextInput component's background. -->
<s:Rect id="background" left="1" right="1" top="1" bottom="1">
    <s:fill>
        <!--- @private Defines the background fill color. -->
        <s:SolidColor id="bgFill" color="0xFFFFFF" />
    </s:fill>
</s:Rect>

<!-- shadow - NOT NEW STUFF -->
<!--- @private -->
<s:Rect left="1" top="1" right="1" height="1" id="shadow">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.12" />
    </s:fill>
</s:Rect>

<s:Group> <!-- NEW PART: group with horizontal layout, to get graphical element to the left of the text in the text input -->
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>

    <s:Group> <!-- a second group that defines the 'image' shape and interior text (looks like a green rect with rounded corners and text inside)'
        <!-- border and fill -->
        <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
            <s:fill>
                <s:SolidColor color="0x77CC22"/>
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="0x131313" weight="2"/>
            </s:stroke>
        </s:Rect>

        <!-- highlight on top -->
        <s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" height="50%">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF" alpha=".5"/>
                    <s:GradientEntry color="0xFFFFFF" alpha=".1"/>
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <!-- text -->
        <s:Label text="txt" color="0xFFFFFF" 
                 textAlign="center"
                 verticalAlign="middle"
                 horizontalCenter="0" verticalCenter="1"
                 left="6" right="6" top="6" bottom="6" 
                 />
    </s:Group>

    <!-- text - NOT NEW STUFF - the normal textDisplay element for the Text Input -->
    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:RichEditableText id="textDisplay"
                        verticalAlign="middle"
                        widthInChars="10"
                        left="1" right="1" top="1" bottom="1" />
</s:Group>

<!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
<s:Label id="promptDisplay" maxDisplayedLines="1"
            verticalAlign="middle"
            mouseEnabled="false" mouseChildren="false"
            includeIn="normalWithPrompt,disabledWithPrompt" 
            includeInLayout="false"
            />

そして、私は次のように肌を使用します：

<s:TextInput skinClass="model.textinput_skin" fontFamily="Arial" id="textinputid" name="item3" visible="true" editable="true" />

問題は、グラフィック要素が淡色表示されることです。アルファが1未満であるか、前に別の透明なアイテムがあるようです。コードでわかるように、テキストの色を0xFFFFFFにしましたが、白よりもはっきりと暗く表示されます。

誰かが私の要素を暗くしているものを特定するのを手伝ってもらえますか？

ちなみに、「影」の要素があることは承知しています。ただし、updateDisplayList（）では、borderVisible==trueの場合にのみシャドウが表示されるように設定されます。borderVisible = falseに設定してみて、スキンからシャドウ要素を完全に削除してみました。それは問題ではないようです。

また、ある時点では、プログラムで図形を描く代わりに画像を使用していました。画像も暗くなりました。

どうもありがとう。

4

1 に答える 1

4

私は答えを見つけました。

スキンの他の場所には、このコードブロックがありました。

<fx:Script fb:purpose="styling">
    <![CDATA[
    import mx.core.FlexVersion;

    private var paddingChanged:Boolean;

    /* Define the skin elements that should not be colorized. */
    static private const exclusions:Array = ["background", "textDisplay", "promptDisplay", "border"];

    /* exclusions before Flex 4.5 for backwards-compatibility purposes */
    static private const exclusions_4_0:Array = ["background", "textDisplay", "promptDisplay"];
... etc.

新しい要素をexcludes配列に追加して、「色付けしてはならないスキン要素」の1つにする必要がありました。理由はわかりませんが、これで修正されました。

新しいコード：

<fx:Script fb:purpose="styling">
    <![CDATA[
    import mx.core.FlexVersion;

    private var paddingChanged:Boolean;

    /* Define the skin elements that should not be colorized. */
    static private const exclusions:Array = ["text_img", "background", "textDisplay", "promptDisplay", "border"];

    /* exclusions before Flex 4.5 for backwards-compatibility purposes */
    static private const exclusions_4_0:Array = ["text_img", "background", "textDisplay", "promptDisplay"];

ここで、text_imgは、グラフィック要素を描画するグループのIDです。

于 2013-02-20T13:20:22.993 に答える