当前位置：文江博客话题详情

如何使用 Path 元素绘制形状？

发布于 2024-10-19 07:20:56 字数 174 浏览 0 评论 0原文

如何在 XAML 中使用路径元素绘制以下内容？

谢谢！

原文

分享到QQ

分享到微博

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

发布评论

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

漫雪独思 2024-10-26 07:20:56

我这样做已经有一段时间了，但我挖出了一些旧代码。

<Path Fill="Gray" Data="M 10 0 L 20 10 L 0 10 Z"/>

这会绘制一个向上的小箭头。我记得，该文本解码为“移动到 (10,0)，行到 (20,10)，行到 (0,10)，返回到开始并关闭形状”。

这应该可以帮助你开始。更多命令可以在 MSDN 上查找。

It's been a while since I did this, but I dug out some of my old code.

<Path Fill="Gray" Data="M 10 0 L 20 10 L 0 10 Z"/>

That draws a small up arrow. As I recall, that text decodes to something like "Move to (10,0), Line to (20,10), Line to (0,10), Return to beginning and close shape".

That should get you started. There are more commands you can look up on MSDN.

回复收藏 0 原文

梦太阳 2024-10-26 07:20:56

您可以使用Expression Blend将对象转换为路径。请参阅此链接< /a>

这里是使用 TextBlock 将所有文本转换为 7 个 Path 元素，默认字体等转换为 Path。如果您对结果不满意，您可以按照 Blend 链接中的简短说明自行执行相同的操作。但它确实会生成相当详细的 Xaml。

有关如何在代码中执行类似操作，请参阅此答案作者：伊恩·格里菲思

1.<<
<Path Data="M6.6328125,6.5054684 L6.6328125,7.3843746 L2.8710938,9.4703121 L2.8710938,9.4937496 L6.6328125,11.333593 L6.6328125,12.20664 L1.59375,9.6753902 L1.59375,9.3296871 z M14.842813,6.5054684 L14.842813,7.3843746 L11.081094,9.4703121 L11.081094,9.4937496 L14.842813,11.333593 L14.842813,12.20664 L9.80375,9.6753902 L9.80375,9.3296871 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="13.249"/>

2.>>
<Path Data="M1.59375,6.5054684 L6.6328125,9.3296871 L6.6328125,9.6753902 L1.59375,12.20664 L1.59375,11.333593 L5.3671875,9.5054684 L5.3671875,9.4703121 L1.59375,7.3843746 z M9.80375,6.5054684 L14.842813,9.3296871 L14.842813,9.6753902 L9.80375,12.20664 L9.80375,11.333593 L13.577188,9.5054684 L13.577188,9.4703121 L9.80375,7.3843746 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="13.249"/>

3.->
<Path Data="M0.84375,9.2300777 L4.0429688,9.2300777 L4.0429688,9.9859371 L0.84375,9.9859371 z M6.3937502,6.5054684 L11.432813,9.3296871 L11.432813,9.6753902 L6.3937502,12.20664 L6.3937502,11.333593 L10.167188,9.5054684 L10.167188,9.4703121 L6.3937502,7.3843746 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="0.844,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="10.589"/>

4.|<
<Path Data="M1.0078125,3.7749996 L1.875,3.7749996 L1.875,15.775 L1.0078125,15.775 z M9.5028124,6.5054684 L9.5028124,7.3843746 L5.7410936,9.4703121 L5.7410936,9.4937496 L9.5028124,11.333593 L9.5028124,12.20664 L4.4637499,9.6753902 L4.4637499,9.3296871 z" Fill="Black" HorizontalAlignment="Left" Height="12" Margin="1.008,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="8.495"/>

5.>|
<Path Data="M1.59375,6.5054684 L6.6328125,9.3296871 L6.6328125,9.6753902 L1.59375,12.20664 L1.59375,11.333593 L5.3671875,9.5054684 L5.3671875,9.4703121 L1.59375,7.3843746 z M9.2178125,3.7749996 L10.085,3.7749996 L10.085,15.775 L9.2178125,15.775 z" Fill="Black" HorizontalAlignment="Left" Height="12" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="8.491"/>

