Android Studioでお絵描きアプリを作成しているのですがボタンを押して色を変更することができません。

前提・実現したいこと

Android Studioでお絵描きアプリを作成しています。お絵描きアプリらしく色を変えたり、線の太さを変えたりすることを実装しようとしています。
今は、線を引くところまでは完成したのですが、ボタンを押して色を変えることができません。
ボタンを押して、ポップアップを表示するところまではできましたが、ボタンを押しても色が変わらないのです。
色々と試してはいるのですが、うまくいかないのでアドバイスお願いしたいです。

MainActivity.java

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private DrawingView drawingView;
    Button red_button,blue_button,yellow_button;

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

        blue_button= findViewById(R.id.blue_button);
        red_button= findViewById(R.id.red_button);
        yellow_button= findViewById(R.id.yellow_button) ;
        blue_button.setOnClickListener(this);
        red_button.setOnClickListener(this);
        yellow_button.setOnClickListener(this);

        this.drawingView = findViewById(R.id.drawing_view);

        findViewById(R.id.delete_button).setOnClickListener(deleteDrawing);

    }
    View.OnClickListener deleteDrawing = new View.OnClickListener(){
        @Override
        public void onClick(View view){
            drawingView.delete();
        }
    };


    public void onClick(View v){
        switch(v.getId()){
            case R.id.blue_button:
                drawingView.setPen(Color.BLUE);
                Toast.makeText(this,"blue",Toast.LENGTH_SHORT).show();
                break;
            case R.id.red_button:
                drawingView.setPen(Color.RED);
                Toast.makeText(this,"red",Toast.LENGTH_SHORT).show();
                break;
            case R.id.yellow_button:
                drawingView.setPen(Color.YELLOW);
                Toast.makeText(this,"yellow",Toast.LENGTH_SHORT).show();
                break;
        }
    }

    @Override
    public void onPointerCaptureChanged(boolean hasCapture) {

    }
}

view.java

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.icu.text.RelativeDateTimeFormatter;
import android.os.Environment;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class DrawingView extends View {
    private Paint paint;
    private Path path;
    Bitmap bmp = null;
    Paint pen =new Paint();

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

        this.path = new Path();

        this.paint = new Paint();
        this.paint.setStyle(Paint.Style.STROKE);
        this.paint.setAntiAlias(true);
        this.paint.setStrokeWidth(5);
    }

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

        pen.setStyle(Paint.Style.STROKE);
        pen.setStrokeWidth(2);
    }

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

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                this.path.moveTo(x, y);
                break;
            case MotionEvent.ACTION_MOVE:
                this.path.lineTo(x, y);
                break;
            case MotionEvent.ACTION_UP:
                this.path.lineTo(x, y);
                break;
        }
        invalidate();
        return true;
    }

    public void delete() {
        this.path.reset();
        invalidate();
    }

   public void setPen(int color){
       pen.setColor(color);

    }
}

試したこと

行動規範の内容に同意します

回答2件

ベストアンサー

回答を修正し、履歴を管理するバージョンのコードだけを残します。

