Sunday, May 11, 2014

Fill path and stroke with different color

Check the demo video. The outter (deviated) rectangle drawn with Paint with style of Paint.Style.FILL_AND_STROKE, both the filled area and stroke have the same color. The inner (deviated) circle drawn in two times; first time drawn with Paint.Style.FILL to fill the inner area, the second time draw with Paint.Style.STROKE to draw the stroke with different color.


package com.example.androidview;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DiscretePathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View {

Paint paintBorder, paintCircle;
Path pathBorder, pathCircle;

Path pathShape;
float segmentLength;
float deviation;

public MyView(Context context) {
super(context);
init();
}

public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

private void init() {
paintBorder = new Paint();
paintBorder.setColor(Color.BLUE);
paintBorder.setStrokeWidth(20);
paintBorder.setStyle(Paint.Style.FILL_AND_STROKE);

paintCircle = new Paint();
paintCircle.setStrokeWidth(20);

pathBorder = new Path();
pathCircle = new Path();

pathShape = new Path();
pathShape.moveTo(0, 0);
pathShape.lineTo(10, 20);
pathShape.lineTo(20, 0);
pathShape.close();

segmentLength = 30.0f;
deviation = 30.0f;
}

@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.GRAY);

pathBorder.reset();
pathBorder.moveTo(50, 50);
pathBorder.lineTo(50, getHeight()-50);
pathBorder.lineTo(getWidth()-50, getHeight()-50);
pathBorder.lineTo(getWidth()-50, 50);
pathBorder.close();

float radius;
pathCircle.reset();
if(getWidth()>getHeight()){
radius = getHeight()/4;
}else{
radius = getWidth()/4;
}
pathCircle.addCircle(getWidth()/2, getHeight()/2, radius, Direction.CCW);

DiscretePathEffect discretePathEffect =
new DiscretePathEffect(segmentLength, deviation);
paintBorder.setPathEffect(discretePathEffect);

canvas.drawPath(pathBorder, paintBorder);

//fill circle with color
paintCircle.setColor(Color.RED);
paintCircle.setStyle(Paint.Style.FILL);
paintCircle.setPathEffect(discretePathEffect);
canvas.drawPath(pathCircle, paintCircle);
//draw stroke with different color
paintCircle.setColor(Color.BLACK);
paintCircle.setStyle(Paint.Style.STROKE);
paintCircle.setPathEffect(discretePathEffect);
canvas.drawPath(pathCircle, paintCircle);

}

public void setDeviation(int dev){
deviation = (float)dev;
invalidate();
}

public void setSegmentLength(int seglen){

//force segmentLength not 0
if (seglen==0){
seglen = 1;
}

segmentLength = (float)seglen;
invalidate();
}

public void setStrokeWidth(int strwidth){
paintBorder.setStrokeWidth(strwidth);
paintCircle.setStrokeWidth(strwidth);
invalidate();
}

}


Other files, /res/layout/activity_main.xml and MainActivity.java, refer to last post DiscretePathEffect example.

- More examples of drawing path on custom View.


Saturday, May 10, 2014

DiscretePathEffect example

android.graphics.DiscretePathEffect chop the path into lines of segmentLength, randomly deviating from the original path by deviation.


Main layout, /res/layout/activity_main.xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.androidview.MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android-coding.blogspot.com" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="segmentLength"/>
<SeekBar
android:id="@+id/segmentLength"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="30"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="deviation"/>
<SeekBar
android:id="@+id/deviation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="30"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="strokeWidth"/>
<SeekBar
android:id="@+id/strokeWidth"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="20"/>

<com.example.androidview.MyView
android:id="@+id/myview"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

MainActivity.java
package com.example.androidview;

import android.app.Activity;
import android.graphics.PathDashPathEffect;
import android.graphics.PathDashPathEffect.Style;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.Spinner;

public class MainActivity extends Activity {

private MyView myView;
private SeekBar seekBarSegmentLength, seekBarDeviation;
private SeekBar seekBarStrokeWidth;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

myView = (MyView)findViewById(R.id.myview);

seekBarSegmentLength = (SeekBar)findViewById(R.id.segmentLength);
seekBarSegmentLength.setOnSeekBarChangeListener(seekBarSegmentLengthChangeListener);
seekBarDeviation = (SeekBar)findViewById(R.id.deviation);
seekBarDeviation.setOnSeekBarChangeListener(seekBarDeviationChangeListener);

seekBarStrokeWidth = (SeekBar)findViewById(R.id.strokeWidth);
seekBarStrokeWidth.setOnSeekBarChangeListener(seekBarStrokeWidthChangeListener);
}

OnSeekBarChangeListener seekBarSegmentLengthChangeListener =
new OnSeekBarChangeListener(){

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
myView.setSegmentLength(progress);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {}

};



