2012-01-27 44 views
21

我想創建一個逐漸從一種顏色變爲另一種顏色的弧線(可變度數)。從例如,從藍色到紅色:

enter image description hereAndroid - 如何繪製基於漸變的弧線

這是我的代碼:

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

這裏是結果:

enter image description here

這是令人驚訝的,因爲我期望的RED是在弧線的起點,末端的藍色以及兩者之間的角度均勻分佈,無論角度如何。
我試圖空間的顏色使用手動位置參數,但結果是一樣的:

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

不知道如何解決這個問題?

回答

27

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

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

這裏的問題是,BLUE的位置設置爲當「1」,這並不意味着它將被定位在拉弧的結束,而是在年底圓弧的一部分。 爲了解決這個問題,藍色位置應該考慮到弧度的度數。所以,如果我畫有X度的弧,位置將被設置像這樣:

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

所以,如果X是90,梯度將放置BLUE在圓的0.25:

enter image description here

+1

至少在Android 4.2中,給出的解決方案不起作用。在數組的末尾需要有一個值1。 類似這樣的: int [] colors = {Color.RED,Color.BLUE,Color.BLUE}; float [] positions = {0,Xf/360f,1}; – 2013-05-11 07:19:04

+0

你知道爲什麼分辨率如此糟糕,如果角度很小?就像10度的弧度意味着只有3種顏色。你可以在你的屏幕截圖中看到這些步驟 – 2016-04-05 15:37:23

9

添加到Yoav的解決方案。

在我的Galaxy Nexus 4.2股票Android上,提供的解決方案不起作用。如果數組不包含0.0f和1.0f,它似乎被忽略。

我最後的解決辦法是:

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

五年後,但正確的做法是讓0.749f與單獨的線0.750f,簡單的代碼是這樣的:

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

感謝張貼Kotlin – rundavidrun 2017-08-19 04:50:14