我正在使用graphics类来对象在BorderContainer上绘图。一些图纸从组件边框脱落，但它们仍然在屏幕上绘制。有没有办法剪辑用图形绘制的区域？
无论如何，推荐的组件是什么？我需要能够在Flex中绘制的最简单的东西，并且能够添加标签。
答案 0 :(得分：4)
如果要为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你可以应用皮肤类是理想的吗？
实施 - 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>
答案 1 :(得分：2)
您可以使用 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>
希望这有帮助，
火焰
P.S。您可以使用的最简单的事情（据我所知）是 Sprite 类，但Sprite不是 IVisualElement 。
来自Flex文档：
SpriteVisualElement 类是一个基于Sprite的轻量级实现的IVisualElement 接口。 Spark容器可以布局并呈现SpriteVisualElement 对象。
另一种解决方案是尝试使用spark基元（s：Rect，s：Line，s：Path，s：Ellipse等）来绘制你想要的东西。
答案 2 :(得分：2)