简介

SkiaSharp 是一个强大的 2D 图形引擎，可以用来绘制各种图形，包括贝塞尔曲线。本文将详细介绍如何在 WinForm 应用程序中使用 SkiaSharp 绘制二次贝塞尔曲线和三次贝塞尔曲线。

环境准备

首先需要通过 NuGet 包管理器安装以下包：

• SkiaSharp
• SkiaSharp.Views.WindowsForms

完整示例代码

C#
using SkiaSharp;
using SkiaSharp.Views.Desktop;

namespace AppBezier
{
    public partial class Form1 : Form
    {
        private SKGLControl skControl;
        public Form1()
        {
            InitializeComponent();
            InitializeSkiaSharp();
        }

        private void InitializeSkiaSharp()
        {
            // 创建 SKGLControl 控件
            skControl = new SKGLControl();
            skControl.Dock = DockStyle.Fill;
            skControl.PaintSurface += SkControl_PaintSurface;
            this.Controls.Add(skControl);
        }

        private void SkControl_PaintSurface(object sender, SKPaintGLSurfaceEventArgs e)
        {
            // 获取画布
            SKCanvas canvas = e.Surface.Canvas;

            // 清空画布
            canvas.Clear(SKColors.White);

            // 创建画笔
            using (var paint = new SKPaint
            {
                Style = SKPaintStyle.Stroke,
                Color = SKColors.Blue,
                StrokeWidth = 2,
                IsAntialias = true
            })
            {
                // 绘制二次贝塞尔曲线
                DrawQuadraticBezier(canvas, paint);

                // 修改画笔颜色
                paint.Color = SKColors.Red;

                // 绘制三次贝塞尔曲线
                DrawCubicBezier(canvas, paint);

                // 绘制控制点和辅助线
                DrawControlPoints(canvas);
            }
        }

        private void DrawQuadraticBezier(SKCanvas canvas, SKPaint paint)
        {
            // 定义二次贝塞尔曲线的点
            var path = new SKPath();

            // 起点
            float startX = 50;
            float startY = 200;

            // 控制点
            float controlX = 150;
            float controlY = 50;

            // 终点
            float endX = 250;
            float endY = 200;

            // 移动到起点
            path.MoveTo(startX, startY);

            // 绘制二次贝塞尔曲线
            path.QuadTo(controlX, controlY, endX, endY);

            // 绘制路径
            canvas.DrawPath(path, paint);
        }

        private void DrawCubicBezier(SKCanvas canvas, SKPaint paint)
        {
            // 定义三次贝塞尔曲线的点
            var path = new SKPath();
            
            // 起点
            float startX = 300;
            float startY = 200;

            // 第一个控制点
            float control1X = 400;
            float control1Y = 50;

            // 第二个控制点
            float control2X = 500;
            float control2Y = 350;

            // 终点
            float endX = 600;
            float endY = 200;

            // 移动到起点
            path.MoveTo(startX, startY);

            // 绘制三次贝塞尔曲线
            path.CubicTo(control1X, control1Y, control2X, control2Y, endX, endY);

            // 绘制路径
            canvas.DrawPath(path, paint);
        }

        private void DrawControlPoints(SKCanvas canvas)
        {
            // 创建控制点画笔
            using (var pointPaint = new SKPaint
            {
                Style = SKPaintStyle.Fill,
                Color = SKColors.Green,
                IsAntialias = true
            })
            using (var linePaint = new SKPaint
            {
                Style = SKPaintStyle.Stroke,
                Color = SKColors.Gray,
                StrokeWidth = 1,
                PathEffect = SKPathEffect.CreateDash(new float[] { 5, 5 }, 0),
                IsAntialias=true
            })
            {
                // 二次贝塞尔曲线的控制点
                canvas.DrawCircle(50, 200, 4, pointPaint);    // 起点
                canvas.DrawCircle(150, 50, 4, pointPaint);    // 控制点
                canvas.DrawCircle(250, 200, 4, pointPaint);   // 终点

                // 绘制辅助线
                canvas.DrawLine(50, 200, 150, 50, linePaint);
                canvas.DrawLine(150, 50, 250, 200, linePaint);

                // 三次贝塞尔曲线的控制点
                canvas.DrawCircle(300, 200, 4, pointPaint);   // 起点
                canvas.DrawCircle(400, 50, 4, pointPaint);    // 控制点1
                canvas.DrawCircle(500, 350, 4, pointPaint);   // 控制点2
                canvas.DrawCircle(600, 200, 4, pointPaint);   // 终点

                // 绘制辅助线
                canvas.DrawLine(300, 200, 400, 50, linePaint);
                canvas.DrawLine(400, 50, 500, 350, linePaint);
                canvas.DrawLine(500, 350, 600, 200, linePaint);
            }
        }
    }
}

代码说明

初始化设置

首先，我们创建了一个 SKGLControl 控件并将其添加到窗体中。这个控件将作为我们的绘图表面。

绘制事件处理

在 SkControl_PaintSurface 事件处理程序中，我们执行实际的绘图操作：

• 获取画布并清空为白色背景
• 创建画笔设置绘图属性
• 分别绘制二次和三次贝塞尔曲线
• 绘制控制点和辅助线

二次贝塞尔曲线

二次贝塞尔曲线使用三个点来定义：

• 起点
• 一个控制点
• 终点

使用 QuadTo 方法来绘制二次贝塞尔曲线。

三次贝塞尔曲线

三次贝塞尔曲线使用四个点来定义：

• 起点
• 两个控制点
• 终点

使用 CubicTo 方法来绘制三次贝塞尔曲线。

控制点和辅助线

为了更好地理解贝塞尔曲线的形成，我们还绘制了：

• 控制点（绿色圆点）
• 控制点之间的虚线连接

注意事项

1. 确保正确安装了所需的 NuGet 包
2. 控制点的位置可以根据需要调整，这将改变曲线的形状
3. 可以通过修改画笔属性来改变曲线的颜色、粗细等样式
4. 本示例使用了固定的控制点位置，实际应用中可以根据需要动态调整

总结

SkiaSharp 提供了强大而灵活的贝塞尔曲线绘制功能。通过调整控制点，我们可以创建各种平滑的曲线效果。这个示例展示了基本的实现方法，你可以基于此进行更复杂的图形绘制。