java - 新しい画像を保存すると、古いキャンバスが保持されます

Question

ユーザーが描画して保存できるキャンバスがあります。また、ユーザーは色を変更して、同じキャンバスに異なる色で描画することもできます。

私のペイントクラス：

package com.test.testing;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Paint.Style;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

import com.test.testing.*;

public class CustomView extends View {
    Paint paint;
    Path path;
    float x = 0;
    float y = 0;
    private int cWhite = Color.WHITE;
    private Button btnS, btnSa;

    public CustomView(Context context) {
        super(context);
        paint = new Paint();
        path= new Path();
        paint.setAlpha(255);
        paint.setColor(cWhite);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(20);

        btnS = (Button)((FreeDraw) context).findViewById(R.id.shareButton);
        btnSa = (Button)((FreeDraw) context).findViewById(R.id.saveButton);
    }

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(path,paint);
        canvas.drawCircle(x, y, 10, paint);
    }

    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch (action) {
        case MotionEvent.ACTION_DOWN:
            path.moveTo(event.getX(), event.getY());
            path.lineTo(event.getX(), event.getY());
            if (btnS.getVisibility() == View.VISIBLE && btnS != null) {
                //if share button is displaying but I drew something else
                //the share button should disappear and I should be presented
                //with the save button

                btnS.setVisibility(View.GONE);
                btnSa.setVisibility(View.VISIBLE);
            }
            if (btnSa.getVisibility() == View.VISIBLE && btnS != null) {
                //do nothing...
            }
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            x = event.getX();
            y = event.getY();
            path.lineTo(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            path.lineTo(event.getX(), event.getY());
            invalidate();
            break;
        case MotionEvent.ACTION_CANCEL:
            break;
        default:
            break;
        }
        return true;
    }
}

私のアクティビティでは、Paint クラスを呼び出し、次のような XML レイアウトを使用します。

layout = (FrameLayout)findViewById(R.id.viewd);
//layout.removeAllViews();
view = new CustomView(FreeDraw.this);
view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
layout.addView(view);

また、同じアクティビティで、色の変更を処理する次のコードがあります。

public void colorHandle() {
    // custom dialog
    final Dialog dialog = new Dialog(this);
    dialog.setContentView(R.layout.colorlayout);
    dialog.setTitle("Choose a Drawing Color");

    Button btnWH = (Button) dialog.findViewById(R.id.btnWhite);
    Button btnBL = (Button) dialog.findViewById(R.id.btnBlack);
    Button btnBLU = (Button) dialog.findViewById(R.id.btnBlue);
    Button btnCY = (Button) dialog.findViewById(R.id.btnCyan);
    Button btnDG = (Button) dialog.findViewById(R.id.btnDkGray);
    Button btnGR = (Button) dialog.findViewById(R.id.btnGray);
    Button btnGRE = (Button) dialog.findViewById(R.id.btnGreen);
    Button btnLG = (Button) dialog.findViewById(R.id.btnLtGray);
    Button btnMG = (Button) dialog.findViewById(R.id.btnMagenta);
    Button btnRD = (Button) dialog.findViewById(R.id.btnRed);
    Button btnYE = (Button) dialog.findViewById(R.id.btnYellow);

    if (btnWH != null) {
        btnWH.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.WHITE);
                dialog.dismiss();
            }
        });
    }
    if (btnBL != null) {
        btnBL.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.BLACK);
                dialog.dismiss();
            }
        });
    }
    if (btnBLU != null) {
        btnBLU.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.BLUE);
                dialog.dismiss();
            }
        });
    }
    if (btnCY != null) {
        btnCY.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.CYAN);
                dialog.dismiss();
            }
        });
    }
    if (btnDG != null) {
        btnDG.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.DKGRAY);
                dialog.dismiss();
            }
        });
    }
    if (btnGR != null) {
        btnGR.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.GRAY);
                dialog.dismiss();
            }
        });
    }
    if (btnGRE != null) {
        btnGRE.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.GREEN);
                dialog.dismiss();
            }
        });
    }
    if (btnLG != null) {
        btnLG.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.LTGRAY);
                dialog.dismiss();
            }
        });
    }
    if (btnMG != null) {
        btnMG.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.MAGENTA);
                dialog.dismiss();
            }
        });
    }
    if (btnRD != null) {
        btnRD.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.RED);
                dialog.dismiss();
            }
        });
    }
    if (btnYE != null) {
        btnYE.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                layout = (FrameLayout)findViewById(R.id.viewd);
                //layout.removeAllViews();
                view = new CustomView(FreeDraw.this);
                view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
                layout.addView(view);
                view.paint.setColor(Color.YELLOW);
                dialog.dismiss();
            }
        });
    }
    dialog.show();
}

何かを描画して色を変更し、別のものを描画すると、以前に描画されたすべてのパスが新しい色に変更され、このコードで修正されるため、色ごとに次のコードを繰り返す必要があります。

        layout = (FrameLayout)findViewById(R.id.viewd);
        //layout.removeAllViews();
        view = new CustomView(FreeDraw.this);
        view.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
        layout.addView(view);

アクティビティのコードの保存画像部分は次のとおりです。

