SweepGradient Android - 如何设置渐变的起始角度

Question

我很难理解如何使用 SweepGradient 从特定角度在 Canvas 上显示我的渐变颜色。

例如：如果我有下午 1 点到 3 点的弧线，我想提供 Gradient 作为 Color。 Gradient 应该从下午 2 点开始。

我有以下代码显示 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 点开始的渐变（以角度表示）？

Answer 1

此答案基于 Attila Tanyi 的 excellent post on SweepGradient。

为了更好地理解SweepGradient，让我们先在整个屏幕上绘制一个SweepGradient，它位于屏幕中间并显示对应于钟面的部分（请注意下午 1 点到 2 点之间的区域是纯色，因为这是您设置的一部分）：

职位：

// 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() 中配置了渐变。由于post是画圆弧的，所以接下来我尝试了一个完整的圆：

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

最后，从下午 1 点到下午 3 点画一条弧线。请记住，下午 3 点的角度为零，钟面上的一个部分对应于 30 度。所以在 onLayout() 中我们有

circle.addArc(circleRect, 300, 60);

另一个例子：如果你想画一个从 4:15 pm 到 4:45 pm 的圆弧，渐变从 4:33 pm 开始，你会得到下图（彩色圆弧绘制在一个完整的 SweepGradient 圆圈上，每个 "hour")

黑白交替

颜色：

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

要计算位置，需要做一点数学运算：

60 minutes = one hour ~ 1/12f
3 minutes = one hour / 20 ~ 1/240f
15 minutes = 5 * 3 minutes ~ 5 / 240f = 1 / 48f
45 minutes = 3 * 15 minutes ~ 1 / 16f
33 minutes = 11 * 3 minutes ~ 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
     };

同样，可以计算起始角和扫描角的值：

one hour ~ 30 degrees
one minute ~ 0.5 degrees

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

SweepGradient Android - 如何设置渐变的起始角度

SweepGradient Android - How to set start angle for Gradient

android

android-canvas

gradient

ondraw