Как сделать масштабирование пути к контейнеру во Flex (View Box)?

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

Я нашел то, что искал.AutoFitArea делает именно то, что я хочу:

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

Answer 2

Вы можете обернуть путь в s: Group и установить resizeMode (FYI, это достигается так же, как простое обертывание пути в 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>

ScaleMode на штрихе будет контролировать вес линии, если это то, что вы ищете.

Я не уверен, почему путь все еще показывает некоторые отступы справа и снизу, но это немного менее неуправляемо, так как установка ширины и высоты пути равна 100%. Может быть, хотите дважды проверить данные пути.

Answer 3

Вы хотите масштабировать траекторию с постоянным соотношением сторон?Мне удалось сделать это так:

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

Запустите это при запуске приложения, и пути будут масштабированыв контейнер (но не в режиме проектирования).