平行四边形_可自由拖拽（WPF）

前言 

从事WPF开发三年了，第一次写文章，希望以后可以继续努力。

利用周末一天多的时间写了一份操作四边形的程序，作为一个思路，可以实现任何图形的操作。

正文

1、默认状态下是一个蓝色的角，可以通过按钮生成平行四边形、生成对角线、显示长度

2、可以用鼠标拖拽绿色的点生成不同样子的平行四边形。四边形的边长、角度、对角线的长度都会动态改变

3、主要难点在于角度的计算，以及标注位置的动态改变

话不多说，直接上图（最后会附上代码的链接）：

 下面就是图形自定义控件的界面实现方式，就是通过Path以及Geometry实现的：

<Canvas x:Name="RootCanvas">
        <!--角度弧线-->
        <Canvas x:Name="AngleCanvas" Visibility="Visible">
            <Path Stroke="White" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure x:Name="AngleEnd" StartPoint="50 100">
                            <ArcSegment x:Name="AngleStart" Point="41,72" Size="50,50" IsLargeArc="False"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <!--角度值-->
            <Label x:Name="AngleLable" Content="30°" FontSize="10" Canvas.Left="45" Canvas.Top="73" Foreground="White"/>
        </Canvas>

        <!--对角线角度-->
        <Canvas x:Name="AngleCenterCanvas" Visibility="Collapsed">
            <Path Stroke="White" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure x:Name="AngleCenterEnd" StartPoint="50 100">
                            <ArcSegment x:Name="AngleCenterStart" Point="41,72" Size="50,50" IsLargeArc="False"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Label x:Name="AngleCenterLable" Content="30°" FontSize="10" Canvas.Left="45" Canvas.Top="73" Foreground="White"/>
        </Canvas>

        <!--对角线-->
        <Path x:Name="Path_Cen" Visibility="Collapsed" Stroke="Red" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round">
            <Path.Data>
                <GeometryGroup>
                    <LineGeometry x:Name="LineGeometry_Cen" StartPoint="0,100" EndPoint="350,0"/>
                </GeometryGroup>
            </Path.Data>
        </Path>

        <!--实线部分-->
        <Path x:Name="Path_LT" Stroke="DarkBlue" StrokeThickness="6" StrokeStartLineCap="Round" StrokeEndLineCap="Round">
            <Path.Data>
                <GeometryGroup>
                    <LineGeometry x:Name="LineGeometry_Left" StartPoint="0,100" EndPoint="150,0"/>
                    <LineGeometry x:Name="LineGeometry_Bottom" StartPoint="0,100" EndPoint="200,100"/>
                </GeometryGroup>
            </Path.Data>
        </Path>

        <!--虚线部分（基于实现部分生成）-->
        <Path x:Name="Path_RB" Visibility="Collapsed" Stroke="Black" StrokeThickness="6" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashArray="2 2">
            <Path.Data>
                <GeometryGroup>
                    <LineGeometry x:Name="LineGeometry_Top" StartPoint="350,0" EndPoint="150,0"/>
                    <LineGeometry x:Name="LineGeometry_Right" StartPoint="350,0" EndPoint="200,100"/>
                </GeometryGroup>
            </Path.Data>
        </Path>

        <!--操作部分，2个拖拽点-->
        <Path x:Name="OperateLeftTop" Stroke="White" StrokeThickness="2" Fill="Green" Cursor="Hand" MouseDown="OperateMouseDown" MouseMove="OperateMouseMove" MouseUp="OperateMouseUp">
            <Path.Data>
                <EllipseGeometry Center="{Binding EndPoint,ElementName=LineGeometry_Left}" RadiusX="6" RadiusY="6"></EllipseGeometry>
            </Path.Data>
        </Path>
        <Path x:Name="OperateRightBottom" Stroke="White" StrokeThickness="2" Fill="Green" Cursor="Hand" MouseDown="OperateMouseDown" MouseMove="OperateMouseMove" MouseUp="OperateMouseUp">
            <Path.Data>
                <EllipseGeometry Center="{Binding EndPoint,ElementName=LineGeometry_Bottom}" RadiusX="6" RadiusY="6"></EllipseGeometry>
            </Path.Data>
        </Path>

        <!--原点-->
        <TextBlock Text="O" Canvas.Left="-15" Canvas.Bottom="-15" Foreground="Blue" FontSize="13"/>

        <!--线段长度-->
        <Canvas>
            <TextBlock x:Name="LeftPathLength" Text="10" FontSize="8" Canvas.Left="75" Canvas.Top="50" Foreground="White"/>
            <TextBlock x:Name="BottomPathLength" Text="10" FontSize="8" Canvas.Left="100" Canvas.Top="85" Foreground="White"/>
            <TextBlock x:Name="CenterPathLength" Text="10" FontSize="8" Canvas.Left="100" Canvas.Top="85" Foreground="White"/>
        </Canvas>
    </Canvas>

 另外，关于代码逻辑的实现，都在代码中了，也加了很多注释，欢迎大家指正。

 链接：平行四边形_可拖拽代码(WPF)