パスに沿ったグラデーションを使用

Question

Android Pathクラスを使用して「グロー」エフェクトを作成しようとしています。ただし、勾配はパスの周りに収まるように歪んでいません。代わりに、単にその上に表示され、パスのストロークにクリップされます。正方形のパスを使用して、下の画像は、私が何を意味するかを示しています。

代わりに、それはより多くのようになります。つまり

を、勾配は、経路をたどります特に、CornerPathEffectで設定された半径に従ってコーナーの周りをラップします。

paint = new Paint(); 
paint.setStyle(Style.STROKE); 
paint.setStrokeWidth(20); 
paint.setAntiAlias(true); 
LinearGradient gradient = new LinearGradient(30, 0, 50, 0, 
    new int[] {0x00000000, 0xFF0000FF, 0x00000000}, null, Shader.TileMode.MIRROR); 
paint.setShader(gradient); 
PathEffect cornerEffect = new CornerPathEffect(10); 
paint.setPathEffect(cornerEffect); 
canvas.drawPath(boxPath, paint); 

任意のアイデア：

ここでは、コードの関連する部分はありますか？

---

もう1つの方法は、ストロークの幅を定義するときに「ソフトエッジブラシ」効果を得ることです。私はBlurMaskFiltersを実験しましたが、これらは不透明から透明への移行ではなく、一様なぼかしを提供します。それが可能なら誰でも知っていますか？

Answer 1

これを行う方法が愚かに分かりました。同じパスを再利用して、各描画パスでストロークの幅とアルファを調整します。例コード：

float numberOfPasses = 20; 
float maxWidth = 15; 
for (float i = 0; i <= numberOfPasses; i++){ 
    int alpha = (int) (i/numberOfPasses * 255f); 
    float width = maxWidth * (1 - i/numberOfPasses); 

    paint.setARGB(alpha, 0, 0, 255); 
    paint.setStrokeWidth(width); 
    canvas.drawPath(path, paint); 
} 

結果の例は以下を参照してください。この方法を使用して左のパスを描画し、右のパスを比較のためにmaxWidthと255 alphaの1つのストロークで描画します。

これは主に動作します。2つの問題があります。

• 勾配はできるだけ滑らかではありません。これは、前のパスの上に描画された各パスが、アルファビルドが速すぎて最終的なストロークの前に255に達するためです。ラインint alpha = (int) (i/numberOfPasses * 125f);（125fではなく125fへの変更に注意してください）のビットを試してみましょう。

• パスは、コーナーの内側で「カット」されているように見えます。おそらくCornerPathEffectの何らかの結果が適用されています。

Answer 2

あなたがしたいことは、私が正しく理解すれば、勾配を効果的にストロークの「ブラシ」にすることです。

これは正確には私も最近達成しようとしていたものですが、APIにはそれを行うための簡単な手段はありません。私は最近、Android CanvasコンバータクラスへのSVGを作成しました。そのため、最近Inkscapeで多くの作業をしています。それで、私が調べてみると、Inkscapeでそれを行うことさえ可能かどうか疑問に思っていました。しかし、Inkscapeでさえ、それは非常に重要ではありません。私は最終的には、勾配のこの画像に出くわしたいくつかの検索が下にチュートリアルのダウンロードリンクと一緒に、パスのコースに沿って適用された後：私は個人的に一度にやろうとした何

http://www.flickr.com/photos/35772571@N03/3312087295/

半円形を作成することでしたが、このパスは平らな色とは対照的にネオンの光の一種です。 Android APIとSVG標準の両方で言えば、これを行う唯一の方法は円に完全に中心を置いた放射状のグラデーションを作成し、正確な場所に一連のカラーストップを配置することです。かなりやりにくく、正方形のような形にするにはどうしたらいいかわかりません。

残念ながら、これは有用な回答ではなく、「どちらでもできませんでした！私は一種の「ソフトブラシ」効果の解決策も知りたいと思っているので、これを興味の対象としていきます。

Answer 3

ソフトブラシビットマップで描画するのはどうですか？ Photoshopなどの画像編集ソフトウェアを使用して、不透明度の低い円形の柔らかいブラシを半径方向外側に縮小します。 Drawableとして保存し、ビットマップにロードし、パスに沿って均等に描画します。白い色のブラシでビットマップを作成します。これにより、PorterDuffColorFilterを使用して、与えられた色（ここでは青色）にビットマップを単純に乗算することができます。

brush1=BitmapFactory.decodeResource(getResources(), R.drawable.brush_custom_one); 
//This contains radially decreasing opacity brush 
porter_paint.setColorFilter(new PorterDuffColorFilter(paint.getColor(), Mode.MULTIPLY)); 
for (int i=1;i<matrix.size();i++) { 
//matrix contains evenly spaced points along path 
Point point = matrix.get(matrix.get(i)); 
canvas.drawBitmap(brush1, point.x,point.y, porter_paint);} 

使用ブラシれる（それがあります）： 最終的な結果は次のとおりです。