如何使用SkiaSharp绘制带3/6/9/12点位置三角形的虚线圆？

完整实现代码 #

using System;
using SkiaSharp;

void Draw(SKCanvas canvas, int width, int height)
{
    // 原虚线圆绘制逻辑（优化变量名提升可读性）
    float circleRadius = 60f;
    float innerRadius = 53f;
    float circleCircumference = (float)Math.PI * innerRadius * 2f;
    float dashLength = circleCircumference / 6f;
    float gapLength = circleCircumference / 9f;

    var circleBorder = new SKPaint
    {
        IsAntialias = true,
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Blue,
        StrokeWidth = 5,
        PathEffect = SKPathEffect.CreateDash(new float[] { dashLength, gapLength }, -20)
    };

    float centerX = width / 2f;
    float centerY = height / 2f;
    canvas.DrawCircle(centerX, centerY, circleRadius, circleBorder);

    // 绘制四个方向的三角形标记
    float triangleHeight = 10f; // 三角形的高度，可按需调整
    float triangleBaseHalfWidth = triangleHeight / 2f; // 三角形底部半宽

    var trianglePaint = new SKPaint
    {
        IsAntialias = true,
        Style = SKPaintStyle.Fill,
        Color = SKColors.Blue // 与虚线圆颜色保持一致
    };

    // 12点钟方向三角形（指向圆外）
    var topTriangle = new SKPath();
    topTriangle.MoveTo(centerX, centerY - circleRadius - triangleHeight);
    topTriangle.LineTo(centerX - triangleBaseHalfWidth, centerY - circleRadius);
    topTriangle.LineTo(centerX + triangleBaseHalfWidth, centerY - circleRadius);
    topTriangle.Close();
    canvas.DrawPath(topTriangle, trianglePaint);

    // 3点钟方向三角形（指向圆外）
    var rightTriangle = new SKPath();
    rightTriangle.MoveTo(centerX + circleRadius + triangleHeight, centerY);
    rightTriangle.LineTo(centerX + circleRadius, centerY - triangleBaseHalfWidth);
    rightTriangle.LineTo(centerX + circleRadius, centerY + triangleBaseHalfWidth);
    rightTriangle.Close();
    canvas.DrawPath(rightTriangle, trianglePaint);

    // 6点钟方向三角形（指向圆外）
    var bottomTriangle = new SKPath();
    bottomTriangle.MoveTo(centerX, centerY + circleRadius + triangleHeight);
    bottomTriangle.LineTo(centerX - triangleBaseHalfWidth, centerY + circleRadius);
    bottomTriangle.LineTo(centerX + triangleBaseHalfWidth, centerY + circleRadius);
    bottomTriangle.Close();
    canvas.DrawPath(bottomTriangle, trianglePaint);

    // 9点钟方向三角形（指向圆外）
    var leftTriangle = new SKPath();
    leftTriangle.MoveTo(centerX - circleRadius - triangleHeight, centerY);
    leftTriangle.LineTo(centerX - circleRadius, centerY - triangleBaseHalfWidth);
    leftTriangle.LineTo(centerX - circleRadius, centerY + triangleBaseHalfWidth);
    leftTriangle.Close();
    canvas.DrawPath(leftTriangle, trianglePaint);
}

关键实现说明 #

• 变量优化：把原代码中模糊的变量名（如o、ff1）替换为语义明确的名称，便于后续维护调整。
• 三角形绘制逻辑：通过直接计算坐标点构建SKPath，每个三角形的顶点指向圆外，底边贴合虚线圆的边缘，保证位置精准。
• 样式统一：三角形使用与虚线圆相同的颜色，填充样式确保标记清晰可见。
• 可调整性：修改triangleHeight变量可以快速调整三角形的大小，若需要三角形指向圆内，只需反转坐标的加减逻辑即可。

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