簡體   English   中英

Android-如何繪制基於弧的漸變

[英]Android - How to draw an arc based gradient

我正在嘗試創建一個從一種顏色逐漸變為另一種顏色的弧線(度數可變)。 從藍色到紅色的示例:

在此處輸入圖片說明

這是我的代碼:

SweepGradient shader = new SweepGradient(center.x, center.y, resources.getColor(R.color.startColor),resources.getColor(R.color.endColor));
Paint paint = new Paint()
paint.setStrokeWidth(1);
paint.setStrokeCap(Paint.Cap.FILL);
paint.setStyle(Paint.Style.FILL);
paint.setShader(shader);
canvas.drawArc(rectF, startAngle, sweepAngle, true, paint);

但是結果是整個弧都用相同的顏色繪制。

編輯:
經過更多的實驗,我發現顏色擴散是由弧的角度決定的。 如果我繪制一個小角度的弧,則僅顯示第一種顏色。 角度越大,繪制的顏色越多。 如果角度較小,則似乎沒有漸變。
這是一個例子。 我正在繪制4個圓弧-90、180、270和360:

RectF rect1 = new RectF(50, 50, 150, 150);
Paint paint1 = new Paint();
paint1.setStrokeWidth(1);
paint1.setStrokeCap(Paint.Cap.SQUARE);
paint1.setStyle(Paint.Style.FILL);

SweepGradient gradient1 = new SweepGradient(100, 100,
        Color.RED, Color.BLUE);
paint1.setShader(gradient1);

canvas.drawArc(rect1, 0, 90, true, paint1);

RectF rect2 = new RectF(200, 50, 300, 150);
Paint paint2 = new Paint();
paint2.setStrokeWidth(1);
paint2.setStrokeCap(Paint.Cap.SQUARE);
paint2.setStyle(Paint.Style.FILL);

SweepGradient gradient2 = new SweepGradient(250, 100,
        Color.RED, Color.BLUE);
paint2.setShader(gradient2);

canvas.drawArc(rect2, 0, 180, true, paint2);

RectF rect3 = new RectF(50, 200, 150, 300);
Paint paint3 = new Paint();
paint3.setStrokeWidth(1);
paint3.setStrokeCap(Paint.Cap.SQUARE);
paint3.setStyle(Paint.Style.FILL);

SweepGradient gradient3 = new SweepGradient(100, 250,
        Color.RED, Color.BLUE);
paint3.setShader(gradient3);

canvas.drawArc(rect3, 0, 270, true, paint3);

RectF rect4 = new RectF(200, 200, 300, 300);
Paint paint4 = new Paint();
paint4.setStrokeWidth(1);
paint4.setStrokeCap(Paint.Cap.SQUARE);
paint4.setStyle(Paint.Style.FILL);

SweepGradient gradient4 = new SweepGradient(250, 250,
        Color.RED, Color.BLUE);
paint4.setShader(gradient4);

canvas.drawArc(rect4, 0, 360, true, paint4);

結果如下:

在此處輸入圖片說明

這是令人驚訝的,因為我希望RED位於弧的起點,BLUE位於弧的起點,而兩者之間的東西無論角度如何都均勻分布。
我嘗試使用positions參數手動間隔顏色,但結果是相同的:

int[] colors = {Color.RED, Color.BLUE};
float[] positions = {0,1};
SweepGradient gradient = new SweepGradient(100, 100, colors , positions);

任何想法如何解決這個問題?

解決方案是設置BLUE的位置。 這樣做是這樣的:

int[] colors = {Color.RED, Color.BLUE};
float[] positions = {0,1};
SweepGradient gradient = new SweepGradient(100, 100, colors , positions);

這里的問題是,當將BLUE的位置設置為'1'時,這並不意味着它將位於繪制的圓弧的末端,而是位於圓弧所在的圓的末端。 為了解決這個問題,BLUE位置應考慮圓弧的度數。 因此,如果我繪制的X度弧線,則位置將設置為:

float[] positions = {0,Xf/360f};

因此,如果X為90,則漸變會將BLUE放置在圓的0.25處:

在此處輸入圖片說明

添加到Yoav的解決方案中。

在我的Galaxy Nexus 4.2庫存Android設備上,給出的解決方案不起作用。

如果數組不包含0.0f和1.0f,則它似乎被忽略。

我的最終解決方案是:

int[] colors = {Color.RED, Color.BLUE, Color.RED}; 
float[] positions = {0, Xf/360f, 1};

五年后,但正確的方法是用單獨的行的0.750f設置0.749f,簡單的代碼如下:

    val colors = intArrayOf(0xffff0000.toInt(), 0xff0000ff.toInt(), 0xffff0000.toInt(), 0xffff0000.toInt())
    val positions = floatArrayOf(0.0f, 0.749f, 0.750f, 1.0f)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM