[英]Corner radius in Adobe Air application
How can we make rounded corners on the vbox control in the Air application? 我们如何在Air应用程序的vbox控件上制作圆角?
I am hiding the header and setting transparent to true, but then it does not show me rounded corners on the VBox in the application. 我隐藏了标题并将透明设置为true,但是然后它没有在应用程序的VBox上显示圆角。 I am showing this VBox to the user. 我正在向用户显示此VBox。
Thanks in advance. 提前致谢。
You can do this by implementing a custom Border: 您可以通过实现自定义边框来做到这一点:
package your.package
{
import flash.display.*;
import flash.geom.*;
import flash.utils.*;
import mx.skins.halo.HaloBorder;
import mx.utils.GraphicsUtil;
public class RoundedBorder extends HaloBorder
{
private var topCornerRadius:Number;
private var bottomCornerRadius:Number;
private var setup:Boolean;
/**
* Get the CSS style attributes from the element to which to apply this
* gradient.
*/
private function readElementCssStyles():void
{
topCornerRadius = getStyle("cornerRadius") as Number;
if (!topCornerRadius)
{
topCornerRadius = 0;
}
bottomCornerRadius = getStyle("bottomCornerRadius") as Number;
if (!bottomCornerRadius)
{
bottomCornerRadius = topCornerRadius;
}
}
/**
* Paint the gradient background.
*
* @param unscaledWidth
* @param unscaledHeight
*
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var rectWidth:Number
= unscaledWidth - this.borderMetrics.left - this.borderMetrics.right;
var rectHeight:Number
= unscaledHeight - this.borderMetrics.top - this.borderMetrics.bottom;
readElementCssStyles();
var topRadius:Number = Math.max(topCornerRadius-2, 0);
var bottomRadius:Number = Math.max(bottomCornerRadius-2, 0);
GraphicsUtil.drawRoundRectComplex(this.graphics,
this.borderMetrics.left,
this.borderMetrics.top,
rectWidth,
rectHeight,
topRadius,
topRadius,
bottomRadius,
bottomRadius);
}
}
}
Then in your MXML application you have to define a CSS class for your VBox like this: 然后,在MXML应用程序中,您必须为VBox定义CSS类,如下所示:
<mx:Style>
.roundedBorder
{
border-style:solid;
border-thickness: 1;
border-skin: ClassReference("your.package.RoundedBorder");
corner-radius: 5;
}
</mx:Style>
I have ripped this code out of a more complex class. 我已将此代码从更复杂的类中剔除。 Hope I did not forgot anything and that it will work as posted. 希望我没有忘记任何东西,希望它能如期发布。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.