android - 在 Android 上的 Paint 和 Canvas 中更改颜色

Question

对不起，如果这个问题很愚蠢，但我是 Android 新手。我在 developer.android.сom 上阅读了很多内容，但不幸的是，我的问题没有找到解决方案。我在 staсkoverflow 上找到的大部分代码都完成了部件本身。这个 View 插入到 FrameLayout 中的 Activity 中，覆盖了文本，并允许您在电子书中留下笔记。

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

public class PaintSurface extends View implements OnTouchListener {

    private Canvas canvas;
    private Path path;
    private Paint paint;
    private ArrayList<Path> paths = new ArrayList<Path>();

    public PaintSurface(Context context) {
        super(context);
        setFocusable(true);
        setFocusableInTouchMode(true);

        this.setOnTouchListener(this);

        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.MITER);
        paint.setStrokeCap(Paint.Cap.SQUARE);
        paint.setColor(Color.RED);
        paint.setStrokeWidth(16);
        paint.setAlpha(100);
        canvas = new Canvas();
        path = new Path();
        paths.add(path);

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        for (Path p : paths) {
            canvas.drawPath(p, paint);
        }

    }

    private float mX, mY;
    private static final float TOUCH_TOLERANCE = 4;

    private void touch_start(float x, float y) {
        path.reset();
        path.moveTo(x, y);
        mX = x;
        mY = y;
    }

    private void touch_move(float x, float y) {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            path.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
            mX = x;
            mY = y;
        }

    }

    private void touch_up() {
        path.lineTo(mX, mY);
        canvas.drawPath(path, paint);

        path = new Path();
        paths.add(path);

    }

    @Override
    public boolean onTouch(View arg0, MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            touch_start(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            touch_move(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            touch_up();
            invalidate();
            break;
        }
        return true;

    }

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

    }
}

描述问题。我画了默认颜色的线，红色。然后，使用 setColor() 更改为绿色，在红线旁边绘制一条绿线。但是第一条红线也变成了绿色。如果您更改样式或笔划宽度，则会发生此类更改。怎么可能画出不同的颜色？

感觉几个月后这个问题在我看来是可笑和愚蠢的，我自己会觉得自己很傻，我会感到羞耻，但现在我不知道如何解决这个问题......

Answer 1

颜色仅在Paint您绘制时生效。

从您的代码中，您一次绘制所有路径。

  for (Path p : paths) {
        canvas.drawPath(p, paint);
  }

这需要相同的绘画对象并使用它来绘制路径，使用最后设置的颜色。

您需要做的是在绘图之间设置颜色。

   paint.setColor(color.RED); // Will apply to first path.

   for (Path p : paths) {           
        canvas.drawPath(p, paint);
        paint.setColor(color.GREEN); // Will be applied on next Path.
    }

更好的解决方案是

   for (Path p : paths) {    
        //Determine Paint color Here.
        paint.setColor(myColor); // where myColor is your variable to use for this layer.
                                 // This could be from an array/List of colors matching to Paths.
        canvas.drawPath(p, paint);          
    }

Answer 2

您可以尝试的一件事是为Paint数组 List 中的每个路径创建一个对象。这样您可以Paint为 ArrayList 中的每个路径指定不同的属性...

Answer 3

试试这个代码，它将有助于改变画布背景颜色和油漆颜色。我在我的应用程序中使用它。

