Question

我有一个简单的画布：

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

启用时会切角但是当画布被禁用时，模糊区域与切角之外的鲨鱼角有关。是否有可能减少模糊？

其他信息应用背景为黑色 - 白色背景模糊不可见，因为模糊颜色也是白色

Answer 1

当禁用Container类Canvas时，会在容器对象的顶部绘制一个矩形。正如您所注意到的，此矩形不符合容器的cornerRadius样式。要更正此问题，您可以制作一个符合角半径的自定义Canvas课程（见下文）。

其他一些选项是调整disabledBackgroundColor和disabledOverlayAlpha样式，设置颜色和alpha，这样这个问题的效果就不那么明显了。

这是一个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);
            }
        }
    }
}

禁用画布具有与启用不同的形状

1 个答案: