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

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

应该使用什么组件呢?我需要最简单的东西，我可以在Flex中绘制，并能够添加标签，以及

如果你正在为BorderContainer设置皮肤，只需在皮肤上将clipandenablesrolling设置为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或spritvisualelement是易于绘制的。此外，如果需要的话，遮罩也会很好。

你需要Spark标签还是只是TextFields?

也许创建一个spark.components. skinnableconcontainer你可以应用皮肤类将是理想的?

实现 - 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>

<<p> 例子容器/strong>
<?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"?>  <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>  <s:Rect id="background" left="0" right="0" top="0" bottom="0"> <s:fill>  <s:SolidColor id="bgFill" color="#FFFFFF"/> </s:fill> </s:Rect>   <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>

限制绘图到给定区域，尝试使用mask属性(DisplayObject的每个子类都有它)。它的创建正是为了做你所要求的。

在最简单的IVisualElementContainer上，尝试使用Group。

你能做的就是使用SpriteVisualElement来绘制，设置它的宽度和高度为100%，并把它放在组。然后启用Group的属性 clipandenablesrolling ，就可以了。您还可以将标签作为元素添加到组中:]

下面是一个示例代码:

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

希望有帮助，

火灾

注:你可以利用的最简单的东西(据我所知)是Sprite类，但Sprite不是IVisualElement。

来自Flex文档:

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

另一个解决方案是尝试用spark原语(s:Rect, s:Line, s:Path, s:Ellipse等)绘制你想要的东西

相关内容

最新更新

热门标签：