Question

我有以下标记：

<s:Group width="100%" height="100%"> 
    <s:BorderContainer borderWeight="3" borderColor="black" cornerRadius="5" width="100%" height="100%">
        <s:Path> 
            <s:stroke>
                <s:SolidColorStroke color="black" />
            </s:stroke>
            <s:data>M 14.153 14.788 C 13.856 15.25 13.161 15.628 12.612 15.628 L 0.766 15.628 C 0.216 15.628 -0.028 15.228 0.225 14.739 L 3.307 8.765 C 3.56 8.276 3.56 7.477 3.307 6.988 L 0.225 1.014 C -0.028 0.525 0.216 0.125 0.766 0.125 L 12.612 0.125 C 13.161 0.125 13.856 0.503 14.153 0.965 L 18.07 7.036 C 18.367 7.499 18.367 8.254 18.07 8.717 L 14.153 14.788 Z</s:data>
        </s:Path>
    </s:BorderContainer>
</s:Group>

我希望此容器中的路径根据容器调整大小。在SVG和Silverlight中，有“ViewBox”的概念，但我在Flex中找不到这个概念。

将宽度和高度设置为100％有效，但是当你有很多路径时需要大量的修补。此外，它的行为与您想要的完全不同（尝试并调整浏览器大小）

Answer 1

您想要以恒定的宽高比缩放路径吗？我设法做到了这样：

<s:BorderContainer id="container"
   borderWeight="3" borderColor="black" cornerRadius="5"
   width="100%" height="100%">
   <s:Path
       width="{Math.min(container.width - 10, container.height - 10)}"
       height="{Math.min(container.width - 10, container.height - 10)}">

它更加修补，但它可以在运行时将属性绑定到这样的函数。

编辑：

我不想要恒定的方面比。我希望它随着成长而成长容器

然后你可以写这样的东西（没有经过精确测试）：

for each (var child:DisplayObject in container.children) {
    if (child is Path) {
        child.percentWidth = child.percentHeight = 100;
    }
}

在应用程序init上运行此命令，路径将缩放到容器（但不在设计模式下）。

Answer 2

我找到了我要找的东西。 AutoFitArea完全符合我的要求：

http://www.greensock.com/autofitarea/

Answer 3

您可以将路径包装在 s：Group 中并设置resizeMode（FYI，这与仅包装 s：Graphic 中的路径相同）：

<s:BorderContainer borderWeight="1" borderColor="black" cornerRadius="5" width="100%" height="100%" >
        <s:Group width="100%" height="100%" resizeMode="scale">
            <s:Path> 
                <s:stroke>
                    <s:SolidColorStroke color="black" scaleMode="none" />
                </s:stroke>
                <s:data>M 14.153 14.788 C 13.856 15.25 13.161 15.628 12.612 15.628 L 0.766 15.628 C 0.216 15.628 -0.028 15.228 0.225 14.739 L 3.307 8.765 C 3.56 8.276 3.56 7.477 3.307 6.988 L 0.225 1.014 C -0.028 0.525 0.216 0.125 0.766 0.125 L 12.612 0.125 C 13.161 0.125 13.856 0.503 14.153 0.965 L 18.07 7.036 C 18.367 7.499 18.367 8.254 18.07 8.717 L 14.153 14.788 Z</s:data>
            </s:Path>
        </s:Group>
    </s:BorderContainer>

笔划上的scaleMode会检查线条重量是否正是您要查找的内容。

我不确定为什么路径仍然在右侧和底部显示一些填充但是它设置路径宽度＆amp;高度为100％。可能要仔细检查路径数据。

如何在Flex（View Box）中将路径缩放到容器？

3 个答案: