Dynamically generated line with glow effective

sharl picture sharl · Jun 8, 2011 · Viewed 15.6k times · Source

I want to draw line with glow effect like this
glow line
The problem - i must generate this line in program in dependence on user's interaction ( the form of line will be generated in onTouchEvent - ACTION_MOVE ).

Can i generate this effect without xml files or drawing premaid bitmap ?

Answer

sharl picture sharl · Jun 10, 2011

I imitate this effect in this way :

  1. Draw line with BlurMaskFilter;
  2. Draw over it normal line.

I use Path class to generate line and save coordinates of MOVE_ACTION event to generate only part of path what i need.

Create 2 Paint()s:

_paintSimple = new Paint();
_paintSimple.setAntiAlias(true);
_paintSimple.setDither(true);
_paintSimple.setColor(Color.argb(248, 255, 255, 255));
_paintSimple.setStrokeWidth(20f);
_paintSimple.setStyle(Paint.Style.STROKE);
_paintSimple.setStrokeJoin(Paint.Join.ROUND);
_paintSimple.setStrokeCap(Paint.Cap.ROUND);

_paintBlur = new Paint();
_paintBlur.set(_paintSimple);
_paintBlur.setColor(Color.argb(235, 74, 138, 255));
_paintBlur.setStrokeWidth(30f);
_paintBlur.setMaskFilter(new BlurMaskFilter(15, BlurMaskFilter.Blur.NORMAL)); 

And draw twice my Path():

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawPath(mPath, _paintBlur);
    canvas.drawPath(mPath, _paintSimple);
}