Reputation: 162
I am drawing on android.graphics.Canvas using android.graphics.Path. I want to allow the user to draw using a range of colors and stroke widths, however, whenever the color or stroke width is changed, everything is re-drawn using the new color or stroke width. How can I fix this?
xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/btnW10"
android:layout_margin="3sp"
android:layout_weight="1"
android:text="Width10"/>
<Button
android:id="@+id/btnW40"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="3sp"
android:layout_weight="1"
android:text="Width40"/>
<Button
android:id="@+id/btnW70"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="3sp"
android:layout_weight="1"
android:text="Width70"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="3sp"
android:layout_weight="1"
android:id="@+id/btnBlue"
android:text="Blue"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="3sp"
android:layout_weight="1"
android:id="@+id/btnRed"
android:text="Red"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="3sp"
android:layout_weight="1"
android:id="@+id/btnGreen"
android:text="Green"/>
</LinearLayout>
<com.vladislav.canvaswc.DrawLine
android:id="@+id/drwLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
main.java:
public class MainActivity extends AppCompatActivity implements View.OnClickListener
{
DrawLine dr;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button btnB=(Button) findViewById(R.id.btnBlue);
Button btnG=(Button) findViewById(R.id.btnGreen);
Button btnR=(Button) findViewById(R.id.btnRed);
Button btnW10=(Button) findViewById(R.id.btnW10);
Button btnW40=(Button) findViewById(R.id.btnW40);
Button btnW70=(Button) findViewById(R.id.btnW70);
dr =(DrawLine) findViewById(R.id.drwLine);
btnB.setOnClickListener(this);
btnG.setOnClickListener(this);
btnR.setOnClickListener(this);
btnW10.setOnClickListener(this);
btnW40.setOnClickListener(this);
btnW70.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch(v.getId())
{
case R.id.btnBlue : dr.changeColor(Color.BLUE);break;
case R.id.btnGreen : dr.changeColor(Color.GREEN);break;
case R.id.btnRed : dr.changeColor(Color.RED);break;
case R.id.btnW10 : dr.changeWidth(10f);break;
case R.id.btnW40 : dr.changeWidth(40f);break;
case R.id.btnW70 : dr.changeWidth(70f);break;
}
}
}
drawline.java ChangeWidthColor its my interface with 2 methods changeColor() and changeWidth()
public class DrawLine extends View implements ChangeWidthColor {
private Paint paint = new Paint();
private Path path = new Path();
public float x;
public float y;
public DrawLine(Context context) {
super(context);
init(context);
}
public DrawLine(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public DrawLine(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
public void init(Context context) {
//paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.MITER);
//paint.setStrokeWidth(5f);
}
@Override
public void changeColor(int color) {
paint.setColor(color);
}
@Override
public void changeWidth(float width) {
paint.setStrokeWidth(width);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(path,paint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
x= event.getX();
y= event.getY();
path.moveTo(x, y);
break;
case MotionEvent.ACTION_MOVE:
x= event.getX();
y= event.getY();
path.lineTo(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
invalidate();
break;
}
invalidate();
return true;
}
}
Upvotes: 5
Views: 2018
Reputation: 162
public class DrawLine extends View implements ChangeWidthColor {
private Path path = new Path();
private Paint paint = new Paint();
private int currentColor = Color.BLACK;
private float width = 1f;
public float x;
public float y;
private LinkedList<Integer> color = new LinkedList<Integer>();
private LinkedList<Float> widthSize = new LinkedList<Float>();
private LinkedList<Path> paths = new LinkedList<Path>();
public DrawLine(Context context) {
super(context);
init(context);
}
public DrawLine(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public DrawLine(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
public void init(Context context) {
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.MITER);
paint.setColor(currentColor);
paint.setStrokeWidth(5f);
}
@Override
public void changeColor(int color) {
currentColor = color;
path = new Path();
}
@Override
public void changeWidth(float width) {
this.width = width;
path = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < paths.size(); i++) {
paint.setStrokeWidth(widthSize.get(i));
paint.setColor(color.get(i));
canvas.drawPath(paths.get(i), paint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
x = event.getX();
y = event.getY();
path.moveTo(x, y);
break;
case MotionEvent.ACTION_MOVE:
x = event.getX();
y = event.getY();
path.lineTo(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
color.add(currentColor);
paths.add(path);
widthSize.add(width);
break;
default:
return false;
}
invalidate();
return true;
}
}
Upvotes: 0
Reputation: 58040
This solution maintains a List of Path objects and a List of Integers for storing colors. These Lists are in parallel - 1 entry in each list for a Path and color pair. onDraw iterates these Lists, drawing each Path with the corresponding color.
Each time the user clicks to change the color, a new Path is created. ACTION_DOWN and ACTION_MOVE call moveTo(x,y) and lineTo(x,y) on the path, and ACTION_UP causes the Path and current color to be added to the lists.
Note: I have not implemented a solution for stroke width, however, you should be able to follow the example and add this yourself.
public class DrawLine extends View {
private Path path = new Path();
private Paint paint = new Paint();
private int currentColor = Color.BLACK;
private List<Path> paths = new ArrayList<Path>();
private List<Integer> colors = new ArrayList<Integer>();
private float x;
private float y;
public DrawLine(Context context) {
super(context);
init(context);
}
public DrawLine(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public DrawLine(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
public void init(Context context) {
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.MITER);
paint.setColor(currentColor);
}
public void changeColor(int color) {
currentColor = color;
path = new Path();
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int x = 0; x < paths.size(); x++) {
paint.setColor(colors.get(x));
canvas.drawPath(paths.get(x), paint);
}
}
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
x = event.getX();
y = event.getY();
path.moveTo(x, y);
break;
case MotionEvent.ACTION_MOVE:
x = event.getX();
y = event.getY();
path.lineTo(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
paths.add(path);
colors.add(currentColor);
invalidate();
break;
}
invalidate();
return true;
}
}
`
Upvotes: 4
Reputation: 1245
you need to call invalidate()
inside your custom view whenever you are modifying something related to UI. so updated methods will be:
@Override
public void changeColor(int color) {
paint.setColor(color);
invalidate();
}
@Override
public void changeWidth(float width) {
paint.setStrokeWidth(width);
invalidate();
}
Upvotes: -2