canvas – 如何在Silverlight中绘制箭头

概述我需要在画布中的控件之间绘制一个箭头.目前我正在使用Line对象,但它没有办法在该行的末尾绘制一个三角形. 这大致是我需要的： [TextBox] <----- [Button] 我试图将Line子类化并在最后添加几行,但是类是密封的. 你将如何构建一个在X1,Y1和X2,Y2之间绘制箭头的自定义控件？ Charles Petzold在WPF中编写了一个用于执行此 *** 作的库.至少逻辑应该转移到Sil 我需要在画布中的控件之间绘制一个箭头.目前我正在使用line对象,但它没有办法在该行的末尾绘制一个三角形.

这大致是我需要的：

[TextBox] <----- [button]

我试图将line子类化并在最后添加几行,但是类是密封的.

你将如何构建一个在X1,Y1和X2,Y2之间绘制箭头的自定义控件？

解决方法 Charles Petzold在WPF中编写了一个用于执行此 *** 作的库.至少逻辑应该转移到Silverlight.它使用折线和路径,并且应该易于移植.

Lines with Arrows @ Petzold Book Blog

– 编辑 –

好的 – 这是另一种方法：

创建用户控件：

<UserControl x:Class="ArrowsAndDaggerslibrary.ArrowsAndDaggersUC"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Canvas x:name="LayoutRoot">        <line x:name="Cap" />        <line x:name="Connector" />        <line x:name="Foot" />    </Canvas></UserControl>

使用以下代码：

using System;using System.Collections.Generic;using System.linq;using System.Net;using System.windows;using System.windows.Controls;using System.windows.documents;using System.windows.input;using System.windows.Media;using System.windows.Media.Animation;using System.windows.Shapes;namespace ArrowsAndDaggerslibrary{    public partial class ArrowsAndDaggersUC : UserControl    {        private Point startPoint;        public Point StartPoint        {            get { return startPoint; }            set            {                startPoint = value;                Update();            }        }        private Point endPoint;        public Point EndPoint        {            get { return endPoint; }            set {                 endPoint = value;                Update();            }        }        public ArrowsAndDaggersUC()        {            InitializeComponent();        }        public ArrowsAndDaggersUC(Point StartPoint,Point EndPoint)        {            InitializeComponent();            startPoint = StartPoint;            endPoint = EndPoint;            Update();        }        private voID Update()        {            //reconfig            Connector.X1 = startPoint.X;            Connector.Y1 = startPoint.Y;            Connector.X2 = endPoint.X;            Connector.Y2 = endPoint.Y;            Connector.strokeThickness = 1;            Connector.stroke = new SolIDcolorBrush(colors.Black);            Cap.X1 = startPoint.X;            Cap.Y1 = startPoint.Y;            Cap.X2 = startPoint.X;            Cap.Y2 = startPoint.Y;            Cap.strokeStartlineCap = PenlineCap.Triangle;            Cap.strokeThickness = 20;            Cap.stroke = new SolIDcolorBrush(colors.Black);            Foot.X1 = endPoint.X;            Foot.Y1 = endPoint.Y;            Foot.X2 = endPoint.X;            Foot.Y2 = endPoint.Y;            Foot.strokeEndlineCap = PenlineCap.Triangle;            Foot.strokeThickness = 20;            Foot.stroke = new SolIDcolorBrush(colors.Black);        }    }}

像这样称呼它：

LayoutRoot.Children.Add(new ArrowsAndDaggersUC(new Point(200,200),new Point(300,400)));

并且你将在每行的末尾有1px笔划线和20px笔划三角形.

– 编辑 –

@ Number8有一个关于如何修改用户控件的问题,以便大写字母指向与该行相同的方向.

修改用户控件的Xaml,如下所示：

<UserControl x:Class="ArrowsAndDaggerslibrary.ArrowsAndDaggersUC"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Canvas x:name="LayoutRoot">        <line x:name="Cap">            <line.Rendertransform>                <Rotatetransform x:name="CapRotatetransform" />            </line.Rendertransform>        </line>        <line x:name="Connector" />        <line x:name="Foot">            <line.Rendertransform>                <Rotatetransform x:name="FootRotatetransform" />            </line.Rendertransform>        </line>    </Canvas></UserControl>

然后,更改“更新”方法以获取线条的角度并将大写字母旋转到该角度：

private voID Update(){    double angleOfline = Math.atan2((endPoint.Y - startPoint.Y),(endPoint.X - startPoint.X)) * 180 / Math.PI;    Connector.X1 = startPoint.X;    Connector.Y1 = startPoint.Y;    Connector.X2 = endPoint.X;    Connector.Y2 = endPoint.Y;    Connector.strokeThickness = 1;    Connector.stroke = new SolIDcolorBrush(colors.Black);    Cap.X1 = startPoint.X;    Cap.Y1 = startPoint.Y;    Cap.X2 = startPoint.X;    Cap.Y2 = startPoint.Y;    Cap.strokeStartlineCap = PenlineCap.Triangle;    Cap.strokeThickness = 20;    Cap.stroke = new SolIDcolorBrush(colors.Black);    CapRotatetransform.Angle = angleOfline;    CapRotatetransform.CenterX = startPoint.X;    CapRotatetransform.CenterY = startPoint.Y;    Foot.X1 = endPoint.X;    Foot.Y1 = endPoint.Y;    Foot.X2 = endPoint.X;    Foot.Y2 = endPoint.Y;    Foot.strokeEndlineCap = PenlineCap.Triangle;    Foot.strokeThickness = 20;    Foot.stroke = new SolIDcolorBrush(colors.Black);    FootRotatetransform.Angle = angleOfline;    FootRotatetransform.CenterX = endPoint.X;    FootRotatetransform.CenterY = endPoint.Y;}

总结

以上是内存溢出为你收集整理的canvas – 如何在Silverlight中绘制箭头全部内容，希望文章能够帮你解决canvas – 如何在Silverlight中绘制箭头所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。