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

When a Container class like Canvas is disabled, a rectangle is drawn on top of the container object. As you've noticed, this rectangle doesn't respect the cornerRadius style of the container. To correct this, you can make a custom Canvas class that will honor the corner radius (see below).

Some other options are to fiddle with the disabledBackgroundColor and disabledOverlayAlpha styles, to set a color and alpha so the effect of this problem is less noticeable.

Here's a CustomCanvas class that overrides the behavior in the Container class and draws it's a rounded rectangle instead of a regular one. The code below is a copy and paste from the original method, w/a slight modification to draw the rounded rectangle.

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 回答