Degrafa: GraphicBorderSkin не работает как фон холста через: borderSkin: ClassReference - PullRequest
Новая
       20

Degrafa: GraphicBorderSkin не работает как фон холста через: borderSkin: ClassReference

0 голосов
/ 21 сентября 2009

Новичок Деграфа здесь :-).

Мне удалось получить "com.degrafa.skins.CSSSkin" для создания линейных градиентных фонов. Теперь я перехожу к более сложным вещам, пытаясь выяснить радиальные градиенты ...

Я понял это, просмотрев Flex-skinning-with-degrafa-screencast , но мой код не работает для меня, и я получаю белый фон на холсте.

Вот код, который у меня есть:

У меня есть MXML-компонент ThreeWayGrad.mxml, который расширяет Canvas и имеет styleName для ThreeWayGradient: 

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

У меня есть запись в стиле CSS для ThreeWayGradient с тегом скина для класса 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, и это работает. В любом случае, я уверен, что упускаю что-то простое и заранее спасибо !!!

1 Ответ

1 голос
/ 22 сентября 2009

Вы должны иметь возможность использовать код скина, подобный этому (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>

В этом случае вам не требуется GeometryComposition, включающий RegularRectangle. Я также обсуждал это с Джейсоном Хаврилюком (архитектором Degrafa), и он указал на альтернативный способ указания с помощью поддержки макетов Geometry - см. Прокомментированную разметку «Альтернатива» для примера с макетом.

А для Canvas вам нужно указать ширину и высоту для рисования: 

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