6.<
<Path Data="M6.6328125,6.5054684 L6.6328125,7.3843746 L2.8710938,9.4703121 L2.8710938,9.4937496 L6.6328125,11.333593 L6.6328125,12.20664 L1.59375,9.6753902 L1.59375,9.3296871 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="5.039"/>

7.>
<Path Data="M1.59375,6.5054684 L6.6328125,9.3296871 L6.6328125,9.6753902 L1.59375,12.20664 L1.59375,11.333593 L5.3671875,9.5054684 L5.3671875,9.4703121 L1.59375,7.3843746 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="5.039"/>

You can use Expression Blend to convert an Object to a Path. See this link

Here is all your Texts convertered to 7 Path elements using TextBlocks with default font etc converted to Path. If you're not satisfied with the result you can do the same thing yourself following the short description in the link with Blend. It does produce pretty verbose Xaml though.

For how to do similar things in code, see this answer by Ian Griffiths

1.<<
<Path Data="M6.6328125,6.5054684 L6.6328125,7.3843746 L2.8710938,9.4703121 L2.8710938,9.4937496 L6.6328125,11.333593 L6.6328125,12.20664 L1.59375,9.6753902 L1.59375,9.3296871 z M14.842813,6.5054684 L14.842813,7.3843746 L11.081094,9.4703121 L11.081094,9.4937496 L14.842813,11.333593 L14.842813,12.20664 L9.80375,9.6753902 L9.80375,9.3296871 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="13.249"/>

2.>>
<Path Data="M1.59375,6.5054684 L6.6328125,9.3296871 L6.6328125,9.6753902 L1.59375,12.20664 L1.59375,11.333593 L5.3671875,9.5054684 L5.3671875,9.4703121 L1.59375,7.3843746 z M9.80375,6.5054684 L14.842813,9.3296871 L14.842813,9.6753902 L9.80375,12.20664 L9.80375,11.333593 L13.577188,9.5054684 L13.577188,9.4703121 L9.80375,7.3843746 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="13.249"/>

3.->
<Path Data="M0.84375,9.2300777 L4.0429688,9.2300777 L4.0429688,9.9859371 L0.84375,9.9859371 z M6.3937502,6.5054684 L11.432813,9.3296871 L11.432813,9.6753902 L6.3937502,12.20664 L6.3937502,11.333593 L10.167188,9.5054684 L10.167188,9.4703121 L6.3937502,7.3843746 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="0.844,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="10.589"/>

4.|<
<Path Data="M1.0078125,3.7749996 L1.875,3.7749996 L1.875,15.775 L1.0078125,15.775 z M9.5028124,6.5054684 L9.5028124,7.3843746 L5.7410936,9.4703121 L5.7410936,9.4937496 L9.5028124,11.333593 L9.5028124,12.20664 L4.4637499,9.6753902 L4.4637499,9.3296871 z" Fill="Black" HorizontalAlignment="Left" Height="12" Margin="1.008,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="8.495"/>

5.>|
<Path Data="M1.59375,6.5054684 L6.6328125,9.3296871 L6.6328125,9.6753902 L1.59375,12.20664 L1.59375,11.333593 L5.3671875,9.5054684 L5.3671875,9.4703121 L1.59375,7.3843746 z M9.2178125,3.7749996 L10.085,3.7749996 L10.085,15.775 L9.2178125,15.775 z" Fill="Black" HorizontalAlignment="Left" Height="12" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="8.491"/>

6.<
<Path Data="M6.6328125,6.5054684 L6.6328125,7.3843746 L2.8710938,9.4703121 L2.8710938,9.4937496 L6.6328125,11.333593 L6.6328125,12.20664 L1.59375,9.6753902 L1.59375,9.3296871 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="5.039"/>

7.>
<Path Data="M1.59375,6.5054684 L6.6328125,9.3296871 L6.6328125,9.6753902 L1.59375,12.20664 L1.59375,11.333593 L5.3671875,9.5054684 L5.3671875,9.4703121 L1.59375,7.3843746 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="5.039"/>

回复收藏 0 原文

~没有更多了~