将多个路径与不同的填充组合在一起,同时仍然能够均匀拉伸

发布于 2024-12-12 04:28:19 字数 3255 浏览 2 评论 0原文

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

如何以仍可拉伸并保持填充的方式组合这些路径?

编辑 - 当我将路径放入网格时Viewbox 填充的部分(字母)填充整个网格,而不是像所有路径组合时那样保持其

大小网格
带路径的图像

谢谢

I'm trying to create a re-sizable drawing from a group of paths I've generated from Adobe Illustrator, but can't figure out how to make it re-sizable and maintain the fills. The original path data is:

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

I've been able to make the drawing re-sizable without the fills by combining the path data into one path like this:

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

Image with combined paths - no fill
no fill

How can I combine these paths in a way that it will still be stretchable and maintain the fills?

EDIT - When I place the paths into a Grid & Viewbox the filled parts (letters) fill the entire grid instead maintaining their size as they do when all the paths are combined

Image with paths in Viewbox & Grid
image with paths

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

心如狂蝶 2024-12-19 04:28:19

将 4 个Paths 分组到一个 Grid 中,然后将该 Grid 放入一个 Viewbox 中,该 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>

在将其放入 Viewbox 之前,您可能需要将 Grid 的大小缩小到更接近路径的实际大小。

这是我在 Blend 中得到的内容

Group your 4 Paths into a Grid then put that Grid into a Viewbox that should scale the way you want.

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

You might want to size the Grid down closer to your paths' real size before putting it in a Viewbox.

Here's what I get in Blend

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文