OnSeekBarChangeListener seekBarDeviationChangeListener =
new OnSeekBarChangeListener(){

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
myView.setDeviation(progress);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}

};

OnSeekBarChangeListener seekBarStrokeWidthChangeListener =
new OnSeekBarChangeListener(){

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
myView.setStrokeWidth(progress);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}

};

}

MyView.java
package com.example.androidview;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DiscretePathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View {

Paint paintBorder, paintCircle;
Path pathBorder, pathCircle;

Path pathShape;
float segmentLength;
float deviation;

public MyView(Context context) {
super(context);
init();
}

public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

private void init() {
paintBorder = new Paint();
paintBorder.setColor(Color.BLUE);
paintBorder.setStrokeWidth(20);
paintBorder.setStyle(Paint.Style.STROKE);

paintCircle = new Paint();
paintCircle.setColor(Color.RED);
paintCircle.setStrokeWidth(20);
paintCircle.setStyle(Paint.Style.STROKE);

pathBorder = new Path();
pathCircle = new Path();

pathShape = new Path();
pathShape.moveTo(0, 0);
pathShape.lineTo(10, 20);
pathShape.lineTo(20, 0);
pathShape.close();

segmentLength = 30.0f;
deviation = 30.0f;
}

@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.GRAY);

pathBorder.reset();
pathBorder.moveTo(50, 50);
pathBorder.lineTo(50, getHeight()-50);
pathBorder.lineTo(getWidth()-50, getHeight()-50);
pathBorder.lineTo(getWidth()-50, 50);
pathBorder.close();

float radius;
pathCircle.reset();
if(getWidth()>getHeight()){
radius = getHeight()/4;
}else{
radius = getWidth()/4;
}
pathCircle.addCircle(getWidth()/2, getHeight()/2, radius, Direction.CCW);

DiscretePathEffect discretePathEffect =
new DiscretePathEffect(segmentLength, deviation);
paintBorder.setPathEffect(discretePathEffect);
paintCircle.setPathEffect(discretePathEffect);

canvas.drawPath(pathBorder, paintBorder);
canvas.drawPath(pathCircle, paintCircle);

}

public void setDeviation(int dev){
deviation = (float)dev;
invalidate();
}

public void setSegmentLength(int seglen){

//force segmentLength not 0
if (seglen==0){
seglen = 1;
}

segmentLength = (float)seglen;
invalidate();
}

public void setStrokeWidth(int strwidth){
paintBorder.setStrokeWidth(strwidth);
paintCircle.setStrokeWidth(strwidth);
invalidate();
}

}

- More examples of drawing path on custom View.

Friday, May 9, 2014

Effect of advance, phase, style in PathDashPathEffect

The example make PathDashPathEffect with interactive setting of advance, phase and style; such that you can know how they affect the result.


Main layout, /res/layout/activity_main.xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.androidview.MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android-coding.blogspot.com" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="advance"/>
<SeekBar
android:id="@+id/advance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="30"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="phase"/>
<SeekBar
android:id="@+id/phase"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="30"/>
<Spinner
android:id="@+id/style"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

<com.example.androidview.MyView
android:id="@+id/myview"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

MainActivity.java
package com.example.androidview;

import android.app.Activity;
import android.graphics.PathDashPathEffect;
import android.graphics.PathDashPathEffect.Style;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.Spinner;

public class MainActivity extends Activity {

private MyView myView;
private SeekBar seekBarAdvance, seekBarPhase;
private Spinner spinnerStyle;

private String[] styleNames ={
"PathDashPathEffect.Style.MORPH",
"PathDashPathEffect.Style.ROTATE",
"PathDashPathEffect.Style.TRANSLATE"};
private Style[] styleSettings = {
PathDashPathEffect.Style.MORPH,
PathDashPathEffect.Style.ROTATE,
PathDashPathEffect.Style.TRANSLATE};

private ArrayAdapter<String> spinnerStyleAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

myView = (MyView)findViewById(R.id.myview);

seekBarAdvance = (SeekBar)findViewById(R.id.advance);
seekBarAdvance.setOnSeekBarChangeListener(seekBarAdvanceChangeListener);
seekBarPhase = (SeekBar)findViewById(R.id.phase);
seekBarPhase.setOnSeekBarChangeListener(seekBarPhaseChangeListener);

spinnerStyle = (Spinner)findViewById(R.id.style);
spinnerStyleAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, styleNames);
spinnerStyleAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinnerStyle.setAdapter(spinnerStyleAdapter);
spinnerStyle.setOnItemSelectedListener(spinnerStyleOnItemSelectedListener);

}

