WPF_三次贝塞尔曲线

效果

实现源码

XAML代码

<Window.Resources>
    <ControlTemplate x:Key="template" TargetType="{x:Type Thumb}">
        <Grid x:Name="bg">
            <Grid.Background>
                <LinearGradientBrush >
                    <GradientStop Color="Red" Offset="0."/>
                    <GradientStop Color="Blue" Offset="0.5"/>
                    <GradientStop Color="Green" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsDragging" Value="True">
                <Setter TargetName="bg" Property="Background" Value="red"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Canvas x:Name="canvas" Margin="0,0">
        <Thumb x:Name="thumb1" Canvas.Top="50" Canvas.Left="50" Width="40" Height="40" Template="{StaticResource template}" DragDelta="Thumb_DragDelta"/>
        <Thumb x:Name="thumb2" Canvas.Top="250" Canvas.Left="250" Width="40" Height="40" Template="{StaticResource template}" DragDelta="Thumb_DragDelta"/>
        <Path  x:Name="path" Data="M 0,0 c 200,0 100,300 300,300" Height="200" 
               Stretch="Fill" Stroke="Green" StrokeStartLineCap="Round" StrokeEndLineCap="Round" 
               StrokeThickness="5" Width="200" Canvas.Left="381" Canvas.Top="105" RenderTransformOrigin="0.5,0.5">
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="scale" ScaleX="0"/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
    </Canvas>
</Grid>

cs代码

public MainWindow()
{
    InitializeComponent();
    UpdateThumb();
}

private void UpdateThumb()
{
    Point point1 = new Point((double)thumb1.GetValue(Canvas.LeftProperty) + thumb1.Width, (double)thumb1.GetValue(Canvas.TopProperty) + thumb1.Height /2);
    Point point2 = new Point((double)thumb2.GetValue(Canvas.LeftProperty), (double)thumb2.GetValue(Canvas.TopProperty) + thumb2.Height / 2);

    path.SetValue(Canvas.LeftProperty, Math.Min(point1.X, point2.X));
    path.SetValue(Canvas.TopProperty, Math.Min(point1.Y, point2.Y));

    path.Width = Math.Abs(point1.X - point2.X);
    path.Height = Math.Abs(point1.Y - point2.Y);

    scale.ScaleX = point1.X < point2.X ? point1.Y < point2.Y ? 1 : -1 : point1.Y < point2.Y ? -1 : 1;
}

private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
    Thumb thumb = (Thumb)sender;
    double nTop = Canvas.GetTop(thumb) + e.VerticalChange;
    double nLeft = Canvas.GetLeft(thumb) + e.HorizontalChange;
    Canvas.SetTop(thumb, nTop);
    Canvas.SetLeft(thumb, nLeft);
    UpdateThumb();
}