将多个路径与不同的填充相结合,同时仍然能够均匀拉伸

时间:2011-10-27 19:08:34

标签: wpf pathgeometry

我正在尝试从我从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

如何将这些路径组合起来,使其仍然可以伸缩并保持填充?

编辑 - 当我将路径放入网格&amp; Viewbox填充的部分(字母)填充整个网格,而不是像所有路径组合时一样保持它们的大小

Viewbox&amp;中包含路径的图片电网
image with paths

由于

1 个答案:

答案 0 :(得分:11)

将您的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之前,您可能希望将{{1}}缩小到接近路径的实际尺寸。

Here's what I get in Blend