java - Android:Canvas Arc，Sweep Gradient Start Angle可以改吗？

Question

我正在尝试绘制一个由渐变填充的圆弧

下图就是我想要的

下图是我现在的样子

正如你在图片中看到的，我的渐变开始得太早了

我知道为什么会这样

如果我完成圆弧形成一个圆，我会得到这个

正如我们所见，渐变从 90 度开始。但是我的弧度是从135度画出来的，扫到270度

我的问题是如何让渐变从 135 度开始扫到 270 度？可以吗

到目前为止，这是我进行扫描渐变的方法

  public void setProgressColourAsGradient(boolean invalidateNow) {
        SweepGradient sweepGradient = new SweepGradient(baseArcRect.centerX(), baseArcRect.centerY(),progressGradientColourStart,progressGradientColourEnd);
        //Make the gradient start from 90 degrees
        Matrix matrix = new Matrix();
        matrix.setRotate(90,baseArcRect.centerX(), baseArcRect.centerY());
        sweepGradient.setLocalMatrix(matrix);

        progressFillPaint.setShader(sweepGradient);
        if (invalidateNow) {
            invalidate();
        }
    }

我找不到任何 API 来告诉 SweepGradient 从哪里开始。

我已将所有代码添加到附录部分

感谢阅读!

评论 1

我尝试将旋转设置为 135 度

附录A ArcWithGradient View

public class ArcWithGradient extends View {

    private Paint progressFillPaint;
    private RectF baseArcRect;
    private int progressGradientColourStart;
    private int progressGradientColourEnd;
    /**
     * Thickness of the arc
     */
    private int thickness;

    public ArcWithGradient(Context context) {
        super(context);
        init();
    }

    public ArcWithGradient(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ArcWithGradient(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {

        progressGradientColourStart = ContextCompat.getColor(getContext(), R.color.pinnacle_gradient_start);
        progressGradientColourEnd = ContextCompat.getColor(getContext(), R.color.pinnacle_gradient_end);
        thickness = UiUtils.dpToPx(getContext(), 25);

        //We do not want a colour for this because we will set a gradient
        progressFillPaint = CanvasUtil.makeStrokePaint(UiUtils.dpToPx(getContext(), 25), -1);
        baseArcRect = new RectF(0, 0, 0, 0);
        setProgressColourAsGradient(false);
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldw, int oldh) {
        super.onSizeChanged(width, height, oldw, oldh);
        //Ensures arc is within the rectangle
        float radius = Math.min(width, height) / 2;//

        //I do radius - thickness so that the arc is within the rectangle
        float baseArcLeft = ((width / 2) - (radius - thickness));
        float baseArcTop = ((height / 2) - (radius - thickness));
        float baseArcRight = ((width / 2) + (radius - thickness));
        float baseArcBottom = ((height / 2) + (radius - thickness));

        baseArcRect.set(baseArcLeft, baseArcTop, baseArcRight, baseArcBottom);
        //Recalculate the gradient
        setProgressColourAsGradient(false);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawArc(baseArcRect, 135, 270, false, progressFillPaint);
    }

    public void setProgressColourAsGradient(boolean invalidateNow) {
        SweepGradient sweepGradient = new SweepGradient(baseArcRect.centerX(), baseArcRect.centerY(),progressGradientColourStart,progressGradientColourEnd);
        //Make the gradient start from 90 degrees
        Matrix matrix = new Matrix();
        matrix.setRotate(90,baseArcRect.centerX(), baseArcRect.centerY());
        sweepGradient.setLocalMatrix(matrix);

        progressFillPaint.setShader(sweepGradient);
        if (invalidateNow) {
            invalidate();
        }
    }
}

附录 B UiUtils

public class UiUtils {

    public static int dpToPx(Context ctx, float dp) {
        return Math.round(dp * ctx.getResources().getDisplayMetrics().density);
    }
}

附录 C CanvasUtil

public class CanvasUtil {

    public static Paint makeStrokePaint(int width, int color) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeCap(Paint.Cap.SQUARE);
        paint.setStrokeWidth(width);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(color);
        return paint;
    }

    public static Paint makeFillPaint(int color) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(color);
        return paint;
    }

Answer 1

正如@pskink 在评论中提到的，您需要使用SweepGradient 构造函数，它接受一个颜色列表和一个位置列表。 positions 参数是一个 float 数组，指示颜色应开始的 360 度百分比。

在我的示例中，我将 Canvas 旋转 115 度，然后为我的拱形绘制一个 310 度的扫描角。第一种颜色从 0 度角开始(因为 Canvas 已旋转)，渐变以 310 度角到达第二种颜色，因此它与拱形的扫描角相匹配。外圈显示蓝色一直持续到 360 度，但蓝色从 310 度开始。

class SweepGradientView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
): View(context, attrs, defStyleAttr) {


    private val archPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style = Paint.Style.STROKE
        strokeWidth = 32 * context.resources.displayMetrics.density
    }

    private val archBounds = RectF()
    private val archInset = 72 * context.resources.displayMetrics.density

    private val gradientColors = intArrayOf(Color.MAGENTA, Color.BLUE)
    private val gradientPositions = floatArrayOf(0/360f, 310/360f)

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val width = MeasureSpec.getSize(widthMeasureSpec)
        val height = MeasureSpec.getSize(heightMeasureSpec)
        val size = Math.min(width, height)
        setMeasuredDimension(size, size)
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        archPaint.shader = SweepGradient(width / 2f, height / 2f, gradientColors, gradientPositions)
        archBounds.set(archInset, archInset, width.toFloat() - archInset, height.toFloat() - archInset)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        val cx = width / 2f
        val cy = height / 2f

        canvas.save()
        canvas.rotate(115f, cx, cy)
        canvas.drawArc(archBounds, 0f, 310f, false, archPaint)
        canvas.drawCircle(cx, cy, width / 2.2f, archPaint)
        canvas.restore()
    }

}