Flex4中看似简单的蒙皮问题；风格带来迪斯科效果

Question

我做错了什么，但我不知道是什么。 flex4 中的简单项目，我创建了一个蒙皮组合框（末尾的片段）。

如果我打开 3 个皮肤参考（上层皮肤、上层皮肤、下层皮肤），组合框似乎会停止工作。如果我移除上层皮肤，将鼠标悬停在组合上会产生闪烁效果，它似乎应用了样式，然后立即将其移除。

我用按钮而不是组合得到同样的东西。

我确信这确实很简单，但它却让我逃避。

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:containers="flexlib.containers.*">
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
        <fx:Style>
            @namespace s "library://ns.adobe.com/flex/spark";
            @namespace mx "library://ns.adobe.com/flex/mx";
            #myCombo
            {   
                over-skin: ClassReference("nmx.MyComboSkin");
                up-skin: ClassReference("nmx.MyComboSkin");  
                down-skin: ClassReference("nmx.MyComboSkin");
            }

        </fx:Style>
        <fx:Script>
            <![CDATA[
                [Bindable]
                public var items:Array = ["A","B","C"];
            ]]>
        </fx:Script>

        <mx:Canvas backgroundColor="#ff0000" width="726" height="165" x="20" y="41">

            <mx:ComboBox  id="myCombo" x="10" y="10" prompt="Hospital" dataProvider="{items}">

            </mx:ComboBox>

        </mx:Canvas>

    </s:Application>

皮肤定义：

    package nmx
    {
        import flash.display.GradientType;
        import flash.display.Graphics;

        import mx.skins.Border;
        import mx.skins.ProgrammaticSkin;
        import mx.skins.halo.ComboBoxArrowSkin;
        import mx.skins.halo.HaloColors;
        import mx.utils.ColorUtil;

        public class MyComboSkin extends ProgrammaticSkin
        {

                public function MyComboSkin()
                {
                    super();
                }

                override protected function updateDisplayList(w:Number, h:Number):void
                {
                    trace(name);

                    super.updateDisplayList(w, h);

                    var arrowColor:int = 0xffffff;

                    var g:Graphics = graphics;

                    g.clear();



                    // Draw the border and fill.
                    switch (name)
                    {
                        case "upSkin":
                        case "editableUpSkin":
                        {

                            g.moveTo(0,0);
                            g.lineStyle(1,arrowColor);
                            g.lineTo(w-1,0);
                            g.lineTo(w-1,h-1);
                            g.lineTo(0,h-1);
                            g.lineTo(0,0);

                        }
                        break;

                        case "overSkin":
                        case "editableOverSkin":
                        case "downSkin":
                        case "editableDownSkin":
                        {

                            // border
                            /*drawRoundRect(
                                0, 0, w, h, cr,
                                [ themeColor, themeColor ], 1);
                            */
                            g.moveTo(0,0);
                            g.lineStyle(1,arrowColor);
                            g.lineTo(w-1,0);
                            g.lineTo(w-1,h-1);
                            g.lineTo(0,h-1);
                            g.lineTo(0,0);


                            // Draw the triangle.
                            g.beginFill(arrowColor);
                            g.moveTo(w - 11.5, h / 2 + 3);
                            g.lineTo(w - 15, h / 2 - 2);
                            g.lineTo(w - 8, h / 2 - 2);
                            g.lineTo(w - 11.5, h / 2 + 3);
                            g.endFill();

                        }
                        break;  

                        case "disabledSkin":
                        case "editableDisabledSkin":
                        {


                            break;
                        }
                    }


                }
            }


    }

Answer 1

我会在你的 switch 语句中添加一个默认值，它实际上会绘制一些东西，但这看起来确实是一个奇怪的问题。仅设置：

skin: ClassReference("nmx.MyComboSkin");

有助于解决问题吗？您的皮肤本身实际上正在处理状态，因此您不需要将其分配给每个单独的状态。

Answer 2

啊哈！找到了..

因为我的皮肤只画了一个空心矩形，所以命中测试显然失败了。 IE：如果鼠标指针位于组合按钮中的文本上方，则为 Over-Skin，否则为普通的 upSkin。

添加以下内容可以修复此问题：

g.beginFill(0x0000ff,0);
g.drawRect(0,0,w,h);
g.endFill();

绘制一个完全透明的矩形（！）。