package com.kidsfingerpainting;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import android.annotation.SuppressLint;
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.Mode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CanvasView extends View {

    private Paint mPaint;

    private Bitmap mBitmap;
    private Canvas mCanvas;
    private android.graphics.Path mPath;
    private Paint mBitmapPaint;
    private ArrayList<Path> paths = new ArrayList<Path>();
    private ArrayList<Path> undonePaths = new ArrayList<Path>();
    public static int selectedcolor;
    private Map<Path, Integer> colorsMap = new HashMap<Path, Integer>();

    public CanvasView(Context c, int width, int height) {
        super(c);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(0xFF000000);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(10);
        mCanvas = new Canvas();
        mPath = new Path();
        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
        selectedcolor = getResources().getColor(R.color.black);

    }

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

    }

    // ////////////////////////all color for brush/////////////////
    public void setPaintMode() {
        mPaint.setColor(0xFF000000);
        mPaint.setStrokeWidth(10);
    }

    public void set_PaintModetrans() {
        mPaint.setColor(0x00000000);
        mPaint.setStrokeWidth(10);
    }

    public void setPaintMode_violet() {
        mPaint.setColor(0xFF8B00FF);
        mPaint.setStrokeWidth(10);
        selectedcolor = getResources().getColor(R.color.violet);
    }

    public void setPaintMode_indigo() {
        mPaint.setColor(0xFF000066);
        mPaint.setStrokeWidth(10);
        selectedcolor = getResources().getColor(R.color.indigo);
    }

    public void setPaintMode_blue() {
        mPaint.setColor(0xFF0000FF);
        mPaint.setStrokeWidth(10);
        selectedcolor = getResources().getColor(R.color.blue);
    }

    public void setPaintMode_green() {
        mPaint.setColor(0xFF00FF00);
        mPaint.setStrokeWidth(10);
        selectedcolor = getResources().getColor(R.color.green);
    }

    public void setPaintMode_yellow() {
        mPaint.setColor(0xFFFFFF00);
        mPaint.setStrokeWidth(10);
        selectedcolor = getResources().getColor(R.color.yellow);
    }

    public void setPaintMode_orange() {
        mPaint.setColor(0xFFFF7F00);
        mPaint.setStrokeWidth(10);
        selectedcolor = getResources().getColor(R.color.orange);
    }

    public void setPaintMode_red() {
        mPaint.setColor(0xFFFF0000);
        mPaint.setStrokeWidth(10);
        selectedcolor = getResources().getColor(R.color.red);
    }

    public void setPaintMode_redbg() {
        mCanvas.drawColor(0xFFFF0000);
        mPaint.setColor(0x00000000);
    }

    public void setPaintMode_pink() {
        mPaint.setColor(0xFFFF33CC);
        mPaint.setStrokeWidth(10);
        selectedcolor = getResources().getColor(R.color.pink);
    }

    public void setPaintMode_white() {
        mPaint.setColor(0xFFFFFFFF);
        mPaint.setStrokeWidth(10);
        selectedcolor = getResources().getColor(R.color.white);
    }

    public void setPaintMode_black() {
        mPaint.setColor(0xFF000000);
        mPaint.setStrokeWidth(10);
        selectedcolor = getResources().getColor(R.color.black);
    }

    // /////////////////////// all background color set code////////////
    public void setPaintMode_blackbg() {
        mCanvas.drawColor(0xFF000000);
    }

    public void setPaintMode_whitebg() {
        mCanvas.drawColor(0xFFFFFFFF);
    }

    public void setPaintMode_pinkbg() {
        mCanvas.drawColor(0xFFFF33CC);
    }

    public void setPaintMode_orangebg() {
        mCanvas.drawColor(0xFFFF7F00);
    }

    public void setPaintMode_yellowbg() {
        mCanvas.drawColor(0xFFFFFF00);
    }

    public void setPaintMode_greenbg() {
        mCanvas.drawColor(0xFF00FF00);
    }

    public void setPaintMode_bluebg() {
        mCanvas.drawColor(0xFF0000FF);

    }

    public void setPaintMode_indigobg() {
        mCanvas.drawColor(0xFF000066);

    }

    public void setPaintMode_violetbg() {
        mCanvas.drawColor(0xFF8B00FF);

    }

    // ////////////////////////////////////////////////////
    public void setEraseMode() {
        selectedcolor = getResources().getColor(R.color.white);
        mPaint.setColor(0xFFFFFFFF);
        mPaint.setStrokeWidth(10);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
        for (Path p : paths) {
            mPaint.setColor(colorsMap.get(p));
            canvas.drawPath(p, mPaint);
        }

        mPaint.setColor(selectedcolor);
        canvas.drawPath(mPath, mPaint);
    }

    private float mX, mY;
    private static final float TOUCH_TOLERANCE = 8;

    private void touch_start(float x, float y) {
        mPath.reset();
        mPath.moveTo(x, y);
        mX = x;
        mY = y;

    }

    private void touch_move(float x, float y) {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
            mX = x;
            mY = y;

        }
    }

    private void touch_up() {
        mPath.lineTo(mX, mY);
        paths.add(mPath);
        colorsMap.put(mPath, selectedcolor);
        mPath = new Path();
        mPath.reset();
        invalidate();

    }

    public void eraseAll() {

        if (mPath != null) {
            paths.clear();
        }
        invalidate();
    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            touch_start(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            touch_move(x, y);
            // currentMoveList.add(mPath);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            touch_up();

            invalidate();
            break;
        }
        return true;
    }

    public void resetcanvas() {
        mCanvas.drawColor(Color.TRANSPARENT, Mode.CLEAR);
    }

    public void onClickUndo() {
        if (paths.size() > 0) {
            undonePaths.add(paths.remove(paths.size() - 1));
            invalidate();
        } else {

        }

    }
}

