SweepGradient Android - Как установить начальный угол для градиента

Question

Мне трудно понять, как использовать SweepGradient, чтобы показать мой цвет градиента с заданного c угла на Canvas.

Например: если у меня есть ar c с 1 до 15 часов, я хотел бы предоставить Gradient как Color. Gradient должен начинаться с 14:00.

У меня есть следующий код, который показывает Color без наложения на него градиента.

 SweepGradient sweepGradient = new
                                SweepGradient(provideRectF().width() / 2, provideRectF().height() / 2,
                                arcColors, new float[]{
                                0.1f, 0.2f, 0.3f, 0.4f, 0.5f, 0.6f, 0.7f, 0.8f, 0.9f, 1.0f
                        });

                        Matrix matrix = new Matrix();
                        matrix.postRotate(currentAngle, provideRectF().width() / 2, provideRectF().height() / 2);
                        sweepGradient.setLocalMatrix(matrix);

Как мне сделать Color показать градиент от 2 вечера (в углах) для данного ar c?

Answer 1

Этот ответ основан на превосходном сообщении о SweepGradient, написанном Аттилой Таньи.

Чтобы лучше понять SweepGradient, давайте сначала раскрасим весь экран с помощью SweepGradient, который расположен по центру экрана и показывает участки, соответствующие циферблату часов (обратите внимание, что область между 13:00 и 14:00 имеет цвет solid, поскольку это является частью вашей настройки):

Позиции:

// positions for a clock face
// note: we need an opening position 0.0f as well as a closing position 1.0f, both of which belong to 3 pm
float[] positions = {0.0f,
            1/12f, 2/12f, 3/12f, 
            4/12f, 5/12f, 6/12f,
            7/12f, 8/12f, 9/12f,
            10/12f, 11/12f, 1.0f};

Цвета:

int yellow = 0xFFFFFF88;
int blue = 0xFF0088FF;
int white = 0xFFFFFFFF;
int black = 0xFF000000;

// provide as many color values as there are positions
// we want to paint a "normal color" from 1pm to 2pm and then a gradient from 2pm to 3 pm
int[] colors = { black, // the first value is for 3 pm, the sweep starts here
        yellow, // 4
        white,  // 5
        black,  // 6
        white,  // 7
        yellow, // 8
        blue,   // 9
        black,  // 10
        white,  // 11
        black,  // 12
        blue,   // 1 constant color from 1pm to 2pm
        blue,   // 2
        white // the last value also is at 3 pm, the sweep ends here
};

Инициализация Path и Paint:

private Path circle = new Path();
private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

// ...
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeWidth(30);

Я экспериментировал с пользовательским View и настроил градиент в onLayout(). Поскольку пост о рисовании ар c, я попробовал следующий круг:

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    // use a square rectangle which does not touch the screen borders:
    float squareMaxWidth = Math.min(right - left, bottom - top) - 20;
    RectF circleRect = new RectF(left + 20, top + 20, left + squareMaxWidth, top + squareMaxWidth);
    // draw a full circle
    circle.addArc(circleRect, 180, 360);
    // calculate its center
    float centerH = (circleRect.right + circleRect.left)*0.5f;
    float centerV = (circleRect.bottom + circleRect.top)*0.5f;

    sweepGradient = new SweepGradient(centerH,centerV, colors, positions);
    paint.setShader(sweepGradient);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawPath(circle, paint);
}

Результат:

Далее, давайте просто нарисуем границу: изменим стиль Paint

paint.setStyle(Paint.Style.STROKE);

И наконец, просто нарисуйте ар c с 13:00 до 15:00. Помните, что угол 3 часа дня равен нулю, и что одна часть на циферблате соответствует 30 градусам. Таким образом, в onLayout() у нас есть

circle.addArc(circleRect, 300, 60);

Другой пример: если вы хотите нарисовать ар c с 16:15 до 4:45 вечера с градиентом, начинающимся в 4:33 вечера, вы получите следующую картинку (цветной ар c, нарисованный по всему кругу SweepGradient с чередованием черного и белого в каждый "час")

Цвета:

int[] colors = {      
        primaryColor,
        primaryColor,
        accentColor };

Чтобы вычислить позиции, нужно немного подсчитать:

60 минут = один час ~ 1 / 12f
3 минуты = один час / 20 ~ 1 / 240f
15 минут = 5 * 3 минуты ~ 5 / 240f = 1 / 48f
45 минут = 3 * 15 минут ~ 1 / 16f
33 минуты = 11 * 3 минуты ~ 11 / 240f

float[] positions = {
        (1/12f + 1/48f),   // 4:15 pm
        (1/12f + 11/240f), // 4:33 pm
        (1/12f + 1/16f)    // 4:45 pm
     };

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

один час ~ 30 градусов
одна минута ~ 0,5 градуса

// start at 4:15 pm:
float startAngle = (30 +  15*0.5f);
// sweep for 1/2 hour:
float sweepAngle = 15f;
circle.addArc(circleRect, startAngle, sweepAngle);