logo标签列表

使用XAML绘制箭头

xamldrawing
14

我不知道如何使用XAML绘制箭头，目前还没有任何代码。

是否有人可以帮助我用XAML代码实现这个绘制？

谢谢您的帮助。

我在谷歌上搜索了，但是没有找到任何东西。 - Moussawi
@Alexander 我谷歌了一下，我来到这个页面只是为了看你的评论。看出问题了吗？ - Timmos
4个回答
30
20

我只是手动设置一个点，然后通过眼睛调整它：

<Path Stretch="Fill" Fill="LimeGreen" 
              Data="M
              0,115   95,115   //p1, p2  (when really use remove these comments)
              65,90   85,90    //p3, p4
              120,120          //p5
                      85,150  65,150  //p6, p7
                      95,125  0,125   //p8, p9
              Z"
              HorizontalAlignment="Center"  Width="60" Height="60" />

您可以调整宽度/高度。基本上，p1，p2，p3，p4和p6，p7，p8，p9是对称的，并且Data可以像这样省略描述和逗号:

Data="M 0 115 95 115 65 90 85 90 120 120 85 150 65 150 95 125 0 125 Z"
结果：

结果：

enter image description here

另外这里有一种方法可以旋转箭头，例如将另一个右箭头旋转180度，变成左箭头：

    <Path Stretch="Fill" Fill="LimeGreen" 
          Data="M 0,110 70,110 45,90 75,90 120,120 75,150 45,150 70,130 0,130 Z"
          HorizontalAlignment="Right"  Width="30" Height="24" Margin="0,0,2,0"
          RenderTransformOrigin=".5,.5">
        <Path.RenderTransform>
            <RotateTransform Angle="180" />
        </Path.RenderTransform>
    </Path>
1
如果有人能展示如何从C#代码中绘制箭头的示例并进行操作，那将是很棒的。也就是说，可以操作箭头的长度和旋转。或者更好的做法是创建一个方法，该方法传递两个点对并在箭头的一对点作为尾部，另一对点作为箭头顶端进行绘制。 - BoiseBaked
2
对于一个简单的箭头，这里有一个技巧只使用一对线条。第一条线是箭身，第二条线是零长度的线条，形成箭头。箭身没有帽子，箭头纯粹是一个帽子。 整个箭头可以通过旋转包含它的画布来旋转，我发现这很有用。
<Canvas Width="75" Height="50">
    <Line X1="0" Y1="25" X2="55" Y2="25" Stroke="#ffffff" StrokeThickness="20"/>
    <Line X1="50" Y1="25" X2="50" Y2="25" Stroke="#ffffff" StrokeThickness="50" StrokeEndLineCap="Triangle"/>
</Canvas>
2

有一个很好的第三方库可以免费使用，它可以适用于需要箭头作为线段结尾的某些用例。

完整的代码太长了，无法在此处重现，但我已经在下面链接到了它。我找不到这个代码的其他存储库（例如Nuget、Github等）。

文章：Lines with Arrows, Charles Petzold, April 18, 2007, New York, N.Y.

简短摘录：

Arrowheads.zip文件包含一个演示程序和两个类，名为ArrowLine和ArrowPolyline，它们都是从Shape派生而来…

ArrowLine类从ArrowLineBase派生，通过定义X1、Y1、X2和Y2属性基本上复制了Line类；ArrowPolyline通过定义Points属性复制了Polyline类。

...

因为箭头基本上是线的一部分，所以它们受到影响所有影响线的属性的影响，例如Stroke、StrokeThickness、StrokeStartLineCap和StrokeLineJoin。如果将IsArrowClosed设置为true，则Fill属性会发挥作用；如果将Fill设置为与Stroke相同的画刷，则箭头看起来最正常。

上面提到的类是控件（用C#编写），可以从XAML中使用。简单的例子：

xmlns:p="clr-namespace:Petzold.Media2D;assembly=Arrowheads"

...
    
<p:ArrowLine
    X1="0"
    Y1="0"
    X2="148"
    Y2="0"
    Canvas.Top="18"
    Canvas.Left="26"
    />

示例输出：

输入图像描述 (http://www.charlespetzold.com/blog/2007/04/Arrowheads.png)

请注意，Charles非常慷慨地提供了这段代码以供重复使用，如他在常见问题解答中所述：

我写和发布的所有代码都可以在您的软件项目中免费使用（无论是个人还是商业），没有任何限制。

（常见问题解答确实提到了一些出版物方面的限制，因此您应该完整阅读它）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接