如何在 Android 中更改 canvas 上的油漆颜色/厚度？

Question

I'm not able to change the color or thickness of my paint when I click an imageButton, even though I programmed it too. I know I'm doing something wrong and I think I know why but I can't fix it. I feel like I'm not calling the right paintbrush. Here's my Java Class code:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CanvasView extends View
{
private Paint paint = new Paint();
private Path path = new Path();
private Canvas canvas = new Canvas();
private Paint canvasPaint = new Paint();
private Bitmap canvasBitmap;

public CanvasView(Context context, AttributeSet attrs)
{
    super(context, attrs);

    paint.setAntiAlias(true);
    paint.setStrokeWidth(5);
    paint.setColor(Color.BLACK);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeJoin(Paint.Join.ROUND);
    paint.setStrokeCap(Paint.Cap.ROUND);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
    super.onSizeChanged(w, h, oldw, oldh);
    canvasBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    canvas = new Canvas(canvasBitmap);
}

@Override
protected void onDraw(Canvas drawCanvas)
{
    drawCanvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
    drawCanvas.drawPath(path, paint);
}

@Override
public boolean onTouchEvent(MotionEvent e)
{
    // get the coords of the touch event
    float eventX = e.getX();
    float eventY = e.getY();

    switch (e.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // set a new starting point
            path.moveTo(eventX, eventY);
            return true;
        case MotionEvent.ACTION_MOVE:
            // connect the points
            path.lineTo(eventX, eventY);
            break;
        default:
            return false;
    }

    //makes you view repaint and call ondraw
    invalidate();
    return true;
}

public void clearCanvas()
{
    canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
}

Here's my MainActivity code:

public class MainActivity extends Activity {

private CanvasView canvasView;
private Paint paint;
private int orange;
private int purple;

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

    canvasView = (CanvasView) findViewById(R.id.canvasView);
    paint = new Paint();
    orange = Color.rgb(255, 245, 238);
    purple = Color.rgb(128, 0, 128);

    // REGULAR BUTTONS: save, about, reset
    Button saveB = (Button) findViewById(R.id.saveButton);
    Button aboutB = (Button) findViewById(R.id.aboutButton);
    Button resetB = (Button) findViewById(R.id.resetButton);

    // IMAGE BUTTONS: red, blue, green, yellow, black, purple, orange, erase, brush thickness plus, brush thickness minus
    ImageButton redIb = (ImageButton) findViewById(R.id.redButton);
    ImageButton blueIb = (ImageButton) findViewById(R.id.blueButton);
    ImageButton greenIb = (ImageButton) findViewById(R.id.greenButton);
    ImageButton yellowIb = (ImageButton) findViewById(R.id.yellowButton);
    ImageButton blackIb = (ImageButton) findViewById(R.id.blackButton);
    ImageButton purpleIb = (ImageButton) findViewById(R.id.purpleButton);
    ImageButton orangeIb = (ImageButton) findViewById(R.id.orangeButton);
    ImageButton eraseIb = (ImageButton) findViewById(R.id.eraseButton);
    ImageButton plusIb = (ImageButton) findViewById(R.id.plusButton);
    ImageButton minusIb = (ImageButton) findViewById(R.id.minusButton);

    minusIb.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            paint.setStrokeWidth(-5);
        }
    });

    plusIb.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            paint.setStrokeWidth(5);
        }
    });

    eraseIb.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            paint.setColor(Color.TRANSPARENT);
        }
    });

    orangeIb.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            paint.setColor(orange);
        }
    });

    purpleIb.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            paint.setColor(purple);
        }
    });

    blackIb.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            paint.setColor(Color.BLACK);
        }
    });

    yellowIb.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            paint.setColor(Color.YELLOW);
        }
    });

    greenIb.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            paint.setColor(Color.GREEN);
        }
    });

    blueIb.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            paint.setColor(Color.BLUE);
        }
    });

    redIb.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            paint.setColor(Color.RED);
        }
    });

    saveB.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    });

    aboutB.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(getApplicationContext(), AboutActivity.class);

            startActivity(intent);
        }
    });

    resetB.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            canvasView.clearCanvas();
            // canvasView.clearCanvas2();
        }
    });
}

Answer 1

You are setting your values on a entire different Paint which has no connection to your CanvasView. You would have to change the Paint of your CanvasView and call invalidate on it to make any changes.

Implement something like this in your CanvasView to change the stroke width:

public void setStrokeWidth(int strokeWidth) {
    paint.setStrokeWidth(strokeWidth);
    invalidate();
}

and call it in your onClick() with canvasView.setStrokeWidth(5);

Same goes for Color:

public void setColor(int color) {
    paint.setColor(color);
    invalidate();
}

and call it in your onClick() with canvasView.setColor(Color.BLUE);

Answer 2

如果你想在 Kotlin 中实现；

paint.strokeWidth = 3.0f

Answer 3

You have created a Paint object in your activity (let's say paint1) and you have another Paint object in your canvas class (let's say paint2). You're performing the drawing operation using paint2 but in your activity, you're not updating the paint2 instead you're changing the paint1 that is created within the activity. So your changes upon button clicks are not shown.

You need to pass the paint1 object from activity to canvas in order to make changes and also call the invalidate() to redraw with updated paint. See the code below:

public void updateCanvasPaint(Paint paint){
    this.paint = paint;
    invalidate();
}

Call this in your onClick methods after making changes to paint. Like this:

blueIb.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        paint.setColor(Color.BLUE);
        canvasView.updateCanvasPaint(paint);
    }
});