1

私は単純なキャンバスを持っています:

<mx:Canvas
    id="can"
    backgroundColor="#464343"
    x="32"
    y="33"
    width="45"
    height="60"
    cornerRadius="8"
    borderStyle="solid"
    borderThickness="0"
    click="canvas1_clickHandler(event)"
/>

有効にすると角がカットされますが、キャンバスを無効にすると、ぼやけた領域はカットコーナーの外側にサメの角があります。ボケもカットできますか？

追加情報アプリの背景は黒です - 背景が白の場合、ぼかしの色も白であるため、ぼかしは表示されません

4

1 に答える 1

1

のようなContainerクラスCanvasが無効になると、コンテナ オブジェクトの上に四角形が描画されます。cornerRadiusお気づきのとおり、この四角形はコンテナーのスタイルを考慮していません。これを修正するにはCanvas、角の半径を尊重するカスタム クラスを作成します (以下を参照)。

他のいくつかのオプションは、disabledBackgroundColorとdisabledOverlayAlphaスタイルをいじって、色とアルファを設定して、この問題の影響が目立たないようにすることです。

CustomCanvasクラスの動作をオーバーライドしContainer、通常の長方形ではなく角丸長方形を描画するクラスを次に示します。以下のコードは、元の方法からコピーして貼り付けたもので、角丸四角形を描画するようにわずかに変更されています。

package
{
    import mx.containers.Canvas;
    import mx.core.EdgeMetrics;
    import mx.core.mx_internal;

    use namespace mx_internal;

    public class CustomCanvas extends Canvas
    {
        public function CustomCanvas()
        {
            super();
        }

        override public function validateDisplayList():void
        {
            super.validateDisplayList();
            if (blocker)
            {
                var vm:EdgeMetrics = viewMetrics;

                var bgColor:Object = enabled ?
                    null :
                    getStyle("backgroundDisabledColor");
                if (bgColor === null || isNaN(Number(bgColor)))
                    bgColor = getStyle("backgroundColor");

                if (bgColor === null || isNaN(Number(bgColor)))
                    bgColor = 0xFFFFFF;

                var blockerAlpha:Number = getStyle("disabledOverlayAlpha");

                if (isNaN(blockerAlpha))
                    blockerAlpha = 0.6;

                blocker.x = vm.left;
                blocker.y = vm.top;

                var widthToBlock:Number = unscaledWidth - (vm.left + vm.right);
                var heightToBlock:Number = unscaledHeight - (vm.top + vm.bottom);

                blocker.graphics.clear();
                blocker.graphics.beginFill(uint(bgColor), blockerAlpha);
                // multiply *2 because that's what Container::fillOverlay() does                
                var radius:Number = getStyle("cornerRadius")*2;
                blocker.graphics.drawRoundRect(0,0,widthToBlock, heightToBlock, radius, radius);
                blocker.graphics.endFill();

                // Blocker must be in front of everything
                rawChildren.setChildIndex(blocker, rawChildren.numChildren - 1);
            }
        }
    }
}
于 2013-05-10T21:06:50.933 に答える