在 Maui 中自绘组件1：绘制

在 Maui 中自绘组件 系列文章已完结，共六篇，此为第一篇。

• 在 Maui 中自绘组件1：绘制
• 在 Maui 中自绘组件2：可绑定属性
• 在 Maui 中自绘组件3：事件与命令
• 在 Maui 中自绘组件4：点击动效
• 在 Maui 中自绘组件5：状态与视觉效果

在这篇文章中，将自定义一个简单的按钮组件，绘制边框、背景、文字元素。

GraphicsView

Maui 中提供了 GraphicsView 视图，可通过继承 GraphicsView 视图来自定义组件。

GraphicsView 中定义了类型为 IDrawable 的属性，在渲染时，将调用 IDrawable 中的 Draw 方法来绘制组件。

创建 MagicButtonDrawable

新建一个空的 Maui 项目，在项目根目录下创建 Components 文件夹，在其中创建 MagicButtonDrawable 类，并继承 IDrawable。MagicButtonDrawable 将负责自定义组件的绘制。

public class MagicButtonDrawable : IDrawable
{
   
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
   
    }
}

绘制边框

定义方法 DrawStroke 来绘制边框：

public void DrawStroke(ICanvas canvas, RectF dirtyRect)
{
   
    canvas.SaveState();

    canvas.SetFillPaint(new SolidPaint(Brush.LightBlue.Color), dirtyRect);

    canvas.FillRoundedRectangle(dirtyRect.X,