Есть ли компонент Flex, который обрезает любую графику, нарисованную за ее пределами? - PullRequest
Новая
       5

Есть ли компонент Flex, который обрезает любую графику, нарисованную за ее пределами?

2 голосов
/ 02 ноября 2011

Я использую класс graphics для объекта для рисования на BorderContainer. Некоторые рисунки не совпадают с границами компонентов, но они все еще нарисованы на экране. Есть ли способ обрезать область, нарисованную графикой?

Каков рекомендуемый компонент для рисования? Мне нужна самая простая вещь, которую я могу рисовать во Flex и иметь возможность добавлять ярлыки.

Ответы [ 3 ]

4 голосов
/ 03 ноября 2011

Если вы создаете скин BorderContainer, просто установите для clipAndEnableScrolling значение true для темы оформления. 

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        clipAndEnableScrolling="true">

    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.BorderContainer")]
    </fx:Metadata>

    <!-- states -->
    <s:states>
        <s:State name="disabled" />
        <s:State name="normal" />
    </s:states>

    <!-- SkinParts
    name=contentGroup, type=spark.components.Group, required=false
    -->
</s:Skin>

Как уже упоминалось, Group или SpriteVisualElement склонны рисовать. Кроме того, маска будет хорошей, если это необходимо.

Вам нужны Spark Labels или просто TextFields?

Может быть, создание spark.components.SkinnableContainer, к которому вы можете применять классы тем оформления, было бы идеальным?

Реализация - Skinnable Container устанавливает обложку, на которой вы рисуете, и вы помещаете содержимое MXML внутрь: 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955"
               minHeight="600"
               xmlns:local="*">

    <!-- do you drawing in the skin -->
    <local:ExampleContainer skinClass="ExampleSkin">

        <!-- apply content as needed -->
        <s:Label text="My Text" />

        <!-- etc... each instance custom content -->

    </local:ExampleContainer>

</s:Application>

Пример контейнера 

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      width="400"
                      height="300"
                      skinClass="ExampleSkin">


</s:SkinnableContainer>

Пример скина - Сделайте свой рисунок здесь 

<?xml version="1.0" encoding="utf-8"?>


<!--- The default skin class for a Spark SkinnableContainer container.  

     @see spark.components.SkinnableContainer

      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">

    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.SkinnableContainer")]
    ]]>
    </fx:Metadata> 

    <fx:Script fb:purpose="styling">
        <![CDATA[         
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                // Push backgroundColor and backgroundAlpha directly.
                // Handle undefined backgroundColor by hiding the background object.
                if (isNaN(getStyle("backgroundColor")))
                {
                    background.visible = false;
                }
                else
                {
                    background.visible = true;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>        
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <!--- Defines the appearance of the SkinnableContainer class's background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>

    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>

</s:Skin>
2 голосов
/ 03 ноября 2011

При ограничении рисования заданным регионом попробуйте использовать свойство mask (оно есть у каждого подкласса DisplayObject).Он был создан для выполнения именно того, о чем вы спрашиваете.

На самом простом IVisualElementContainer , на котором вы можете рисовать, попробуйте использовать Group .

2 голосов
/ 02 ноября 2011

Что вы можете сделать, это использовать SpriteVisualElement для рисования, установить его ширину и высоту равными 100% и поместить его в группу .Затем включите свойство группы clipAndEnableScrolling и все в порядке.Вы также можете добавить метки в качестве элементов в группу:]

Вот пример с кодом: 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx"
           creationComplete="onCreationComplete(event)">
<fx:Script>
    <![CDATA[
        import mx.controls.Label;
        import mx.events.FlexEvent;

        import spark.core.SpriteVisualElement;

        protected function onCreationComplete(event:FlexEvent):void
        {
            var spriteVisualElement:SpriteVisualElement = new SpriteVisualElement();

            spriteVisualElement.percentWidth = 100;
            spriteVisualElement.percentHeight = 100;

            spriteVisualElement.graphics.beginFill(0xFFAABB);
            spriteVisualElement.graphics.drawCircle(0, 0, 50);
            spriteVisualElement.graphics.endFill();

            myContainer.addElement(spriteVisualElement);

            var helloWorldLabel:Label = new Label();
            helloWorldLabel.text = "Hello world!";
            myContainer.addElement(helloWorldLabel);
        }

    ]]>
</fx:Script>

<fx:Declarations>
</fx:Declarations>

<s:Group id="myContainer"
         width="100"
         height="100"
         horizontalCenter="0" verticalCenter="0" 
         clipAndEnableScrolling="true"/>

</s:Application>

Надеюсь, это поможет,

Blaze

PS Самая простая вещь, которую вы можете нарисовать (насколько мне известно), это класс Sprite , но Sprite не является IVisualElement .

Из документации Flex:

Класс SpriteVisualElement представляет собой облегченную реализацию на основе Sprite реализации интерфейса IVisualElement . Контейнеры Spark могут планировать и визуализировать объекты SpriteVisualElement .

Другим решением будет попытка нарисовать то, что вы хотите, с помощью примитивов искры (s: Rect, s: Line), s: путь, s: эллипс и т. д.)

...