Android - Как нарисовать градиент на основе дуги - PullRequest
22 голосов
/ 27 января 2012

Я пытаюсь создать дугу (переменное число градусов), которая постепенно переходит от одного цвета к другому. Например, от синего до красного:

enter image description here

Это мой код:

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);

Но в результате вся дуга окрашивается в один и тот же цвет.

Edit:
После дополнительных экспериментов я обнаружил, что разброс цвета определяется углом дуги. Если я рисую дугу с небольшим углом, отображается только первый цвет. Чем больше угол, тем больше цветов нарисовано. Если угол мал, кажется, что градиента нет.
Вот пример. Я рисую 4 дуги - 90, 180, 270 и 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);

А вот и результат:

enter image description here

Это удивительно, потому что я ожидаю, что КРАСНЫЙ будет в начале дуги, СИНИЙ в конце и между ними будет равномерно распределен независимо от угла.
Я попытался расставить цвета вручную, используя параметр местоположения, но результаты были такими же:

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

Есть идеи, как это решить?

Ответы [ 3 ]

29 голосов
/ 29 января 2012

Решением для этого является установка позиции СИНИЙ. Это делается так:

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

Проблема здесь в том, что при установке положения СИНИЙ на «1» это не означает, что оно будет располагаться в конце нарисованной дуги, а вместо этого в конце круга, частью которого является дуга. , Для решения этой проблемы СИНЯЯ позиция должна учитывать количество градусов в дуге. Поэтому, если я рисую дугу с X градусами, позиция будет установлена ​​следующим образом:

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

Таким образом, если X равен 90, градиент поместит СИНИЙ на 0,25 круга:

enter image description here

10 голосов
/ 11 мая 2013

Добавить к решению Йоава.

На моем Android Galaxy Nexus 4.2, данное решение не работает.

Если массив не содержит 0.0f и 1.0f, он игнорируется.

Мое окончательное решение было:

int[] colors = {Color.RED, Color.BLUE, Color.RED}; 
float[] positions = {0, Xf/360f, 1};
1 голос
/ 23 июля 2017

пять лет спустя, но правильный путь - сделать 0,749f с 0,750f отдельной строки, простой код выглядит так:

    val colors = intArrayOf(0xffff0000.toInt(), 0xff0000ff.toInt(), 0xffff0000.toInt(), 0xffff0000.toInt())
    val positions = floatArrayOf(0.0f, 0.749f, 0.750f, 1.0f)
...