有没有办法使用位图填充作为矩形的描边?
Is there a way to use a bitmap fill as the stroke of a rectangle?
使用 Rect 基元,您可以使用像 so 这样的位图数据定义填充。
<!-- Draw rectangle that is filled with a repeating bitmap. -->
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:BitmapFill
source="@Embed('../assets/AirIcon12x12.gif')"
fillMode="repeat"/>
</s:fill>
</s:Rect>
看起来像这样:
有没有办法为边框描边(并且中心是透明的)设置定义位图填充?
根据建议回答。由于我试图创建虚线边框,因此添加了一些内容:
<?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"
mouseMove="application1_mouseMoveHandler(event)"
click="application1_clickHandler(event)">
<fx:Script>
<![CDATA[
protected function application1_mouseMoveHandler(event:MouseEvent):void
{
if (resize) {
mainGroupRect.width = event.stageX - mainGroup.x;
mainGroupRect.height= event.stageY - mainGroup.y;
}
}
protected function application1_clickHandler(event:MouseEvent):void
{
resize = !resize;
application1_mouseMoveHandler(event);
}
public var resize:Boolean;
]]>
</fx:Script>
<s:Button id="button" label="hello" width="100%" height="100%" visible="true" />
<s:Group id="mainGroup" verticalCenter="0" horizontalCenter="0" maskType="alpha" mask="{rectMask.displayObject}">
<s:Rect id="mainGroupRect" height="100" width="200" >
<s:fill>
<s:BitmapFill source="@Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
<s:Rect id="rectMask" top="0" left="0" right="1" bottom="1"
alwaysCreateDisplayObject="true" alpha=".9999999">
<s:stroke>
<s:SolidColorStroke color="0xFF0000" pixelHinting="true"/>
</s:stroke>
</s:Rect>
<s:Rect id="rightEdge" height="100%" width="1" right="1" bottom="1">
<s:fill>
<s:BitmapFill source="@Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
<s:Rect id="bottomEdge" height="1" width="100%" right="1" bottom="1">
<s:fill>
<s:BitmapFill source="@Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
</s:Group>
</s:Application>
填充图像如下所示(它显示为一个点。它是一个 4x4 图像 png,图像的一半是透明的。因此在这些图像上使用了额外的填充。
这将创建一个虚线边框。由于有透明像素,它有时不会填充右侧或底部的图像。所以有两个额外的填充 运行 沿右边缘和下边缘。
在上面的示例中,单击舞台可以调整填充大小。
您也可以将 rectMask 包裹在一个组中,然后您只需设置 mask="{rectMask}"
使用 Rect 基元,您可以使用像 so 这样的位图数据定义填充。
<!-- Draw rectangle that is filled with a repeating bitmap. -->
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:BitmapFill
source="@Embed('../assets/AirIcon12x12.gif')"
fillMode="repeat"/>
</s:fill>
</s:Rect>
看起来像这样:
有没有办法为边框描边(并且中心是透明的)设置定义位图填充?
根据建议回答。由于我试图创建虚线边框,因此添加了一些内容:
<?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"
mouseMove="application1_mouseMoveHandler(event)"
click="application1_clickHandler(event)">
<fx:Script>
<![CDATA[
protected function application1_mouseMoveHandler(event:MouseEvent):void
{
if (resize) {
mainGroupRect.width = event.stageX - mainGroup.x;
mainGroupRect.height= event.stageY - mainGroup.y;
}
}
protected function application1_clickHandler(event:MouseEvent):void
{
resize = !resize;
application1_mouseMoveHandler(event);
}
public var resize:Boolean;
]]>
</fx:Script>
<s:Button id="button" label="hello" width="100%" height="100%" visible="true" />
<s:Group id="mainGroup" verticalCenter="0" horizontalCenter="0" maskType="alpha" mask="{rectMask.displayObject}">
<s:Rect id="mainGroupRect" height="100" width="200" >
<s:fill>
<s:BitmapFill source="@Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
<s:Rect id="rectMask" top="0" left="0" right="1" bottom="1"
alwaysCreateDisplayObject="true" alpha=".9999999">
<s:stroke>
<s:SolidColorStroke color="0xFF0000" pixelHinting="true"/>
</s:stroke>
</s:Rect>
<s:Rect id="rightEdge" height="100%" width="1" right="1" bottom="1">
<s:fill>
<s:BitmapFill source="@Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
<s:Rect id="bottomEdge" height="1" width="100%" right="1" bottom="1">
<s:fill>
<s:BitmapFill source="@Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
</s:Group>
</s:Application>
填充图像如下所示(它显示为一个点。它是一个 4x4 图像 png,图像的一半是透明的。因此在这些图像上使用了额外的填充。
这将创建一个虚线边框。由于有透明像素,它有时不会填充右侧或底部的图像。所以有两个额外的填充 运行 沿右边缘和下边缘。
在上面的示例中,单击舞台可以调整填充大小。
您也可以将 rectMask 包裹在一个组中,然后您只需设置 mask="{rectMask}"