在 Silverlight 绘制线帽（箭头）

最近要在 silverlight 的一个项目中绘制带有箭头的线条，但是在 silverlight 中竟然没有这样现成的功能。于是去网上搜索了一把，找到了两种解决方法：

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

http://arrowline.codeplex.com/

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

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

XAML 内容：

<UserControl x:Class="SL_ArrowLine.ArrowLine"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

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

后台代码：

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

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

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