Sweep Gradient: что это такое и его примеры

Ответ 1

Градиент слова в этом контексте (как и во многих графических редакторах, включая Photoshop) относится к плавному переходу между несколькими цветами, а не к использованию только одного цвета для заполнения области.

API Android предоставляет 3 разных градиента: LinearGradient, RadialGradient и SweepGradient.

Это все подклассы Shader. Вы можете установить Shader на объект Paint, а затем нарисовать любую фигуру с помощью этой Paint. Форма будет заполнена цветами и переходами между ними, в зависимости от вида градиента.

Например:

Это изображение можно создать с помощью этого кода:

Bitmap test = Bitmap.createBitmap(640, 200, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(test);
{ // draw a dark gray background
    Paint backgroundPaint = new Paint();
    backgroundPaint.setARGB(255, 24, 24, 24);
    c.drawPaint(backgroundPaint);
}
Path heart = new Path();
{ // prepare a heart shape
    heart.moveTo(110, 175);
    heart.lineTo(10, 75);
    RectF leftCircle = new RectF(10, 25, 110, 125);
    heart.arcTo(leftCircle, 180, 180);
    RectF rightCircle = new RectF(110, 25, 210, 125);
    heart.arcTo(rightCircle, 180, 180);
    heart.close();
}
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setTextSize(18f);
int[] colors = {
        0xFFFFFF88, // yellow
        0xFF0088FF, // blue
        0xFF000000, // black
        0xFFFFFF88  // yellow
};
float[] positions = {0.0f, 0.33f, 0.66f, 1.0f};
{ // draw the left heart
    SweepGradient sweepGradient;
    { // initialize the sweep gradient
        sweepGradient = new SweepGradient(50, 50, colors, positions);
        paint.setShader(sweepGradient);
    }
    c.drawPath(heart, paint);
    c.drawText("SweepGradient", 50, 190, paint);
}
{ // draw the middle heart
    LinearGradient linearGradient;
    { // initialize a linear gradient
        linearGradient = new LinearGradient(250, 0, 350, 150, colors, positions, Shader.TileMode.CLAMP);
        paint.setShader(linearGradient);
    }
    heart.offset(210, 0); // move the heart shape to the middle
    c.drawPath(heart, paint);
    c.drawText("LinearGradient", 260, 190, paint);
}
{ // draw the right heart
    RadialGradient radialGradient;
    { // initialize a linear gradient
        radialGradient = new RadialGradient(550, 50, 100, colors, positions, Shader.TileMode.CLAMP);
        paint.setShader(radialGradient);
    }
    heart.offset(210, 0); // move the heart shape to the right
    c.drawPath(heart, paint);
    c.drawText("RadialGradient", 470, 190, paint);
}
{ // save the bitmap
    String filename = Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + "test.png";
    FileOutputStream out = null;
    try {
        out = new FileOutputStream(filename);
        test.compress(Bitmap.CompressFormat.PNG, 90, out);
    } catch (Exception e) {
    } finally {
        try {
            out.close();
        } catch (Exception e) {
        }
    }
}

• Таким образом, LinearGradient является Linear Gradient в Photoshop, RadialGradient - Radial Gradient, а SweepGradient - Angular Gradient, как описано в третьей ссылке. Я рекомендую сначала попробовать их в редакторе изображений (все популярные редакторы изображений имеют эти инструменты), и вы быстро получите представление о том, как они работают.

• Вы также можете использовать эти градиенты в XML-чертеже (например, в вашей 4-й ссылке) с ограничением использования трех цветов максимум.

• В SweepGradient, при предоставлении позиций, точка 0.0 находится в 3 часа, идет по часовой стрелке (с 0,25 в 6 часов, 0,5 в 9 часов, 0,75 в 12 часов и 1,0 назад при 3 o 'Часы).

О ваших выводах:

• Как вы можете видеть, любую фигуру можно нарисовать с помощью SweepGradient, а не только с кольцом. Даже ярлыки рисуются градиентами в приведенном выше примере.
• Да, аналоговая синхронизация часов.
• При использовании SweepGradient очень похож на LinearGradient, за исключением того, что вам не нужно предоставлять TileMode, потому что вы не можете запускаться за пределы вашего списка цветов.
• Да, вам нужно предоставить координаты центральной точки.

Надеюсь, это прояснит ситуацию.