如何在有一定要求的情况下绘制这样的分段圆

Posted 2023-02-23

【中文标题】如何在有一定要求的情况下绘制这样的分段圆

【英文标题】：How to draw segmented circle like this with certain requirements

【发布时间】：2015-01-08 15:50:55

【问题描述】：

我似乎无法弄清楚。我正在尝试绘制一个分段的圆圈（看起来像圆圈内的圆圈）。但是我希望这些段具有特定的颜色并且在较小的圆圈内是透明的。最好是让分段线的颜色与圆形不同

以下是我想到的解决方案：

1- 用填充颜色为大圆画圆弧，为小圆画圆。这有2个问题。第一个是内圈区域不再透明，因为它从较大的区域获取颜色。第二个问题是外圆的分割线一直到中心（不仅仅是内圆周边）

2) 为较大的外圆画圆弧，为内圆画圆。将其设置为填充颜色但不显示笔画。然后在顶部绘制另一个没有填充的外圆，只是为了显示笔触。然后使用计算（角度和半径）在内圆和外圆之间画线以确定线的位置......非常复杂的解决方案，必须有另一种方法。即使使用此解决方案，中心显示的颜色仍然存在问题，但使用渐变可能会有所帮助。

我在 SO 上读了很多，但我无法找到正确的答案，因为很多答案会消除对圆参数的控制

求助！！！

【问题讨论】：

所以你尝试了***.com/questions/9741300 包括github.com/PhilJay/MPandroidChart 和github.com/lecho/hellocharts-android 库？

谢谢，有趣的链接。但我宁愿自己在 Canvas 中做，而不是使用库或了解它是如何工作的（因为它们看起来很复杂）。另外，我还有其他需要做的事情，所以我想建立它

哦，在那种情况下，我没有足够的能力来帮助你。此外，我想其他人会欣赏你的一些代码。

【参考方案1】：

@Override
public void draw(Canvas canvas) 
    float size = Math.min(getWidth(),getHeight());
    paint.setStrokeWidth(size/4);
    paint.setStyle(Paint.Style.STROKE);
    final RectF oval = new RectF(0, 0, getWidth(), getHeight());
    oval.inset(size/8,size/8);

    paint.setColor(Color.RED);
    Path redPath = new Path();
    redPath.arcTo(oval, 0, 120, true);
    canvas.drawPath(redPath, paint);

    paint.setColor(Color.GREEN);
    Path greenPath = new Path();
    greenPath.arcTo(oval, 120, 120, true);
    canvas.drawPath(greenPath, paint);

    paint.setColor(Color.BLUE);
    Path bluePath = new Path();
    bluePath.arcTo(oval, 240, 120, true);
    canvas.drawPath(bluePath, paint);

    paint.setStrokeWidth(2);
    paint.setColor(0xff000000);
    canvas.save();
    for(int i=0;i<360;i+=40)
        canvas.rotate(40,size/2,size/2);
        canvas.drawLine(size*3/4,size/2,size,size/2,paint);
    
    canvas.restore();

    final RectF ovalOuter = new RectF(0, 0, getWidth(), getHeight());
    ovalOuter.inset(1,1);
    canvas.drawOval(ovalOuter,paint);

    final RectF ovalInner = new RectF(size/4, size/4, size*3/4,size*3/4);
    canvas.drawOval(ovalInner,paint);

我正在使用 Path 类和笔划绘制弧线。 Style.STROKE 给出不填充的弧线。笔画宽度设置为 size/4，即视图的四分之一。笔划宽度的一半在外面，另一半在里面，如下所示：

xxxxxxxx宽度为5的圆弧的外边框

xxxxxxxx

------------笔画

xxxxxxxx

圆弧的xxxxxxxx内边框

这就是我使用插图的原因 - 我需要稍微偏移笔画以使其适合视图。如果没有插图，则弧会被视图的所有四个侧面切割。

为什么画布旋转？因为使用内置方法旋转画布比手动计算线条更容易。旋转使用三角函数并且很快变得相当复杂、难以阅读并且容易出错。基本上我是在旋转纸张并画直线。

【讨论】：

哇，非常感谢@Zielony。我试图理解它，但我遇到了一些麻烦。你为什么要在椭圆上插入？为什么Canvas是旋转的？任何解释都有帮助

当然，抱歉 :) 我将把它添加到答案中

非常感谢您的精彩解释 :)