您可以通过这样做从活动中调用它的任何方法。

CanvasView canvas = new CanvasView(MainActivity.this, width, height);
        frame_layout.addView(canvas);

将此粘贴到 oncreate 方法中。

// 设置 Onclick 监听器并使用以下代码

undo = (ImageView) findViewById(R.id.undo);
        undo.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                canvas.onClickUndo();

            }
        });
        eraser = (ImageView) findViewById(R.id.eraser);
        eraser.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                canvas.setEraseMode();

            }
        });
        clear = (ImageView) findViewById(R.id.clear);
        clear.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                canvas.eraseAll();

            }
        });

Answer 4

替换您的 onTouchEvent 和 onDraw 方法，或者您可以使用此自定义视图

package com.draw;

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.Mode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class DrawingView extends View {
    private Paint paint;
    private Path path;
    private Paint canvasPaint;
    private Canvas drawCanvas;
    private Bitmap canvasBitmap;

    public DrawingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.init();

        this.paint.setAntiAlias(true);
        this.paint.setStrokeWidth(4f);
        this.paint.setColor(Color.BLACK);
        this.paint.setStyle(Paint.Style.STROKE);
        this.paint.setStrokeJoin(Paint.Join.ROUND);
    }

    private void init() {
        this.paint = new Paint();
        this.path = new Path();
        this.canvasPaint = new Paint(Paint.DITHER_FLAG);
    }

    public void setStroke(float width) {
        this.paint.setStrokeWidth(width);
    }

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

    public void reset() {
        this.drawCanvas.drawColor(0, Mode.CLEAR);
        invalidate();
    }

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

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

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float eventX = event.getX();
        float eventY = event.getY();

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            this.path.moveTo(eventX, eventY);
            break;

        case MotionEvent.ACTION_MOVE:
            this.path.lineTo(eventX, eventY);
            break;

        case MotionEvent.ACTION_UP:
            this.drawCanvas.drawPath(this.path, this.paint);
            this.path.reset();
            break;

        default:
            return false;
        }

        invalidate();
        return true;
    }
}

Answer 5

我遇到了同样的问题，我的 DrawingView 类中有两种方法，一种是在调色板上选择不同颜色时更改颜色。另一种是每隔几秒随机改变一次颜色。

我必须在这两种方法中使用 invalidate() 来刷新主线程上受影响的内容，而不是更改之前绘制的任何内容。如果您只在方法中使用 invalidate 效果很好。

    public void setColor(String newColor) {
    //set color
    invalidate();
    paintColor = Color.parseColor(newColor);
    drawPaint.setColor(paintColor);
}


//random color chosen automatically
public void randomColor () {
    //invalidate needed here for the random color change every 30sec, to not change lines already drawn.
    invalidate();
    paintColor = Color.argb(255, rand.nextInt(256), rand.nextInt(256), rand.nextInt(256));
    drawPaint.setColor(paintColor);
}

Answer 6

您描述了正确的方法，但是当第一次选择颜色时，它可以正常工作但再次更改然后发生同样的问题。

Answer 7

如果你想在 android 中设置颜色的十六进制代码，那么这里是字符串

 currentPaint.setColor(Color.parseColor("#B6B6B6"));