当前位置：文江博客话题详情

是否有一个 Flex 组件可以剪辑在其边界之外绘制的任何图形？

发布于 2024-12-13 09:45:06 字数 159 浏览 0 评论 0原文

我使用 graphics 类来对象在 BorderContainer 上绘制。有些绘图脱离了组件边界，但它们仍然绘制在屏幕上。有什么办法可以裁剪图形绘制的区域吗？

无论如何，推荐使用的组件是什么？我需要可以在 Flex 中使用的最简单的东西，并且还能够添加标签。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉殇 2024-12-20 09:45:06

如果您要对 BorderContainer 进行换肤，只需在 Skin 上将 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 标签还是只需要 TextFields？

也许创建一个可以应用皮肤类的spark.components.SkinnableContainer会是理想的选择吗？

实现 - 可换肤容器设置您在其上绘图的皮肤，并将 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>

If you're skinning the BorderContainer, just set clipAndEnableScrolling to true on the Skin.

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

As mentioned, Group or SpriteVisualElement are lean to draw on. Also, a mask would be good if needed.

Do you need Spark Labels or just TextFields?

Maybe creating a spark.components.SkinnableContainer you can apply skin classes would be ideal?

Implementation - Skinnable Container sets the skin you draw on, and you place your MXML content inside:

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

Example Container

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

Example Skin - Do your drawing here

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

回复收藏 0 原文

半城柳色半声笛 2024-12-20 09:45:06

将绘图限制在给定区域时，请尝试使用 mask 属性（DisplayObject 的每个子类都有它）。它的创建正是为了满足您的要求。

在您可以利用的最简单的IVisualElementContainer上，尝试使用组。

回复收藏 0 原文

失与倦＂ 2024-12-20 09:45:06

您可以做的是使用 SpriteVisualElement 进行绘制，将其宽度和高度设置为 100% 并将其放入 Group 中。然后启用 Group 的属性 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

P.S.您可以利用的最简单的东西（据我所知）是 Sprite 类，但 Sprite 不是 IVisualElement。

来自 Flex 文档：

SpriteVisualElement 类是 IVisualElement 接口的一个基于 Sprite 的轻量级实现。 Spark 容器可以布局和渲染 SpriteVisualElement 对象。

另一种解决方案是尝试使用 Spark 基元（s:Rect、s:Line、s:Path）绘制您想要的内容, s:椭圆等）

What you can do is use SpriteVisualElement to draw to, set it's width and height to 100% and put it in a Group. Then enable the Group's property clipAndEnableScrolling and you're all good. You can also add Labels as elements to the group :]

Here is an example with code:

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

Hope this helps,

Blaze

P.S. The most simple thing you can draw on (as far as I know) is the Sprite class but Sprite is not IVisualElement.

From the Flex documentation:

The SpriteVisualElement class is a light-weight Sprite-based implemention of the IVisualElement interface. Spark containers can lay out and render SpriteVisualElement objects.

Another solution would be to try and draw the things you want to with the spark primitives (s:Rect, s:Line, s:Path, s:Ellipse, etc.)

回复收藏 0 原文

~没有更多了~