Android - 如何绘制基于弧的渐变 [英] Android - How to draw an arc based gradient

问题描述

我正在尝试创建一个逐渐从一种颜色变为另一种颜色的弧线(度数可变).从蓝色到红色的例子:

I am trying to create an arc (variable number of degrees) that gradually goes from one color to another. From example from blue to red:

这是我的代码:

SweepGradient shader = new SweepGradient(center.x, center.y, resources.getColor(R.color.startColor),resources.getColor(R.color.endColor));
Paint paint = new Paint()
paint.setStrokeWidth(1);
paint.setStrokeCap(Paint.Cap.FILL);
paint.setStyle(Paint.Style.FILL);
paint.setShader(shader);
canvas.drawArc(rectF, startAngle, sweepAngle, true, paint);

但结果是整个弧线都涂上了相同的颜色.

But the result is the entire arc is painted with the same color.

经过更多的实验，我发现颜色扩散是由弧线的角度决定的.如果我画一个小角度的圆弧，只显示第一种颜色.角度越大，绘制的颜色越多.如果角度很小，似乎没有梯度.
这是一个例子.我正在绘制 4 条弧线 - 90、180、270 和 360:

After more experimenting, I found out that the color spread is determined by the angle of the arc. If I draw an arc with a small angle, only the first color is displayed. The larger the angle, more colors are drawn. If the angle is small it seems that there is no gradient.
Here is an example. I am drawing 4 arcs - 90, 180, 270 and 360:

RectF rect1 = new RectF(50, 50, 150, 150);
Paint paint1 = new Paint();
paint1.setStrokeWidth(1);
paint1.setStrokeCap(Paint.Cap.SQUARE);
paint1.setStyle(Paint.Style.FILL);

SweepGradient gradient1 = new SweepGradient(100, 100,
        Color.RED, Color.BLUE);
paint1.setShader(gradient1);

canvas.drawArc(rect1, 0, 90, true, paint1);

RectF rect2 = new RectF(200, 50, 300, 150);
Paint paint2 = new Paint();
paint2.setStrokeWidth(1);
paint2.setStrokeCap(Paint.Cap.SQUARE);
paint2.setStyle(Paint.Style.FILL);

SweepGradient gradient2 = new SweepGradient(250, 100,
        Color.RED, Color.BLUE);
paint2.setShader(gradient2);

canvas.drawArc(rect2, 0, 180, true, paint2);

RectF rect3 = new RectF(50, 200, 150, 300);
Paint paint3 = new Paint();
paint3.setStrokeWidth(1);
paint3.setStrokeCap(Paint.Cap.SQUARE);
paint3.setStyle(Paint.Style.FILL);

SweepGradient gradient3 = new SweepGradient(100, 250,
        Color.RED, Color.BLUE);
paint3.setShader(gradient3);

canvas.drawArc(rect3, 0, 270, true, paint3);

RectF rect4 = new RectF(200, 200, 300, 300);
Paint paint4 = new Paint();
paint4.setStrokeWidth(1);
paint4.setStrokeCap(Paint.Cap.SQUARE);
paint4.setStyle(Paint.Style.FILL);

SweepGradient gradient4 = new SweepGradient(250, 250,
        Color.RED, Color.BLUE);
paint4.setShader(gradient4);

canvas.drawArc(rect4, 0, 360, true, paint4);

结果如下:

这很令人惊讶，因为我希望红色在弧的起点，蓝色在终点，而无论角度如何，都可以均匀分布.
我尝试使用位置参数手动分隔颜色，但结果相同:

This is surprising because I'd expect the RED to be at the start of the arc, the BLUE at the end and enything between to be spread evenly regardless of angle.
I tried to space the colors manually using the positions parameter but the results were the same:

int[] colors = {Color.RED, Color.BLUE};
float[] positions = {0,1};
SweepGradient gradient = new SweepGradient(100, 100, colors , positions);

知道如何解决这个问题吗?

Any idea how to solve this?

推荐答案

解决这个问题的方法是设置BLUE的位置.这是这样做的:

The solution for this is to set the position of BLUE. This is done like so:

int[] colors = {Color.RED, Color.BLUE};
float[] positions = {0,1};
SweepGradient gradient = new SweepGradient(100, 100, colors , positions);

这里的问题是，当将 BLUE 的位置设置为 '1' 时，这并不意味着它将定位在绘制的圆弧的末端，而是位于圆弧所在的圆的末端.为了解决这个问题，BLUE 位置应该考虑弧中的度数.因此，如果我正在绘制 X 度的圆弧，则位置将如下设置:

The problem here is that when setting the position of BLUE to '1' this does not mean that it will be positioned at the end of the drawn arc, but instead at the end of the circle of which the arc is part of. To solve this, BLUE position should take into account the number of degrees in the arc. So if I'm drawing an arc with X degrees, position will be set like so:

float[] positions = {0,Xf/360f};

因此，如果 X 为 90，渐变会将蓝色放置在圆的 0.25 处:

So if X is 90, the gradient will place BLUE at 0.25 of the circle:

这篇关于Android - 如何绘制基于弧的渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！