OnSeekBarChangeListener seekBarAdvanceChangeListener =
new OnSeekBarChangeListener(){

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
myView.setAdvance(progress);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {}

};

OnSeekBarChangeListener seekBarPhaseChangeListener =
new OnSeekBarChangeListener(){

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
myView.setPhase(progress);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}

};

OnItemSelectedListener spinnerStyleOnItemSelectedListener =
new OnItemSelectedListener(){

@Override
public void onItemSelected(AdapterView<?> parent, View view,
int position, long id) {
myView.setStype(styleSettings[position]);
}

@Override
public void onNothingSelected(AdapterView<?> parent) {
// TODO Auto-generated method stub

}
};

}

MyView.java
package com.example.androidview;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathDashPathEffect;
import android.graphics.Path.Direction;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View {

Paint paint;
Path pathBorder, pathCircle;

Path pathShape;
float phase;
float advance;
PathDashPathEffect.Style style;

public MyView(Context context) {
super(context);
init();
}

public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

private void init() {
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(20);
paint.setStyle(Paint.Style.STROKE);

pathBorder = new Path();
pathCircle = new Path();

pathShape = new Path();
pathShape.moveTo(0, 0);
pathShape.lineTo(10, 20);
pathShape.lineTo(20, 0);
pathShape.close();

phase = 30.0f;
advance = 30.0f;
style = PathDashPathEffect.Style.MORPH;
}

@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.GRAY);

pathBorder.reset();
pathBorder.moveTo(50, 50);
pathBorder.lineTo(50, getHeight()-50);
pathBorder.lineTo(getWidth()-50, getHeight()-50);
pathBorder.lineTo(getWidth()-50, 50);
pathBorder.close();

float radius;
pathCircle.reset();
if(getWidth()>getHeight()){
radius = getHeight()/4;
}else{
radius = getWidth()/4;
}
pathCircle.addCircle(getWidth()/2, getHeight()/2, radius, Direction.CCW);

PathDashPathEffect pathDashPathEffect =
new PathDashPathEffect(pathShape, advance, phase, style);
paint.setPathEffect(pathDashPathEffect);

canvas.drawPath(pathCircle, paint);
canvas.drawPath(pathBorder, paint);

}

public void setAdvance(int adv){
advance = (float)adv;
invalidate();
}

public void setPhase(int ph){
phase = (float)ph;
invalidate();
}

public void setStype(PathDashPathEffect.Style sty){
style = sty;
invalidate();
}

}


- Running PathDashPathEffect example

- More examples of drawing path on custom View.

Thursday, May 8, 2014

Running PathDashPathEffect example

This example implement running PathDashPathEffect, by varying phase parameter.


Modify MyView.java from the post.

package com.example.androidview;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.PathDashPathEffect;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View {

Paint paint;
Path path;

Path pathShape;
float phase;
float advance;
PathDashPathEffect.Style style;

public MyView(Context context) {
super(context);
init();
}

public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

private void init() {
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(20);
paint.setStyle(Paint.Style.STROKE);

path = new Path();

pathShape = new Path();
pathShape.addCircle(10, 10, 10, Direction.CCW);

phase = 0;
advance = 30.0f;
style = PathDashPathEffect.Style.ROTATE;

}

@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.GRAY);

path.reset();
path.moveTo(50, 50);
path.lineTo(50, getHeight()-50);
path.lineTo(getWidth()-50, getHeight()-50);
path.lineTo(getWidth()-50, 50);
path.close();

phase++;
PathDashPathEffect pathDashPathEffect =
new PathDashPathEffect(pathShape, advance, phase, style);
paint.setPathEffect(pathDashPathEffect);

canvas.drawPath(path, paint);

invalidate();
}

}


- Effect of advance, phase, style in PathDashPathEffect

- More examples of drawing path on custom View

Wednesday, May 7, 2014

PathDashPathEffect example

android.graphics.PathDashPathEffect dash the drawn path by stamping it with the specified shape.

Example:
PathDashPathEffect example
PathDashPathEffect example

Modify MyView.java from the post.
package com.example.androidview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.PathDashPathEffect;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View {

Paint paint;
Path path;

public MyView(Context context) {
super(context);
init();
}

public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

private void init() {
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(20);
paint.setStyle(Paint.Style.STROKE);

path = new Path();

Path pathShape = new Path();
pathShape.addCircle(10, 10, 10, Direction.CCW);

float advance = 30.0f;
float phase = 20.0f;
PathDashPathEffect.Style style = PathDashPathEffect.Style.ROTATE;

PathDashPathEffect pathDashPathEffect =
new PathDashPathEffect(pathShape, advance, phase, style);

paint.setPathEffect(pathDashPathEffect);

}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.GRAY);

