android - Android の Paint と Canvas で色を変更する

Question

質問がばかげている場合は申し訳ありませんが、私はAndroidが初めてです。developer.android.сom でよく読んでいますが、残念ながら私の問題の解決策は見つかりません。staсkoverflow で見つけたコードのほとんどは、パーツ自体を完成させたものです。このビューは、テキストの上に FrameLayout のアクティビティに挿入され、電子書籍にメモを残すことができます。

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

試すことができることの 1 つは、配列 List の各パスに対して 1 つのオブジェクトを作成することです。このようにして、ArrayList の各パスにPaint異なるプロパティを指定できます。Paint

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

あなたは正しい方法を説明しますが、最初に色を選択すると正しく機能しますが、再度変更すると同じ問題が発生しました。