在 Silverlight 绘制线帽（箭头）

时间：2011-01-13 来源：匡匡

第一种是在 codeplex 网站上找了一个开源的项目，好像是国人所写的（代码里有中文注释）：

http://arrowline.codeplex.com/

使用这个库挺方便的，效果也不错。

另一种是就自己实现一个用户控件，也比较简单：

XAML 内容：

后台代码：

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 SL_ArrowLine
{
    public partial class ArrowLine : UserControl
    {
        public ArrowLine()
        {
            InitializeComponent();
        }

        public ArrowLine(Point startPoint, Point endPoint)
        {
            InitializeComponent();
            this.startPoint = startPoint;
            this.endPoint = endPoint;
            Update();
        }

        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();
            }
        }

        private void Update()
        {
            double angleOfLine = Math.Atan2((endPoint.Y - startPoint.Y), (endPoint.X - startPoint.X)) * 180 / Math.PI;

            //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);

            CapRotateTransform.Angle = angleOfLine;
            CapRotateTransform.CenterX = this.StartPoint.X;
            CapRotateTransform.CenterY = this.StartPoint.Y;

            FootRotateTransform.Angle = angleOfLine;
            FootRotateTransform.CenterX = this.EndPoint.X;
            FootRotateTransform.CenterY = this.EndPoint.Y;
        }
    }
}

上面的代码中实现的效果不怎么样：

但是通过再改造一下，可以达到任意想要的效果。