path.reset();
path.moveTo(50, 50);
path.lineTo(50, getHeight()-50);
path.lineTo(getWidth()-50, getHeight()-50);
path.lineTo(getWidth()-50, 50);
path.close();

canvas.drawPath(path, paint);
}

}

Tuesday, May 6, 2014

ComposePathEffect example

android.graphics.ComposePathEffect create PathEffect from other two PathEffects, to apply first the inner effect and the outer pathEffect.

Here is a example to create ComposePathEffect from CornerPathEffect and DashPathEffect, in various combination.



Where:

  • paint0: no effect
  • paint1: CornerPathEffect
  • paint2: DashPathEffect
  • paint3: ComposePathEffect(cornerPathEffect, dashPathEffect)
  • paint4: ComposePathEffect(dashPathEffect, cornerPathEffect)
  • paint5: ComposePathEffect(cornerPathEffect, cornerPathEffect)
  • ComposePathEffect(another dashPathEffect, dashPathEffect)

Modify MyView.java from the post.
package com.example.androidview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ComposePathEffect;
import android.graphics.CornerPathEffect;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View {

Paint paint0, paint1, paint2, paint3, paint4, paint5, paint6;
Path path;

public MyView(Context context) {
super(context);
init();
}

public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

private void init() {
paint0 = new Paint();
paint0.setColor(Color.BLACK);
paint0.setStrokeWidth(10);
paint0.setStyle(Paint.Style.STROKE);

paint1 = new Paint();
paint1.set(paint0);
paint1.setColor(Color.RED);

paint2 = new Paint();
paint2.set(paint0);
paint2.setColor(Color.GREEN);

paint3 = new Paint();
paint3.set(paint0);
paint3.setColor(Color.BLUE);

paint4 = new Paint();
paint4.set(paint0);
paint4.setColor(Color.CYAN);

paint5 = new Paint();
paint5.set(paint0);
paint5.setColor(Color.MAGENTA);

paint6 = new Paint();
paint6.set(paint0);
paint6.setColor(Color.GRAY);

path = new Path();
path.moveTo(20, 20);
path.lineTo(20, 60);
path.lineTo(100, 80);
path.lineTo(10, 150);
path.lineTo(20, 200);
path.lineTo(20, 500);
path.lineTo(100, 500);
path.lineTo(100, 300);
path.lineTo(150, 300);

float radius = 50.0f;
CornerPathEffect cornerPathEffect =
new CornerPathEffect(radius);

float[] intervals = new float[]{80.0f, 30.0f};
float phase = 0;
DashPathEffect dashPathEffect =
new DashPathEffect(intervals, phase);

ComposePathEffect composePathEffect3 =
new ComposePathEffect(cornerPathEffect, dashPathEffect);
ComposePathEffect composePathEffect4 =
new ComposePathEffect(dashPathEffect, cornerPathEffect);
ComposePathEffect composePathEffect5 =
new ComposePathEffect(cornerPathEffect, cornerPathEffect);

float[] intervals6 = new float[]{5.0f, 5.0f};
float phase6 = 0;
DashPathEffect dashPathEffect6 =
new DashPathEffect(intervals6, phase6);
ComposePathEffect composePathEffect6 =
new ComposePathEffect(dashPathEffect6, dashPathEffect);

paint1.setPathEffect(cornerPathEffect);
paint2.setPathEffect(dashPathEffect);
paint3.setPathEffect(composePathEffect3);
paint4.setPathEffect(composePathEffect4);
paint5.setPathEffect(composePathEffect5);
paint6.setPathEffect(composePathEffect6);

}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(path, paint0); //no effect
canvas.translate(150, 0);
canvas.drawPath(path, paint1);
canvas.translate(150, 0);
canvas.drawPath(path, paint2);
canvas.translate(150, 0);
canvas.drawPath(path, paint3);
canvas.translate(150, 0);
canvas.drawPath(path, paint4);
canvas.translate(150, 0);
canvas.drawPath(path, paint5);
canvas.translate(150, 0);
canvas.drawPath(path, paint6);
}

}

Monday, May 5, 2014

Draw rounded corner line along path, with CornerPathEffect.

Example to draw rounded corner line along path, by applying CornerPathEffect on path.


Modify MyView.java from the post.
package com.example.androidview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View {

Paint paint;
Path path;

public MyView(Context context) {
super(context);
init();
}

public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

private void init() {
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(10);
paint.setStyle(Paint.Style.STROKE);

path = new Path();
path.moveTo(50, 50);
path.lineTo(50, 500);
path.lineTo(200, 500);
path.lineTo(200, 300);
path.lineTo(350, 300);

float radius = 50.0f;

CornerPathEffect cornerPathEffect =
new CornerPathEffect(radius);

paint.setPathEffect(cornerPathEffect);

}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(path, paint);

}

}