0

Degrafa 新手在这里:-)。

我能够获得“com.degrafa.skins.CSSSkin”来创建线性渐变背景。现在我正在研究更高级的东西，因为我试图找出径向渐变......

我通过观看Flex-skinning-with-degrafa-screencast发现了这一点，但我的代码对我不起作用，而且我的画布上出现了白色背景。

这是我到目前为止的代码：

我有一个 MXML 组件 ThreeWayGrad.mxml，它扩展了 Canvas 并具有 ThreeWayGradient 的 styleName：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    styleName="ThreeWayGradient"/>

我有一个 ThreeWayGradient 的 CSS 样式条目，带有 RadialGradient 类的皮肤标签： 

Canvas.ThreeWayGradient 
{
    borderSkin: ClassReference("assets.skins.RadialGradient");
}

最后是 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 将此代码复制到一个新的应用程序中，并且它可以工作。无论如何，我确定我错过了一些简单的东西，提前谢谢！！！

4

1 回答 1

1

您应该能够使用这样的皮肤代码（skinWidth 和 skinHeight 在 GraphicBorderSkin 中公开，因此您不需要覆盖 updateDisplayList 并为宽度和高度指定额外的局部变量）：

<?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>

在这种情况下，您不需要包含 RegularRectangle 的 GeometryComposition。我还与 Jason Hawryluk（Degrafa 架构师）讨论了这个问题，他指出了通过 Geometry 的布局支持指定的替代方法 - 请参阅布局驱动示例的注释标记“替代”。

对于 Canvas，您需要指定宽度和高度设置以供绘制：

<mx:Canvas 
    xmlns:mx="http://www.adobe.com/2006/mxml" width="50%" height="50%"
    styleName="ThreeWayGradient"/>
于 2009-09-21T22:32:14.130 回答