java
1public class DrawingView extends View {
2    // 履歴
3    private List<DrawLine> lines;
4    // 現在、描いている線の情報
5    private Paint paint;
6    private Path path;
7
8    // 線の履歴(座標＋色)
9    class DrawLine {
10        private Paint paint;
11        private Path path;
12
13        DrawLine(Path path, Paint paint) {
14            this.paint = new Paint(paint);
15            this.path = new Path(path);
16        }
17
18        void draw(Canvas canvas) {
19            canvas.drawPath(this.path, this.paint);
20        }
21    }
22
23    public DrawingView(Context context) {
24        super(context);
25    }
26
27    public DrawingView(Context context, AttributeSet attrs) {
28        super(context, attrs);
29
30        this.path = new Path();
31
32        this.paint = new Paint();
33        this.paint.setStyle(Paint.Style.STROKE);
34        this.paint.setAntiAlias(true);
35        this.paint.setStrokeWidth(5);
36
37        this.lines = new ArrayList<DrawLine>();
38    }
39
40    @Override
41    protected void onDraw(Canvas canvas) {
42        super.onDraw(canvas);
43
44        // キャンバスをクリア
45        canvas.drawColor(Color.WHITE);
46        // 履歴から線を描画
47        for(DrawLine line : this.lines) {
48            line.draw(canvas);
49        }
50        // 現在、描いている線を描画
51        canvas.drawPath(this.path, this.paint);
52    }
53
54    @Override
55    public boolean onTouchEvent(MotionEvent event) {
56        float x = event.getX();
57        float y = event.getY();
58
59        switch (event.getAction()) {
60            case MotionEvent.ACTION_DOWN:
61                this.path.moveTo(x, y);
62                break;
63            case MotionEvent.ACTION_MOVE:
64                this.path.lineTo(x, y);
65                break;
66            case MotionEvent.ACTION_UP:
67                this.path.lineTo(x, y);
68                // 指を離したので、履歴に追加する
69                this.lines.add(new DrawLine(this.path, this.paint));
70                // パスをリセットする
71                // これを忘れると、全ての線の色が変わってしまう
72                this.path.reset();
73                break;
74        }
75        invalidate();
76        return true;
77    }
78
79    public void delete() {
80        // 履歴をクリア
81        this.lines.clear();
82        // 現在の線をクリア
83        this.path.reset();
84        invalidate();
85    }
86
87    public void setPen(int color){
88        this.paint.setColor(color);
89    }
90}

投稿2018/06/22 05:26

編集2018/07/05 23:20

mingos

総合スコア4025

tokutoku453

2018/06/28 07:02 編集

返信遅れてごめんなさい！該当箇所を直したところ、無事にペンの色が変わりました！ありがとうございます。また素朴な疑問なんですが、色変えした際にひいていた線の全て色が変わってしまいまして、何か解決できる方法などはあるんでしょうか？

mingos

2018/06/28 09:25 編集

今は、ペンというか色の設定(Paintのインスタンス)が1つしかないため、全部の線の色が変わるのは仕方ないですね。この手のお絵かきアプリやゲームなどは、毎回画面を書き直す必要があります。具体的には、こういう事をしなければいけません。線を書く時に、色と座標をセットで記憶する。独自クラスと、独自クラスのListを用意。・MotionEvent.ACTION_UPのところで、独自クラスのリストに履歴を追加・onDraw()では以下の処理をする　・キャンバスをクリア(白などで画面全体を塗りつぶす) 　・これまでの履歴をもとに、線を書き直す上記の実装例を回答に追記しましたので、参考にしてみてください。 ※実際に試してみたところ、MotionEvent.ACTION_UPのところで、path.reset()をやらないとコピーしたPathのインスタンスのほうも影響を受けてしまうようです。履歴を管理するやり方でなくても、単純にMotionEvent.ACTION_UPのpath.moveTo()の後に、path.reset()を呼んでやれば良さそうです。

tokutoku453

2018/06/29 09:39

回答ありがとうございます。色変えボタンを押すたびに新しくcanvas？を作成して新しく線を引くという処理を追加したところ無事に一つ一つの色が違う線を引けるようになりました。さらに質問で申し訳ないのですが、消しゴムを作成しているのですが、白色を設定すれば消しゴムになると思っていたのですが、背景色と違うため白色が浮き出てしまいました。透明色を指定すれば消しゴムと同じ扱いができることは分かったのですが透明色に指定することができなくて困っています。また、線の太さを変える処理なども実装しようと思っています。これらの方法を今模索しているところです。

tokutoku453

2018/07/05 22:14

たびたび質問申し訳ありません。新しく色を変えることに成功したのですが、新しいcanvasを使って線を引くという処理をして色を変えることに成功したのですが、この処理だとデリートボタンが作動せず全消去されないという事態になってしまいました。 pathリストを作って消去しようとはしているのですがうまくいかないのです。もしよろしければアドバイスをしてもらえると嬉しいです。

mingos

2018/07/05 23:26

