在 Flex 4.5 移动应用程序的项目渲染器中使用 png 蒙版时，如何使列表项选择正常工作？

Question

我正在创建一个移动应用程序，需要在其中显示顶部带有月份的日历。这些月份是从 SkinnableDataContainer 扩展的组件的一部分（并且具有一些自定义滚动/行为 - 这就是我没有使用 Spark 列表的原因）。我需要将月份显示为“梯形”形状的选项卡，因此我使用 png 图像作为组件的项目渲染器中的蒙版。

当未应用蒙版时，一切都运行良好 - 月份渲染，列表/数据容器选择在我单击月份时起作用，等等。

当应用蒙版时，它渲染得很好，滚动和其他一切似乎都运行良好 - 但当我点击一个月时，视觉上没有任何反应。从我的代码中的跟踪语句来看，列表项选择似乎没有改变。看来鼠标点击不起作用。

关于如何解决这个问题有什么想法吗？

我在这里寻找过类似的听起来类似的问题（但问相反的事情）。 （http://stackoverflow.com/questions/1741172/restrict-mouseevents-to-mask-in-flex-skin）

问候， 克里希纳

---

代码：

public class TopCalendarMonthRenderer extends LabelItemRenderer {

    [Embed(source="/assets/trapezium_alpha.png")]
    private static var TrapeziumMask:Class;
    private static var trapeziumMaskInstance:BitmapAsset;

            override protected function createChildren():void {

        super.createChildren();
        setLabelProperties();

        createMask();
    }

    private function createMask():void {

        if (!this.maskShape){

            if (!trapeziumMaskInstance){
                trapeziumMaskInstance = (new TrapeziumMask()) as BitmapAsset; 
            }

            maskShape = new Sprite();

            //maskShape.visible = false;
            //maskShape.mouseEnabled = false;

            maskShape.cacheAsBitmap = true;
            this.cacheAsBitmap = true;

            this.addChild(maskShape);
            //this.hitArea = maskShape;
        }
    }

    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void {
        //don't call the parent's draw: because we draw our own background

        var bgColor:uint = 0x555555;
        if (this.selected)
            bgColor = backgroundColor;

        var g:Graphics = this.graphics;
        g.beginFill(bgColor);
        g.drawRoundRectComplex(0, 0, unscaledWidth, unscaledHeight, 3, 3, 0, 0);
        g.endFill();

        //TODO: make the mask a hitArea - so the user can interact with it - HOW?
        drawMask();

    }

    private function drawMask():void {
        var g:Graphics = maskShape.graphics;
        var img:BitmapData = trapeziumMaskInstance.bitmapData;
        g.beginBitmapFill(img, null, false, true);
        //g.beginGradientFill(GradientType.RADIAL, [0xffffff, 0xff0000], [1, 0], [0, 255]);
        //g.beginFill(0xff0000);
        g.drawRect(0, 0, img.width, img.height);
        g.endFill();

        this.mask = maskShape;

        //this.hitArea = maskShape;
    }

}

Answer 1

我终于找到了这个：

http://aaronhardy.com/flex/displayobject-quirks-and -tips/

这解释了如何将 PNG 图像设置为 DisplayObject 上的 alpha 遮罩来中断鼠标事件。

该文章中还提供了一种解决方法 - 这对我有用:)