代码之家 › 专栏 › 技术社区 › Brian Genisio

如何使路径缩放到flex中的容器(视图框)?

viewbox flex

0

Brian Genisio · 技术社区 · 14 年前

我有以下标记:

<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%是一种工作,但如果有很多路径,则需要进行大量的修补。另外,它的行为与您想要的不完全一样(试试看,调整浏览器的大小)

3 回复 | 直到 12 年前

1

0

alxx 14 年前

您想以恒定的纵横比缩放路径吗?我是这样做的:

<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上运行这个命令,路径将被缩放到容器(但不在设计模式下)。

2

0

Brian Genisio 13 年前

我找到了我要找的东西。自动卫浴完全符合我的要求:

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

3

0

Robert Cesaric 12 年前

你可以把这条路包起来 S:群 并设置resizemode(仅供参考,这与将路径包装在 S:图形 ):

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

笔画上的刻度符号会检查线条的重量,看你是不是在找这个。

我不知道为什么路径的右边和底部仍然有一些填充物,但它不像设置路径宽度和高度为100%那样不守规矩。可能需要重新检查路径数据。