Объединение нескольких дорожек с разными заливками при одновременном растяжении - PullRequest
Новая
       12

Объединение нескольких дорожек с разными заливками при одновременном растяжении

9 голосов
/ 27 октября 2011

Я пытаюсь создать рисунок с изменяемым размером из группы путей, созданных в Adobe Illustrator, но не могу понять, как сделать его изменяемым и сохранить заливки. Исходные данные пути: 

<Path Fill="#ff221e1f" Data="F1 M 65.778,45.310 L 85.092,45.310 L 85.092,47.630 L 68.504,47.630 L 68.504,63.174 L 83.700,63.174 L 83.700,65.494 L 68.504,65.494 L 68.504,84.402 L 65.778,84.402 L 65.778,45.310 Z"/>
<Path Fill="#ff221e1f" Data="F1 M 95.300,64.218 L 101.505,64.218 C 107.538,64.218 111.482,60.854 111.482,55.692 C 111.482,49.718 107.074,47.282 100.926,47.282 C 98.257,47.282 96.286,47.572 95.300,47.804 L 95.300,64.218 Z M 92.574,45.832 C 94.952,45.310 98.316,45.020 100.984,45.020 C 106.087,45.020 109.278,46.122 111.540,48.268 C 113.222,49.892 114.266,52.502 114.266,55.228 C 114.266,60.506 111.133,63.870 106.610,65.436 L 106.610,65.552 C 109.742,66.538 111.713,69.496 112.642,73.846 C 113.976,79.936 114.730,82.836 115.542,84.402 L 112.642,84.402 C 112.062,83.242 111.192,79.820 110.148,74.890 C 108.988,69.264 106.551,66.712 101.390,66.480 L 95.300,66.480 L 95.300,84.402 L 92.574,84.402 L 92.574,45.832 Z"/>
<Path StrokeThickness="3.0" Stroke="#ff221e1f" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 179.125,90.312 C 179.125,139.362 139.362,179.125 90.312,179.125 C 41.263,179.125 1.500,139.362 1.500,90.312 C 1.500,41.263 41.263,1.500 90.312,1.500 C 139.362,1.500 179.125,41.263 179.125,90.312 Z"/>
<Path StrokeThickness="3.0" Stroke="#ff221e1f" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 75.533,117.798 L 103.986,117.798"/>

Мне удалось изменить размер чертежа без заливки, объединив данные пути в один путь, например: 

<Path Stretch="Uniform" StrokeThickness="1.5" Stroke="#ff221e1f" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" 
                      Data="F1 M 179.125,90.312 C 179.125,139.362 139.362,179.125 90.312,179.125 C 41.263,179.125 1.500,139.362 1.500,90.312 C 1.500,41.263 41.263,1.500 90.312,1.500 C 139.362,1.500 179.125,41.263 179.125,90.312 Z
                      M 75.533,117.798 L 103.986,117.798
                      M 65.778,45.310 L 85.092,45.310 L 85.092,47.630 L 68.504,47.630 L 68.504,63.174 L 83.700,63.174 L 83.700,65.494 L 68.504,65.494 L 68.504,84.402 L 65.778,84.402 L 65.778,45.310 Z
                      M 95.300,64.218 L 101.505,64.218 C 107.538,64.218 111.482,60.854 111.482,55.692 C 111.482,49.718 107.074,47.282 100.926,47.282 C 98.257,47.282 96.286,47.572 95.300,47.804 L 95.300,64.218 Z M 92.574,45.832 C 94.952,45.310 98.316,45.020 100.984,45.020 C 106.087,45.020 109.278,46.122 111.540,48.268 C 113.222,49.892 114.266,52.502 114.266,55.228 C 114.266,60.506 111.133,63.870 106.610,65.436 L 106.610,65.552 C 109.742,66.538 111.713,69.496 112.642,73.846 C 113.976,79.936 114.730,82.836 115.542,84.402 L 112.642,84.402 C 112.062,83.242 111.192,79.820 110.148,74.890 C 108.988,69.264 106.551,66.712 101.390,66.480 L 95.300,66.480 L 95.300,84.402 L 92.574,84.402 L 92.574,45.832 Z"/>

Изображение с комбинированными путями - без заливки
no fill

Как я могу объединить эти пути так, чтобы они все еще были растяжимыми и поддерживали заливки?

РЕДАКТИРОВАТЬ - Когда я помещаю пути в Grid & Viewbox, заполненные части (буквы) заполняют всю сетку, сохраняя их размер, как и при объединении всех путей

Изображение с путями в Viewbox & Grid
image with paths

Спасибо

1 Ответ

11 голосов
/ 28 октября 2011

Сгруппируйте ваши 4 Paths в Grid, затем поместите это Grid в Viewbox, которое должно масштабироваться так, как вы хотите. 

<Viewbox Stretch="Fill" HorizontalAlignment="Left" Height="125.96" VerticalAlignment="Top" Width="127">
        <Grid>
            <Path Fill="#ff221e1f" Data="F1 M 65.778,45.310 L 85.092,45.310 L 85.092,47.630 L 68.504,47.630 L 68.504,63.174 L 83.700,63.174 L 83.700,65.494 L 68.504,65.494 L 68.504,84.402 L 65.778,84.402 L 65.778,45.310 Z"/>
            <Path Fill="#ff221e1f" Data="F1 M 95.300,64.218 L 101.505,64.218 C 107.538,64.218 111.482,60.854 111.482,55.692 C 111.482,49.718 107.074,47.282 100.926,47.282 C 98.257,47.282 96.286,47.572 95.300,47.804 L 95.300,64.218 Z M 92.574,45.832 C 94.952,45.310 98.316,45.020 100.984,45.020 C 106.087,45.020 109.278,46.122 111.540,48.268 C 113.222,49.892 114.266,52.502 114.266,55.228 C 114.266,60.506 111.133,63.870 106.610,65.436 L 106.610,65.552 C 109.742,66.538 111.713,69.496 112.642,73.846 C 113.976,79.936 114.730,82.836 115.542,84.402 L 112.642,84.402 C 112.062,83.242 111.192,79.820 110.148,74.890 C 108.988,69.264 106.551,66.712 101.390,66.480 L 95.300,66.480 L 95.300,84.402 L 92.574,84.402 L 92.574,45.832 Z"/>
            <Path StrokeThickness="3.0" Stroke="#ff221e1f" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 179.125,90.312 C 179.125,139.362 139.362,179.125 90.312,179.125 C 41.263,179.125 1.500,139.362 1.500,90.312 C 1.500,41.263 41.263,1.500 90.312,1.500 C 139.362,1.500 179.125,41.263 179.125,90.312 Z"/>
            <Path StrokeThickness="3.0" Stroke="#ff221e1f" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 75.533,117.798 L 103.986,117.798"/>
        </Grid>
    </Viewbox>

Возможно, вы захотите уменьшить Grid ближе к реальному размеру ваших путей, прежде чем поместить его в Viewbox.

Here's what I get in Blend

...