Degrafa：GraphicBorderSkin不能作爲畫布背景使用：borderSkin：ClassReference

Question

Degrafa newbie here :-)。

我能夠通過「com.degrafa.skins.CSSSkin」創建線性漸變背景。現在我進入更先進的東西，因爲我試圖找出徑向漸變...

我想通過觀看Flex-skinning-with-degrafa-screencast，但我的代碼不適合我，我得到了白色背景帆布。

這裏是我的代碼至今：

我有延伸帆布和具有ThreeWayGradient將StyleName一個MXML組件ThreeWayGrad.mxml：

<?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，它可以工作。無論如何，我敢肯定我錯過了一些簡單的事情，並提前致謝！

Answer 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的佈局支持來指定的另一種方法 - 請參閱佈局驅動示例的註釋標記「Alternative」。

併爲畫布，你需要指定的寬度和高度設置爲它畫：

<mx:Canvas 
    xmlns:mx="http://www.adobe.com/2006/mxml" width="50%" height="50%" 
    styleName="ThreeWayGradient"/>