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

问题描述

| 我正在创建一个移动应用程序，在该应用程序中，我需要显示一个日历，顶部显示几个月的时间。几个月是从SkinnableDataContainer扩展的组件的一部分（并具有一些自定义滚动/行为-这就是为什么我不使用启动列表的原因）。我需要将月份显示为“梯形”形状的标签，因此我在组件的项目渲染器中使用png图像作为蒙版。 如果未应用遮罩，则一切正常-渲染月份，单击月，依此类推，列表/数据容器选择有效。 应用遮罩后，它可以很好地渲染，滚动以及其他所有内容都可以正常工作-但是当我单击一个月时，视觉上没有任何反应。从我代码中的trace语句来看，列表项的选择似乎没有改变。看起来鼠标单击不起作用。 有想法该怎么解决这个吗？ 我在SO上寻找类似的发音问题（但提出相反的问题）。 （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,unscaledWidth,unscaledHeight,3,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,img.width,img.height);
        g.endFill();

        this.mask = maskShape;

        //this.hitArea = maskShape;
    }

}     

解决方法

        我终于找到了这个： http://aaronhardy.com/flex/displayobject-quirks-and-tips/ 这说明了在DisplayObject上将PNG图像设置为Alpha蒙版如何破坏鼠标事件。 该文章还提供了解决方法-对我有用：)