delete()の部分を修正しました。 this.linesに履歴が入っているので、delete()のところで、clearして中身を空にすればOKです。ちなみに、新しくcanvasを作っているのではなくて、線の履歴(DrawLine)のdrawメソッドにcanvasを渡しているだけで、使っているcanvasは１つだけです。消しゴムについては、もう解決したかもしれませんが、PorterDuff.Mode.CLEAR というキーワードで検索すると良いです。 https://qiita.com/androhi/items/0af2b9a1db31fa2ed07e

tokutoku453

2018/07/12 21:55 編集

返信が遅れてしまい申し訳ありません　線の履歴から削除するというのは全くの盲点でした。わざわざ、消しゴムの助言を教えて下さりありがとうございます。消しゴムは一時保留にしています。教えてもらったサイトを参考に試していますが、背景色と同色にならないので線の部分の太さを初期設定で決めている形式になっていますが、もしかして、スライダーを使ってしているすることもできたりするのでしょうか？スライダーに指定した数値を線の太さの部分に応用するような形でthisなどを使って呼び出すようにしてみたのですが、いまいち起動せず… thisを使ってやる形ではない言うことになりますか？」

mingos

2018/07/12 23:28

線の太さは、PaintのsetStrokeWidth()で指定します。 setPenのように、外部から指定できるようにします。 public void setStrockWidth(float width) { this.paint.setStrokeWidth(width); } あとは、アクティビティからこれを呼べばいいでしょう。とりあえず、動作を確認するために、太さ1、太さ2などのボタンをアクティビティに配置して、クリックされたら固定の数値を指定するようにして太さが変わる事を確認します。それが出来たら、スライダーによる数値の指定に切り替えればよいでしょう。

tokutoku453

2018/07/19 18:16

返信が遅れてしまい申し訳ありません。無事に線の太さを変更することに成功しました。助言ありがとうござます。消しゴムも透明色を指定するのではなく背景を白に設定して、上から白を塗りつぶして消していくという形に収まりました。これでお絵描きアプリの下準備が整ったのでうれしい限りです。また質問で申し訳ないのですが、今お絵描きアプリでドット絵を描けるものを作ろうとしているのですが、ペン先を四角形に固定して、ドット絵を描けるようにしているする方法などはあるのでしょうか？ペン先の太さを変更して四角形っぽくすることはできたのですが線の位置を少しでもずらしてしまうとドット絵ではなくなってしまうのです。これはcanvasに升目を設定してそれの上に線を重ねていく方法で解決するのでしょうか？それとも別のいい方法があるのでしょうか？ご助言お願い足します。

mingos

2018/07/19 18:41

進展があったようでなによりです。ドット絵については、升目(drawLineで描画)を書いた後、タップされたときに対応する升目の座標を計算して、drawRectで正方形を描画すれば出来そうですね。対応する座標というのは、各升目の左上の座標の事です。キャンバスの左上(0,0)からドットを描画する場合、ドットのサイズにより求められます。ドットのサイズを仮に40とすると、 int ドットのX座標＝タップされたスクリーンX座標 / 40; int ドットのY座標＝タップされたスクリーンY座標 / 40; ※int型であることが重要で求められますので、ドットのXY座標から40x40の正方形を指定の色で描画してやればドットが描けるはずですね。手元で試したわけじゃないので、あくまでも考え方の１つとして参考になれば幸いです。

tokutoku453

2018/07/19 18:43

こんな遅い時間に回答ありがとうございます。 drawlineで線を引くとデリートで消えたりしないんですか？

mingos

2018/07/19 18:45

onDraw()で毎回全てを書き直す前提です。つまり、すべての履歴を保持しておきます。そうしないと、アンドゥ機能も作れません。

tokutoku453

2018/07/19 18:47

あー、そういうことですか　デリートを押すたびに升目だけを再び再描画する感じになるんですね　ありがとうございます。いただいた助言でタップされた升目の座標に描画できるように作ってみます。

tokutoku453

2018/11/08 21:46

長らく時間が空いてしまいましたアプリづくりは難航しております…