Monday, August 4, 2014

Canvasに引いた線にグローエフェクトをつける

今日はメニューの整理をしていましたが、若干飽きてきたので、アルバムビューで表示している円のVisualizerにグローエフェクトをかけてみました。
わかりにくいかもしれないですが、下記の画像のようになります。


グローエフェクトは、PaintにBlurMaskFilterを設定することで表現できます。
実際にはBlurMaskFilterでぼかしをかけることでそれっぽく見せてるだけです。
具体的には次のようなコードでPaintを宣言しておきます。

        float width = 7f;
        float blueWidth = width*2.0f;

        mPaint = new Paint();
        mPaint.setStrokeWidth(width);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);

        mBlurPaint = new Paint();
        mBlurPaint.set(mPaint);
        mBlurPaint.setStrokeWidth(blueWidth);
        mBlurPaint.setMaskFilter(new BlurMaskFilter(blueWidth/2, BlurMaskFilter.Blur.NORMAL));

ぼかし用のPaintのほうの太さを2倍ぐらいにして、ぼかし幅はその半分ぐらいにしていますが、これは調整していてこれぐらいがちょうど良かっただけなので、もっとぼかしたいというのであれば、BlurPaintのほうの太さをもっと太くし、ぼかし幅も大きくすれば良いと思います。

これをもとに、同じPathに描画を2回してあげれば上記のような画像になります。

            canvas.drawPath(path, mPaint);
            canvas.drawPath(path, mBlurPaint);

No comments:

Post a Comment