Question

我正在创建一个移动应用，我需要在其中显示几个月的日历。这些月份是从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, 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/

这解释了如何在DisplayObject上将PNG图像设置为alpha蒙版会破坏鼠标事件。

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

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

1 个答案: