有没有办法使用位图填充作为矩形的笔触？答案

【问题标题】：Is there a way to use a bitmap fill as the stroke of a rectangle?有没有办法使用位图填充作为矩形的笔触？
【发布时间】：2017-03-01 09:04:54
【问题描述】：

使用 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>

看起来像这样：

有没有办法为边框笔划定义位图填充（并且中心是透明的）？

【问题讨论】：

我会使用带有两个矩形的“假”边框，背景一个正常填充透明边框，内部和前景矩形填充白色透明边框。
我赞同@Vesper 的建议。在 Flex 之外，我会制作两个矩形，一个是位图填充的，另一个（轮廓）用作位图的蒙版。这将给出仅具有位图填充的边框的视觉效果（因为填充仅通过轮廓显示）。
嗯，掩码是更好的方法，因为掩码不会被绘制。不错的@VC.One
@Vesper 我遇到的一个问题是笔划位于矩形边缘的顶部。我找不到指定位置的方法，所以我最终使用了掩码。

标签： actionscript-3 flash apache-flex flex4 fxg

【解决方案1】：

根据建议回答。由于我试图创建虚线边框，因此添加了一些内容：

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

【讨论】：