web-dev-qa-db-ja.com

スイープグラディエント：その概要とその例

私は Androidのスイープグラデーション に出会い、色の間隔と遷移をよりよく制御できるかどうかに興味をそそられました。クイック検索を行い、それについてほとんど何も見つかりませんでした!!

私が見つけた唯一の参考文献（およびそれらは正しくまたは包括的に説明することにも近づくという基準を満たしていませんは以下のとおりです。

ほぼそれで終わりです。他のものは類似しているか、または非常に簡潔です。

これまでに導き出したいくつかの結論（そしておそらく間違っている）：

  • スイープグラデーションは主にリングに使用されます
  • これらは、時計の針のスイープと同様のトランザクションについて話すAngular Sweep（これについては不明）と同様のトランザクションに使用されます。
  • VeryLinear Gradientsに似ています。それらの違いについて私が考えることができる唯一のものは、（リングのような）使用法です。
  • スイープはCenterを扱います（ここでも、クロック理論への強い参照）

私は人々がこれを本当に技術的な質問ではないと考えていることを知っています。しかし、私がSweep Gradientsで作業するため、または少なくともそれらが何を意味するのかを知るためには、説明はどこかからのものでなければなりません。また、リング以外の場合のSweepの使用法のいくつかの例で回答を提供してください。

androiddrawablegradientsweepgradient
18
Kaushik NP

このコンテキストでのWordgradientは、（Photoshopを含む多くのグラフィックエディターと同様に）複数のスムーズな遷移を指します単一の色だけで領域を塗りつぶすのではなく、colors。

Android APIは、LinearGradient、RadialGradientおよびSweepGradientの3つの異なるグラデーションを提供します。

これらはすべてShaderのサブクラスです。 ShaderをPaintオブジェクトに設定し、そのPaintで任意の形状を描画できます。グラデーションの種類に応じて、形状は色と色の間の遷移で塗りつぶされます。

例えば：

output image of the code below

この画像は、次のコードで作成できます。

Bitmap test = Bitmap.createBitmap(640, 200, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(test);
{ // draw a dark gray background
    Paint backgroundPaint = new Paint();
    backgroundPaint.setARGB(255, 24, 24, 24);
    c.drawPaint(backgroundPaint);
}
Path heart = new Path();
{ // prepare a heart shape
    heart.moveTo(110, 175);
    heart.lineTo(10, 75);
    RectF leftCircle = new RectF(10, 25, 110, 125);
    heart.arcTo(leftCircle, 180, 180);
    RectF rightCircle = new RectF(110, 25, 210, 125);
    heart.arcTo(rightCircle, 180, 180);
    heart.close();
}
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Paint.setTextSize(18f);
int[] colors = {
        0xFFFFFF88, // yellow
        0xFF0088FF, // blue
        0xFF000000, // black
        0xFFFFFF88  // yellow
};
float[] positions = {0.0f, 0.33f, 0.66f, 1.0f};
{ // draw the left heart
    SweepGradient sweepGradient;
    { // initialize the sweep gradient
        sweepGradient = new SweepGradient(50, 50, colors, positions);
        Paint.setShader(sweepGradient);
    }
    c.drawPath(heart, Paint);
    c.drawText("SweepGradient", 50, 190, Paint);
}
{ // draw the middle heart
    LinearGradient linearGradient;
    { // initialize a linear gradient
        linearGradient = new LinearGradient(250, 0, 350, 150, colors, positions, Shader.TileMode.CLAMP);
        Paint.setShader(linearGradient);
    }
    heart.offset(210, 0); // move the heart shape to the middle
    c.drawPath(heart, Paint);
    c.drawText("LinearGradient", 260, 190, Paint);
}
{ // draw the right heart
    RadialGradient radialGradient;
    { // initialize a linear gradient
        radialGradient = new RadialGradient(550, 50, 100, colors, positions, Shader.TileMode.CLAMP);
        Paint.setShader(radialGradient);
    }
    heart.offset(210, 0); // move the heart shape to the right
    c.drawPath(heart, Paint);
    c.drawText("RadialGradient", 470, 190, Paint);
}
{ // save the bitmap
    String filename = Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + "test.png";
    FileOutputStream out = null;
    try {
        out = new FileOutputStream(filename);
        test.compress(Bitmap.CompressFormat.PNG, 90, out);
    } catch (Exception e) {
    } finally {
        try {
            out.close();
        } catch (Exception e) {
        }
    }
}

  • したがって、LinearGradientはLinear Gradient Photoshopでは、RadialGradientはRadial Gradient、およびSweepGradientはAngular Gradient、3番目のリファレンスに記載されています。まず画像エディターでこれらを試すことをお勧めします（すべての一般的な画像エディターにはこれらのツールがあります）と、それらがどのように機能するかをすぐに理解できます。

  • これらのグラデーションをXMLドローアブルでも使用できます（4番目のリファレンスのように）。ただし、最大3色の使用に制限があります。

  • SweepGradientでは、位置を指定する場合、0.0ポイントは3時の位置にあり、時計回りに進みます（0.25は6時、0.5は9時、0.75は12時、そして1.0は3時に戻ります）。

あなたの結論について：

  • ご覧のとおり、任意の形状は、リングだけでなく、SweepGradientで描画できます。上記の例では、ラベルもグラデーションで描かれています。
  • はい、時計の針のアナロジーはその場にあります。
  • 使用法では、SweepGradientはLinearGradientに非常に似ていますが、カラーリストの範囲外で実行できないため、TileModeを指定する必要はありません。
  • はい、中心点の座標を指定する必要があります。

これで問題が解決することを願っています。

27
Attila Tanyi

ために xmlドローアブル これは、

Android:type="sweep"

Android：タイプ 値を持つことができます（大文字と小文字を区別）：linear、radialまたはsweep

1
Prince