如何在Xamarin中创建可随温度缩放的部分圆形？

一、优化绿色半环形的实现 #

你当前用多个BoxView叠加的方式虽然能实现效果，但代码冗余且不够灵活。推荐用SkiaSharp直接绘制半环形，一步到位：

1. 引入SkiaSharp NuGet包（SkiaSharp.Views.Forms）
2. 在布局中添加SKCanvasView，重写OnPaintSurface方法绘制路径：
   • 定义外圆和内圆的半径、中心坐标
   • 绘制外圆的上半圆弧（角度范围180°到360°）
   • 绘制内圆的上半圆弧（角度范围360°到180°）
   • 闭合路径并填充绿色

二、实现随温度变化的黑色动态弧形 #

这部分是核心需求，同样用SkiaSharp来实现动态绘制：

1. 在ViewModel中定义Temperature属性（比如范围0-100），实现INotifyPropertyChanged接口
2. 在SKCanvasView的OnPaintSurface方法中，根据当前温度计算弧形的扫过角度：
   • 假设温度0对应0°，温度100对应180°（填满上半环形），则扫过角度 = (Temperature / 100) * 180
   • 使用SKPaint设置黑色画笔，调用DrawArc方法绘制弧形，起始角度设为180°，扫过角度随温度动态计算
3. 绑定Temperature属性，当温度变化时触发SKCanvasView.InvalidateSurface()重绘

代码示例 #

XAML布局

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="YourNamespace.TemperatureRingPage">
    <skia:SKCanvasView x:Name="RingCanvas" PaintSurface="OnRingCanvasPaintSurface" />
</ContentPage>

后台代码

using SkiaSharp;
using SkiaSharp.Views.Forms;
using Xamarin.Forms;

public partial class TemperatureRingPage : ContentPage
{
    private float _temperature = 50; // 初始温度
    public float Temperature
    {
        get => _temperature;
        set
        {
            _temperature = value;
            RingCanvas.InvalidateSurface();
        }
    }

    public TemperatureRingPage()
    {
        InitializeComponent();
    }

    private void OnRingCanvasPaintSurface(object sender, SKPaintSurfaceEventArgs e)
    {
        var canvas = e.Surface.Canvas;
        canvas.Clear(SKColors.White);

        var center = new SKPoint(e.Info.Width / 2, e.Info.Height / 2);
        var outerRadius = Math.Min(e.Info.Width, e.Info.Height) / 2 - 20;
        var innerRadius = outerRadius - 25;

        // 绘制绿色半环形
        using (var greenPaint = new SKPaint { Color = SKColor.Parse("#a6ca5c"), Style = SKPaintStyle.Fill })
        using (var path = new SKPath())
        {
            path.AddArc(center.X - outerRadius, center.Y - outerRadius, outerRadius * 2, outerRadius * 2, 180, 180);
            path.AddArc(center.X - innerRadius, center.Y - innerRadius, innerRadius * 2, innerRadius * 2, 360, -180);
            path.Close();
            canvas.DrawPath(path, greenPaint);
        }

        // 绘制黑色动态弧形
        var sweepAngle = (Temperature / 100) * 180;
        using (var blackPaint = new SKPaint { Color = SKColors.Black, Style = SKPaintStyle.Fill })
        {
            canvas.DrawArc(center.X - outerRadius, center.Y - outerRadius, outerRadius * 2, outerRadius * 2,
                          180, sweepAngle, true, blackPaint);
            // 遮挡内圆，保持环形效果
            using (var innerCirclePaint = new SKPaint { Color = SKColors.White, Style = SKPaintStyle.Fill })
            {
                canvas.DrawCircle(center, innerRadius, innerCirclePaint);
            }
        }
    }
}

为什么选择SkiaSharp？ #

• 相比BoxView叠加，代码更简洁，无需手动计算偏移量
• 动态绘制能力强，温度变化时只需重绘弧形，性能更高
• 可灵活调整环形的粗细、颜色、起始角度等参数，扩展性更好

内容的提问来源于stack exchange，提问作者Antoine21000