2013-05-10 3 views
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)" 
/> 

, когда он включен углы срезают но при отключении Холст размыли зона с акулами углами вне срезанными углами. Можно ли разрезать размытие?

дополнительный фон информация приложение черный - с белым фоном размытие не видно, потому что размытие белого цвета, а

ответ

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); 
      } 
     } 
    } 
} 
+0

спасибо, что решение работает точно так же, как я хочу –