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.
精彩评论