Android: нарисуйте дугу в холсте API с градиентной заливкой - PullRequest
Новая
       39

Android: нарисуйте дугу в холсте API с градиентной заливкой

5 голосов
/ 12 января 2012

Я хочу нарисовать дугу, используя холст, используя градиентную заливку. Как этого добиться?

Ответы [ 3 ]

10 голосов
/ 21 июня 2012

Эй, я украл это отсюда: Нарисуйте дугу с SweepGradient в Android

, но она работает нормально, вместо этого я использовал LinearGradient. 

Shader gradient = new SweepGradient (0,getMeasuredHeight()/2, Color.RED, Color.WHITE);
lightRed.setShader(gradient);
canvas.drawArc(rectf, -90, 360, false, lightRed);
2 голосов
/ 24 февраля 2019

В моем случае я должен был нарисовать кого-то вроде этого:

Может быть, вы тоже.

Итак, давайте подумаем! Как работает Sweep Gradient? Если вы рисуете прямоугольник через это: 

     private val colors = intArrayOf(ContextCompat.getColor(context, R.color.progress_from_color),
 ContextCompat.getColor(context, R.color.progress_to_color))

    private var positions = floatArrayOf(0.0f, 1.0f)
    private var sweepGradient : SweepGradient? = null

    sweepGradient = SweepGradient(w / 2F,h / 2F,colors,  positions)

будет:

Так что идея состоит в том, чтобы повернуть его! 

 sweepGradient.apply {
            val rotate = 270f
            val gradientMatrix = Matrix()
            gradientMatrix.preRotate(rotate, mWidth / 2F, mHeight / 2F)
            setLocalMatrix(gradientMatrix)
        }

Наконец мы можем нарисовать нашу дугу: 

 mPaint.shader = gradient
 canvas.drawArc(rectF, startAngle, finishedSweepAngle, false, mPaint)

Смотрите мой полный пользовательский вид исходного кода на github хранилище .

1 голос
/ 21 декабря 2018

Вы также можете использовать массив цветов и переменных позиций.Например, определите 10 цветов, по одному на каждые 10% прогресса: 

<color name="color_0">#3C3C3F41</color>
<color name="color_10">#1AFF2323</color>
<color name="color_20">#33FF2323</color>
<color name="color_30">#4DFF2323</color>
<color name="color_40">#66FF2323</color>
<color name="color_50">#80FF2323</color>
<color name="color_60">#99FF2323</color>
<color name="color_70">#B3FF2323</color>
<color name="color_80">#CCFF2323</color>
<color name="color_90">#E6FF2323</color>
<color name="color_100">#FFFF2323</color>

Поместите все эти цвета в intArray цвета, например: 

var colors = intArrayOf(
            ContextCompat.getColor(context, R.color.color_0),
            ContextCompat.getColor(context, R.color.color_10),
            ContextCompat.getColor(context, R.color.color_20),
            ContextCompat.getColor(context, R.color.color_30),
            ContextCompat.getColor(context, R.color.color_40),
            ContextCompat.getColor(context, R.color.color_50),
            ContextCompat.getColor(context, R.color.color_60),
            ContextCompat.getColor(context, R.color.color_70),
            ContextCompat.getColor(context, R.color.color_80),
            ContextCompat.getColor(context, R.color.color_90),
            ContextCompat.getColor(context, R.color.color_100)
        )

Затем определите позиции.Позиции перемещаются от 0,0 до 1,0 (позиции 0,1 соответствуют color_10, позиции 0,2 - color_20 и т.

Наконец, мы можем нарисовать нашу дугу с помощью нашей шейдерной краски: 

 canvas.drawArc(rectf, -90, 360, false, lightRed);

Окончательный эффект в моем пользовательском представлении:

enter image description here

...