开发者

Can Rect rounded corners be different

When I use <s:Rect> to create开发者_开发问答 a rectangle, I use radiusX to get rounded corners. Problem is all are the same roundedness. Is there something similar to Rect that lets me control the radius for each corner separately? If not, what's the best way to create this from scratch? graphics library or what?


You can do this with a Rect by setting specific values for the topRightRadiusX, topLeftRadiusX, bottomRightRadiusX and bottomLeftRadiusX properties rather than setting radiusX.


        public var rectangle:Shape=new Shape();

        public var temp:int=1;

        public var ui:UIComponent=new UIComponent();
        public var i:int=new int;
        public var j:int=new int;
        public var n:int=0;

        public function init(event:Event):void
        {

            ui.addChild(rectangle);

            myCanvas.addChild(ui);
            rectangle.graphics.lineStyle(4,0x0000FF,1,false,"normal","none","bevel",9);
            rectangle.graphics.drawRoundRect(20,20,200,200,0,0);
        }


      private function changeSize():void
      {
          if(temp>=1)
          {
           rectangle.graphics.clear();
          }
          rectangle.graphics.lineStyle(4,0x0000FF,1,false,"normal","none","bevel",9);
          rectangle.graphics.drawRoundRect(20,20,200,200,hSlider.value,hSlider.value);      
      }
    ]]>
</mx:Script>

    <mx:Canvas height="100%" width="100%" id="myCanvas">
        <mx:HSlider id="hSlider" minimum="0" maximum="170" value="0"  
        dataTipPlacement="top" 
        snapInterval="1" tickInterval="1" 
        labels="['0%','100%']" 
        liveDragging="true"  
        change="changeSize();" x="25" y="233"/> 
     </mx:Canvas>


You might want to check out the StyledBox component here: http://carrythezero.net/blog/2009/06/01/flex-rounding-specific-corners-on-a-box/

It extends box and you can specify through CSS which corners you want rounded.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