flex 4.5 둥근 측면 버튼

Question

나는 flex가있어서 새로운 버튼 스킨을 바꾸는 방법을 발견했다. 나는 버튼 모서리의 문제를 해결하지 못했다. 난 버튼의 왼쪽과 오른쪽이 반 타원처럼 둥글게하고 싶을뿐입니다. 또한 단추의 크기를 변경하면 단추의 스타일이 그대로 유지됩니다 (단추의 왼쪽과 오른쪽은 원하는 크기로 원처럼 둥글게됩니다). 너 나 좀 도와 줄 수있어?

Answer 1

실제로 스킨을 재정의 할 필요는 없습니다. 당신은 지금처럼 "CornerRadius를"속성을 사용할 수 있습니다

<s:Button cornerRadius="{funButton.height/2}" id="funButton" label="SO Round!"/> 

Answer 2

사용이 당신의 버튼 피부의 부모 요소로. 평평한 회색 경계선없는 사각형으로 나타납니다. 내부에 추가 한 항목은 모서리가 둥근 버튼의 일부로 나타납니다. cornerRadius를 단추의 크기/높이에 맞게 조정하십시오.

<s:BorderContainer height="100%" width="100%" 
    backgroundColor="#DDDDDD" borderColor="#DDDDDD" 
    cornerRadius="10" 
    > 
    <s:layout><s:BasicLayout /></s:layout> 
</s:BorderContainer> 

Answer 3

내 앱용으로 만들려고했습니다. 라벨이 정렬되지 않은 것 같습니다.

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark"> 
    <!-- host component --> 
    <fx:Metadata> 
     [HostComponent("spark.components.Button")] 
    </fx:Metadata> 

    <!-- states --> 
    <s:states> 
     <s:State name="disabled" /> 
     <s:State name="down" /> 
     <s:State name="over" /> 
     <s:State name="up" /> 
    </s:states> 

    <s:Group height="100%" width="100%" verticalCenter="0"> 
     <s:Ellipse height="100%" width="100%" > 
      <s:fill> 
       <s:LinearGradient rotation="90" scaleX.disabled="-65"> 
        <s:GradientEntry color="0x999999" color.up="0x666666" color.disabled="0xFFFFFF" ratio.disabled="0"/> 
        <s:GradientEntry color="0x828282" color.up="0x333333" color.disabled="0x828282" ratio.disabled="1"/> 
        <s:GradientEntry color="0x999999" color.up="0x666666" color.disabled="0xFFFFFF" ratio.disabled="0"/> 
       </s:LinearGradient> 
      </s:fill> 
      <s:stroke> 
       <s:SolidColorStroke weight="5" caps="none" joints="miter" miterLimit="10" color="#FFFFFF"/> 
      </s:stroke> 
      <s:filters> 
       <s:DropShadowFilter distance="1" angle="90" blurX="6" blurY="6" alpha="0.75"/> 
      </s:filters> 
     </s:Ellipse> 

     <s:Label id="labelDisplay" verticalCenter="0" color="#FFFFFF" horizontalCenter="0" width="70%" textAlign="center"> 
     </s:Label>  
    </s:Group> 
</s:SparkButtonSkin>