Silverlight画几何图形，显示中间过程(计算两个Point的距离，画虚线的方法)

在51aspx上找到一个非常酷的画几何图形的源码。可惜太复杂，看不懂。
干脆自己琢磨吧，先动态画条直线，画个圆，所谓动态就是指画直线或圆的时候，能显示中间过程。
同时学到了怎样计算两个点之间的距离，怎样画虚线。

<UserControl x:Class="DrawLine.DrawEclipse"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas x:Name="panel" Background="Black" MouseMove="panel_MouseMove" MouseLeftButtonDown="panel_MouseLeftButtonDown">

    </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 DrawLine
{
    public partial class DrawEclipse : UserControl
    {
        public DrawEclipse()
        {
            InitializeComponent();
        }

        private bool IsStart = true;//是否是起点。
        private double pX1 = 0, pY1 = 0;//起点坐标
        private double pX2 = 0, pY2 = 0;//终点坐标
        Ellipse ellipse = new Ellipse();//画圆心
        Ellipse ellipseTmp = new Ellipse();//画临时圆
        Line lineTmp = new Line();//临时直线

        private void panel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point p = e.GetPosition(sender as FrameworkElement);//取得鼠标点下的位置
            Canvas pnl = sender as Canvas;
            if (IsStart)
            {
                pX1 = p.X;//设置起点坐标
                pY1 = p.Y;
            }
            else
            {
                pX2 = p.X;//设置终点坐标
                pY2 = p.Y;
            }
            if (IsStart)//如果是起点，则画起点。
            {
                DrawPoint(pnl);
            }
            else
            {
                DrawOneEclipse(pnl);
                if (lineTmp != null)
                    pnl.Children.Remove(lineTmp);
            }
            IsStart = !IsStart;
        }
        //画圆
        private void DrawOneEclipse(Canvas pnl)
        {
            Ellipse ellipseOne = new Ellipse();//画圆
            ellipseOne.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));//动态设置Stroke属性的方法。
            ellipseOne.StrokeThickness = 2;
            //计算两点距离
            Point p1 = new Point(pX1, pY1);
            Point p2 = new Point(pX2, pY2);
            //
            var dx = p1.X - p2.X;
            var dy = p1.Y - p2.Y;
            double distance = Math.Sqrt(dx * dx + dy * dy);

            ellipseOne.Width = distance * 2;
            ellipseOne.Height = distance * 2;

            Canvas.SetLeft(ellipseOne, pX1 - distance);//动态设置Ellipse的Canvas.Top与Canvas.Left
            Canvas.SetTop(ellipseOne, pY1 - distance);

            pnl.Children.Add(ellipseOne);
        }
        //画点
        private void DrawPoint(Canvas pnl)
        {
            ellipse.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));//动态设置Stroke属性的方法。
            ellipse.StrokeThickness = 2;
            ellipse.Width = 4;
            ellipse.Height = 4;
            Canvas.SetLeft(ellipse, pX1);//动态设置Ellipse的Canvas.Top与Canvas.Left
            Canvas.SetTop(ellipse, pY1);

            pnl.Children.Add(ellipse);
        }
        //画临时圆
        private void DrawTmpEclipse(Canvas pnl)
        {
            if (ellipseTmp != null)
                pnl.Children.Remove(ellipseTmp);
            ellipseTmp.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));//动态设置Stroke属性的方法。
            ellipseTmp.StrokeThickness = 2;
            //计算两点距离
            Point p1 = new Point(pX1, pY1);
            Point p2 = new Point(pX2, pY2);
            //
            var dx = p1.X - p2.X;
            var dy = p1.Y - p2.Y;
            double distance = Math.Sqrt(dx * dx + dy * dy);

            ellipseTmp.Width = distance * 2;
            ellipseTmp.Height = distance * 2;

            Canvas.SetLeft(ellipseTmp, pX1 - distance);//动态设置Ellipse的Canvas.Top与Canvas.Left
            Canvas.SetTop(ellipseTmp, pY1 - distance);

            pnl.Children.Add(ellipseTmp);

            pnl.Children.Remove(ellipse);//删除起点。
        }
        //画临时直线
        private void DrawTmpLine(Canvas pnl)
        {
            if (lineTmp != null)
                pnl.Children.Remove(lineTmp);
            lineTmp.X1 = pX1;
            lineTmp.Y1 = pY1;
            lineTmp.X2 = pX2;
            lineTmp.Y2 = pY2;

            lineTmp.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));
            lineTmp.StrokeThickness = 2;
            //设置虚线的方法
            DoubleCollection dc = new DoubleCollection(){1,1};
            lineTmp.StrokeDashArray = dc;

            pnl.Children.Add(lineTmp);
        }

        private void panel_MouseMove(object sender, MouseEventArgs e)
        {
            Point p = e.GetPosition(sender as FrameworkElement);//取得鼠标点下的位置
            Canvas pnl = sender as Canvas;
            if (!IsStart)//如果不是起点，则设置临时终点
            {
                pX2 = p.X;//设置终点坐标
                pY2 = p.Y;
                DrawTmpLine(pnl);
                DrawTmpEclipse(pnl);
            }
        }
    }
}

 本文源码：https://files.cnblogs.com/greatverve/DrawLineEclipse.rar

参考：http://51aspx.com/CV/SLGeometry/
这个源码酷多了。看看吧。