View.OnClickListener saveHandle = new View.OnClickListener() {
    public void onClick(View v) {
        new SaveImageTask().execute(null, null, null);
    }
};
public class SaveImageTask extends AsyncTask<Void, Void, Void> {
     @Override
     protected Void doInBackground(Void... params) { //Running in background
        View content = layout;
        content.setDrawingCacheEnabled(true);
        content.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
        Bitmap bitmap = content.getDrawingCache();
        File folder = new File(Environment.getExternalStorageDirectory() + "/PB");
        if (!folder.exists()) {
            folder.mkdir();
        }
        file = new File(folder + "/pb_image_" + Math.random()  + ".png");
        FileOutputStream ostream;
        try {
            file.createNewFile();
            ostream = new FileOutputStream(file);
            bitmap.compress(CompressFormat.PNG, 100, ostream);
            ostream.flush();
            ostream.close();
            isSaved = true;
        } catch (Exception e) {
            e.printStackTrace();
            isSaved = false;
        }
        return null;
     }

     @Override
     protected  void onPreExecute() { //Activity is on progress
         //displayToast("Your image is saving...");
         btnSave.setVisibility(View.GONE);
         btnShare.setVisibility(View.GONE);
         pb.setVisibility(View.VISIBLE);
     }

     @Override
     protected void onPostExecute(Void v) { //Activity is done...
        if (isSaved == true) {
             displayToast("Image was saved.");
             btnSave.setVisibility(View.GONE);
             btnShare.setVisibility(View.VISIBLE);
             pb.setVisibility(View.GONE);
         }
         if (isSaved == false) {
             displayToast("Unable to save image. Try again later.");
             btnSave.setVisibility(View.VISIBLE);
             btnShare.setVisibility(View.GONE);
             pb.setVisibility(View.GONE);
         }
     }
}

私がやろうとしていることは次のとおりです。

何かを描いて画像を保存すると、[共有] ボタンが表示され、キャンバスがクリアされません (動作)。
SHAREボタンが表示されている間に、キャンバスに何か他のものを描画すると、SAVEボタンが再表示されます(機能します)
SAVEボタンをもう一度押すと、新しいキャンバスの描画が保存されます（機能していません。最初のステップで保存した以前に描画されたキャンバスを保存しています）

これを行うためにコードを変更するにはどうすればよいですか:

~~色ごとに新しいキャンバスを作成するのではなく、新しいパスを作成してください。~~
キャンバス上の描画が保存されたら、既存のキャンバスの上に新しいものを描画して保存します。新しいキャンバスは、古いパスと新しいパスをすべて保存する必要があります
~~ERASEボタンを押すとキャンバス全体をクリアする~~

score 4 · Accepted Answer

色ごとに新しいキャンバスを作成するのではなく、新しいパスを作成してください。

Pathユーザーがキャンバスに触れ、理論的に何かを描くたびにを作成します。その新しいパスをその色とともに保存し、onDrawメソッドでパス構造を反復処理し、保存された色で各パスを描画します。

// this will hold the data of each path the user draws
class DrawnItem {
    int color = Color.GREEN; // default values
    Path line = new Path();
}

Paint paint;
int mCurrentColor = Color.GREEN; // start with green
ArrayList<DrawnItem> mDrawings = new ArrayList<DrawnItem>();

// in the onDraw method:
protected void onDraw(Canvas canvas) {
    final int count = mDrawings.size();
    for (int i = 0; i < count; i++) {
        final DrawnItem item = mDrawings.get(i);
        paint.setColor(item.color);
        canvas.drawPath(item.line, paint);
    }
    paint.setColor(mCurrentColor);
    canvas.drawCircle(x, y, 10, paint);
}

private DrawnItem mCurrentItem = null;

// and in the onTouch method:
public boolean onTouchEvent(MotionEvent event) {
    final int action = event.getAction();
    switch (action) {
    case MotionEvent.ACTION_DOWN:
       // the user started a new drawing so build a new DrawnItem
       mCurrentItem = new DrawnItem();
       mCurrentitem.color= mCurrentColor;  
       mDrawings.add(mCurrentItem);
       // use the item.line to setup the Path with the x and y values
       // .... 
       invalidate();
       break; 
       case MotionEvent.ACTION_MOVE:
           x = event.getX();
           y = event.getY();
           mCurrentItem.line.lineTo(x, y);
           invalidate();
       break;
    case MotionEvent.ACTION_UP:
        mCurrentItem.line.lineTo(event.getX(), event.getY());
        mCurrentItem = null;
        invalidate();
        break;
    case MotionEvent.ACTION_CANCEL:
        mCurrentItem = null; // this drawing session was canceled so this DrawnItem is now closed
        break;
    default:
        break;

ここで、ダイアログで行う必要があるのは、カスタムビューのを選択した色のポイントに更新することだけですmCurrentColor。パス上のそのポイントから、専用の色で描画されます。ユーザーが色を以前に保存された色に切り替えると、その色に対応するパスが選択されます。

BitmapdoInBackground() でビューをとして保存するためのコード:

Bitmap bitmap = Bitmap.createBitmap(layout.getWidth(), layout.getHeight(), Bitmap.Config. RGB_565);
Canvas canvas = new Canvas(bitmap);
layout.draw(canvas);

ERASEボタンを押すとキャンバス全体をクリアする

以前のパス構造をクリアinvalidate()し、カスタムビューを呼び出します。

mDrawings.clear();
customView.invalidate();

java - 新しい画像を保存すると、古いキャンバスが保持されます

1 に答える 1

Related

Reference