WPF+SkiaSharp实现自绘拖曳小球

WPF 是一种跨平台、络人机交互（HCI）的技术，而 SkiaSharp 是一种用于高效地进行 2D 图形渲染的跨平台、高性能的图形库。这两者的结合可以实现一些非常炫酷的效果，比如实现自绘拖曳小球。

本攻略将分为以下几个步骤：

1. 创建 WPF 窗口；
2. 在 WPF 窗口中引用 SkiaSharp 和 SkiaSharp.Views.Wpf，并在 XAML 中定义 SkiaSharp Surface；
3. 编写自定义 SkiaSharp 控件，实现小球的绘制和拖拽效果；
4. 在 WPF 窗口中使用自定义控件。

以下将具体细说每个步骤。

1. 创建 WPF 窗口

在创建 WPF 窗口时，需要添加 SkiaSharp 和 SkiaSharp.Views.Wpf 两个 NuGet 包，这两个包将后续的绘制和视图处理都依赖于它们。

2. 在 WPF 窗口中引用 SkiaSharp 和 SkiaSharp.Views.Wpf

在 WPF 窗口中通过添加 SkiaSharp.SurfaceControl 窗口元素，并添加 SkiaSharp.SurfaceExtenisions 类库，即可完成所有需要的依赖引用工作。

3. 编写自定义 SkiaSharp 控件

在编写自定义 SkiaSharp 控件时，需要继承 SkiaSharp.Views.Wpf.SKElement 类，然后在 OnPaintSurface 事件中实现小球的绘制和拖拽效果。具体实现代码如下：

public class SKDraggableBall : SKElement
{
    private SKPaint _paint;
    private SKPoint _position;
    private float _radius;
    private bool _isDragging;

    public SKDraggableBall()
    {
        // 初始化 SkiaSharp 画笔
        _paint = new SKPaint
        {
            Color = SKColors.Blue,
            IsAntialias = true
        };
        // 初始化小球的位置和半径
        _position = new SKPoint(100, 100);
        _radius = 20;
    }

    protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        // 获取 SKSurface 对象，并获取画布上下文
        var surface = e.Surface;
        var canvas = surface.Canvas;

        // 绘制小球
        canvas.DrawCircle(_position.X, _position.Y, _radius, _paint);
    }

    protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
    {
        // 获取当前鼠标位置，判断是否在小球内
        var mousePosition = e.GetPosition(this);
        if (Math.Pow(mousePosition.X - _position.X, 2) + Math.Pow(mousePosition.Y - _position.Y, 2) <= Math.Pow(_radius, 2))
        {
            // 当前处于拖拽状态
            _isDragging = true;
        }
    }

    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
    {
        // 结束拖拽状态
        _isDragging = false;
    }

    protected override void OnMouseMove(MouseEventArgs e)
    {
        // 当前处于拖拽状态时，更新小球位置
        if (_isDragging)
        {
            _position = ToSKPoint(e.GetPosition(this));
            InvalidateVisual();
        }
    }

    // 将 WPF 的 Point 转化为 SkiaSharp 的 SKPoint
    private SKPoint ToSKPoint(Point point)
    {
        return new SKPoint((float)point.X, (float)point.Y);
    }
}

在上述代码中，通过继承 SKElement 类，实现了 OnPaintSurface、OnMouseLeftButtonDown、OnMouseLeftButtonUp、OnMouseMove 四个事件的处理，分别对应绘制小球、鼠标按下、鼠标抬起、鼠标移动事件。

4. 在 WPF 窗口中使用自定义控件

在 WPF 窗口中使用自定义控件时，需要在 XAML 中添加 SkiaSharp.SurfaceControl 元素，然后通过可视化方式添加自定义控件，代码如下：

<Window x:Class="WpfSkiaSharpDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:skia="clr-namespace:SkiaSharp.Views.Wpf;assembly=SkiaSharp.Views.Wpf"
    xmlns:local="clr-namespace:WpfSkiaSharpDemo"
    Title="MainWindow" Height="450" Width="800">
    <Grid>
        <skia:SKElement x:Name="skiaSurface" PaintSurface="SkiaSurface_OnPaintSurface"/>
        <local:SKDraggableBall x:Name="myBall"/>
    </Grid>
</Window>

在 XAML 中添加了 SKElement 和自定义控件，其中 SKElement 用于绑定 SkiaSharp 的 SurfaceControl 元素，并处理 PaintSurface 事件，自定义控件用于绘制小球并处理小球的鼠标交互事件。

在 MainWindow.xaml.cs 文件中，将继承自 SKElement 的 myBall 控件添加到 SKElement 控件中，用于在 Surface 上绘制小球。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        // 将自定义控件添加到面板中
        skiaSurface.Children.Add(myBall);
    }

    private void SkiaSurface_OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
    {
        // 在 SKSurface 上绘制自定义控件
        myBall.InvalidateVisual();
    }
}

在上述代码中，通过在 PaintSurface 事件中调用 myBall.InvalidateVisual() 方法，将图形绘制到 SKSurface 上，从而实现小球的拖曳效果。

以上就是使用 WPF 和 SkiaSharp 实现自绘拖曳小球的完整攻略。在实际编写过程中，可能需要考虑一些小细节，但按照上述步骤进行控件绘制和控件间的交互，即可实现非常炫酷的效果。