2012-01-27 28 views
21

私は徐々に1つの色から別の色に行くアーク(可変数)を作成しようとしています。例から青から赤に:

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がであることを期待したいので、これは驚くべきことですアークの始まり、終わりの青と角度の違いにかかわらず均等に広がること間のenything。
私は位置パラメータを使用して手動で空間に色を試してみましたが、結果は同じであった:

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

これを解決する方法任意のアイデア?

答えて

27

解決策は、青の位置を設定することです。これは、そのように行われます。ここで

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

問題は「1」にBLUEの位置を設定するときに、これはそれが描かれた円弧の端部に位置し、代わりに最後にされることを意味しないということです円弧の一部である円の これを解決するには、青の位置に弧の度数を考慮する必要があります。私はX度と弧を描いてるのであれば、位置はそうのように設定されます。

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

Xが90であれば、勾配が円の0.25でBLUEが配置されます:

enter image description here

+1

少なくとも上Android 4.2では、指定された解決策は機能しません。配列の最後に1の値を持つ必要があります。 このようなもの: int [] colors = {Color.RED、Color.BLUE、Color.BLUE}; float [] positions = {0、Xf/360f、1}; –

+0

アングルが非常に小さい場合、解像度がどうして悪いのか知っていますか?アーク幅10度のように3色だけを意味します。あなたはtopleftケーキのあなたのスクリーンショットにも手順を見ることができます –

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

5年後、しかし、正しい方法は、別の行の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) 
+0

ポストコトリンのおかげで – rundavidrun

関連する問題