Apache flex Degraffa:GraphicBorderSkin不作为画布背景通过:borderSkin:ClassReference
Degrafa新手在这里:-) 我能够得到“com.degrafa.skins.CSSSkin”来创建线性渐变背景。现在我进入了更高级的领域,我试图计算出径向梯度 我通过观看了解到这一点,但我的代码对我来说不起作用,我的画布上有一个白色背景 以下是我目前掌握的代码: 我有一个MXML组件ThreeWayGrad.MXML,它扩展了Canvas,并具有ThreeWayGradient的样式名:Apache flex Degraffa:GraphicBorderSkin不作为画布背景通过:borderSkin:ClassReference,apache-flex,degrafa,Apache Flex,Degrafa,Degrafa新手在这里:-) 我能够得到“com.degrafa.skins.CSSSkin”来创建线性渐变背景。现在我进入了更高级的领域,我试图计算出径向梯度 我通过观看了解到这一点,但我的代码对我来说不起作用,我的画布上有一个白色背景 以下是我目前掌握的代码: 我有一个MXML组件ThreeWayGrad.MXML,它扩展了Canvas,并具有ThreeWayGradient的样式名: <?xml version="1.0" encoding="utf-8"?> <mx:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
styleName="ThreeWayGradient"/>
最后是RadialGradient.mxml组件:
<?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://www.degrafa.com/2007">
<mx:Script>
<![CDATA[
[Bindable] private var _height:Number = 0;
[Bindable] private var _width:Number = 0;
override protected
function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
_height = h;
_width = w;
trace("INFO: displaylist updated --" + _height + " : " + _width );
}
]]>
</mx:Script>
<strokes>
<SolidStroke id="mainStroke" color="#333333" weight="3"/>
</strokes>
<fills>
<RadialGradientFill
id="blueGradient"
angle="45"
focalPointRatio="0">
<GradientStop
alpha="1"
ratio=".25"
color="#ffffff"/>
<GradientStop
alpha="1"
ratio=".70"
color="#003355"/>
<GradientStop
alpha="1"
ratio="1"
color="#111111"/>
</RadialGradientFill>
</fills>
<!-- Creating the background -->
<geometry>
<GeometryComposition>
<!-- Creating a Rectangle to draw the gradient to and
moving the center of the gradient to the lower left corner -->
<RegularRectangle
fill="{blueGradient}"
stroke="{mainStroke}"
height="{_height}"
width="{_width}"
/>
</GeometryComposition>
</geometry>
</GraphicBorderSkin>
有人知道为什么这样不行吗?我看到了大小正确的跟踪输出,因此我知道该类正在被调用
我还将这段代码复制到一个新的应用程序中,使用了一个Surface而不是GraphicBorderSkin元素,使用GeometryGroup而不是GeometryComposition,它可以工作。无论如何,我肯定我错过了一些简单的东西,提前感谢 您应该能够像这样使用皮肤代码(skinWidth和skinHeight在GraphicBorderSkin中公开,因此您不需要覆盖updateDisplayList并为宽度和高度指定其他局部变量):
在这种情况下,您不需要包含规则矩形的GeometryComposition。我还与Jason Hawryluk(Degrafa架构师)讨论了这一点,他指出了通过几何图形的布局支持进行指定的替代方法-请参阅布局驱动示例中注释的标记“alternative”
对于画布,您需要指定要绘制的宽度和高度设置:
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml" width="50%" height="50%"
styleName="ThreeWayGradient"/>
<?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://www.degrafa.com/2007">
<strokes>
<SolidStroke id="mainStroke" color="#333333" weight="3"/>
</strokes>
<fills>
<RadialGradientFill
id="blueGradient"
angle="0"
focalPointRatio="0">
<GradientStop
alpha="1"
ratio=".25"
color="#ffffff"/>
<GradientStop
alpha="1"
ratio=".70"
color="#003355"/>
<GradientStop
alpha="1"
ratio="1"
color="#111111"/>
</RadialGradientFill>
</fills>
<!-- Creating the background -->
<geometry>
<!-- Creating a Rectangle to draw the gradient to and
moving the center of the gradient to the lower left corner -->
<RegularRectangle id="rect"
fill="{blueGradient}"
stroke="{mainStroke}"
height="{skinHeight}"
width="{skinWidth}"
/>
<!-- Alernative: <RegularRectangle fill="{blueGradient}" stroke="{mainStroke}" height="100%" width="100%"/> -->
</geometry>
</GraphicBorderSkin>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml" width="50%" height="50%"
styleName="ThreeWayGradient"/>