如何在一定的要求下绘制这样的分段圆 [英] How to draw segmented circle like this with certain requirements
问题描述
我似乎无法弄清楚.我正在尝试绘制一个分段的圆圈(看起来像圆圈内的圆圈).但是我希望这些段具有特定的颜色并且在较小的圆圈内是透明的.最好，我想让分段线的颜色与圆圈不同
I can't just seem to figure it out. I am trying to draw a segmented circle (what looks like circle inside a circle). However I want the segments to have specific colors and to be transparent inside the smaller circle. Preferably , I would like to make the color of the segmented lines different than the circle
以下是我想到的解决方案:
Here are the solutions I had in mind:
1- 用填充颜色为大圆画圆弧，为小圆画一个圆.这有2个问题.第一个是内圆区域不再透明，因为它从较大的区域获取颜色.第二个问题是外圆的分割线一直到中心(不仅到内圆周长)
1- Draw arc with fill color for the bigger circle and draw a circle for the small circle. 2 problems with this. First one is that the inner circle area is no longer transparent as it takes the color from the bigger one. Second problem is that the segmentation lines of the outer circle is going all the way to the center (not only to the inner circle perimeter)
2) 为较大的外圆画圆弧，为内圆画圆.将其设置为颜色填充但不显示笔划.然后在顶部绘制另一个没有填充的外圆以显示笔画.然后使用计算(角度和半径)在内外圆之间绘制线条以确定线条的位置......非常复杂的解决方案，必须有另一种方法.即使使用此解决方案，中心显示的颜色仍然存在问题，但使用渐变可能会有所帮助.
2) Draw arcs for the bigger outer circle and draw circle for the inner circle. Set it to be color filled but don't show strokes. Then draw another outer circle on top with no fill just to show strokes. And then draw lines between the inner and outer circle using the calculations ( angle and radius) to determine where the lines are... Very convoluted solution, there has to be another way. Even with this solution, still have problem with the color showing in the center but maybe playing with gradient can help.
我在 SO 上读了很多，但我找不到正确的答案，因为许多答案会取消对圆参数的控制
I read so much on SO but I couldn't figure the right answer as many answers would remove the control of circle parameters
帮助！！！
推荐答案
@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，即视图的四分之一.笔画宽度的一半在外面，另一半在里面，就像这样:
I'm drawing arcs using the Path class and strokes. Style.STROKE gives arcs without filling. Stroke width is set to size/4 which is a quarter of the view. Half of that stroke width goes outside and the second half goes inside, like this:
xxxxxxxx 宽度为 5 的弧的外边框
xxxxxxxx outer border of the arc of width 5
xxxxxxxx
------------笔画
------------ stroke
xxxxxxxx
xxxxxxxx 弧的内边界
xxxxxxxx inner border of the arc
这就是我使用插图的原因 - 我需要稍微偏移笔划以使其适合视图.没有插图，圆弧被视图的所有四个边切割.
That's why I'm using insets - I need to offset the stroke a bit in order to fit it in the view. Without insets the arcs are cut by all four sides of the view.
为什么画布旋转?因为使用内置方法旋转画布比手动计算线更容易.旋转使用三角函数，很快就会变得非常复杂、难以阅读且容易出错.基本上我是在旋转纸并画直线.
And why canvas rotation? Because it's easier to rotate the canvas with built-in methods than calculate lines manually. Rotation uses trigonometric functions and quickly becomes quite complex, hard to read and error prone. Basically I'm rotating the paper and drawing straight lines.
这篇关于如何在一定的要求下绘制这样的分段圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
