Flex 4 - 如何绘制形状以用作 ButtonBarButton 的外观
我正在使用 Flash Builder 4 并且正在学习。
简短的解释是,我想要一个选项卡导航器,其选项卡如下所示:
我知道我可以使用基于图像的皮肤来做到这一点,但我认为(可能是错误的)以编程方式绘制形状会变得更好在可扩展性方面。
只要我得到我想要的结果,我想我并不真正关心它是 mx 还是 Spark。我尝试这样做:
Main App:
<mx:ButtonBar dataProvider="{vsTabNav}" firstButtonStyle="firstButtonStyle"/>
CSS File:
.firstButtonStyle { skinClass:ClassReference("assets.skins.ButtonBarFirstButtonSkin"); }
ButtonBarFirstButtonSkin.as:
package assets.skins
{
import flash.display.Graphics;
import mx.skins.halo.ButtonBarButtonSkin;
import mx.graphics.RectangularDropShadow;
public class ButtonBarFirstButtonSkin extends ButtonBarButtonSkin
{
private var dropShadow:RectangularDropShadow;
public function ButtonBarFirstButtonSkin()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var cornerRadius:Number = getStyle("cornerRadius");
var backgroundColor:int = getStyle("backgroundColor");
var backgroundAlpha:Number = getStyle("backgroundAlpha");
graphics.clear();
cornerRadius = 10;
backgroundColor = 0xFF0000;
backgroundAlpha = 1;
// Background
drawRoundRect(0, 0, unscaledWidth, unscaledHeight, {tl:1, tr:cornerRadius, bl:1, br:1}, backgroundColor, backgroundAlpha);
// Shadow
if (!dropShadow)
dropShadow = new RectangularDropShadow();
dropShadow.distance = 8;
dropShadow.angle = 45;
dropShadow.color = 0;
dropShadow.alpha = 0.4;
dropShadow.tlRadius = 1;
dropShadow.trRadius = cornerRadius;
dropShadow.blRadius = 1;
dropShadow.brRadius = 1;
dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);
}
}
}
这应该意味着第一个按钮将是红色的,并且右上角有一个非常圆的角。相反,我只得到默认按钮。不确定我在那里做错了什么,但如果这不是最好的解决方案,我希望得到一些帮助。谢谢!
I'm using Flash Builder 4 and am in the process of learning.
The short and simple explanation is, I want a tab navigator that has tabs that look like this:
I know I could do this using an image-based skin, but I figured (and could be wrong) that programmatically drawing the shape would be better in terms of scalability.
As long as I get the result I'm looking for, I guess I don't really care if it's mx or spark. I tried doing this:
Main App:
<mx:ButtonBar dataProvider="{vsTabNav}" firstButtonStyle="firstButtonStyle"/>
CSS File:
.firstButtonStyle { skinClass:ClassReference("assets.skins.ButtonBarFirstButtonSkin"); }
ButtonBarFirstButtonSkin.as:
package assets.skins
{
import flash.display.Graphics;
import mx.skins.halo.ButtonBarButtonSkin;
import mx.graphics.RectangularDropShadow;
public class ButtonBarFirstButtonSkin extends ButtonBarButtonSkin
{
private var dropShadow:RectangularDropShadow;
public function ButtonBarFirstButtonSkin()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var cornerRadius:Number = getStyle("cornerRadius");
var backgroundColor:int = getStyle("backgroundColor");
var backgroundAlpha:Number = getStyle("backgroundAlpha");
graphics.clear();
cornerRadius = 10;
backgroundColor = 0xFF0000;
backgroundAlpha = 1;
// Background
drawRoundRect(0, 0, unscaledWidth, unscaledHeight, {tl:1, tr:cornerRadius, bl:1, br:1}, backgroundColor, backgroundAlpha);
// Shadow
if (!dropShadow)
dropShadow = new RectangularDropShadow();
dropShadow.distance = 8;
dropShadow.angle = 45;
dropShadow.color = 0;
dropShadow.alpha = 0.4;
dropShadow.tlRadius = 1;
dropShadow.trRadius = cornerRadius;
dropShadow.blRadius = 1;
dropShadow.brRadius = 1;
dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);
}
}
}
This should mean that the first button will be red and will have a very round top-right corner. Instead, I just get the default button. Not sure what I'm doing wrong there, but if that's not the best solution, I would love some help. Thanks!
首先,看看 http://www.adobe.com/devnet/flex /articles/flex4_skinning.html
然后,您应该意识到,最好为 ButtonBarButtons 创建第一个皮肤,并确保您的按钮栏将它们用于其按钮。
此外,您还可以使用 Path 类创建形状。以下是创建与您的形状相似的形状的示例:
更新:
如果需要缩放,可以将 Path 元素放入 Graphic 元素中,并设置其 scaleGrid 属性:
First, have a look at http://www.adobe.com/devnet/flex/articles/flex4_skinning.html
Then, you should realize, you'll be better off creating first skins for your ButtonBarButtons and make sure your button bar uses them for its buttons.
Also, you can create the shapes with the Path class. Following is an example that creates similar shapes to yours:
UPDATE:
If you want scaling, you can put the Path element into a Graphic element, and setup its scaleGrid properties: