画像に描画

Question

Android開発でカメラで撮影した画像をimageviewに張り付けて
タッチで線を描画することについて行っております。

現状では画像を張り付けて読み込んだ画像にcanvasをセットして、
タッチで線を描画するところまでやっているのですが、
線を描画する際にタッチで取得した座標に描画することができません。
どうしても左上周辺に線が描画されてしまいます。
それを正しい座標に描画できるようにしたいと思っております。宜しくお願い致します。

// Canvasの作成:描画先のBitmapを与える
            canvas = new Canvas(bitmap);
            // Paintの作成
            ・・・

            // ImageViewに作成したBitmapを与える
            imageView.setImageBitmap(bitmap);
            imageView.setOnTouchListener(this);



@Override
    public boolean onTouch(View view, MotionEvent e) {
        switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN:
                posX = e.getX();
                posY = e.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                canvas.drawLine(posX, posY, e.getX(), e.getY(), paint);
                posX = e.getX();
                posY = e.getY();

                findViewById(R.id.imageView).invalidate();
                break;
            default:
                break;
        }
        return true;
    }

Comments

[yona]

コードはコード用の記述に修正してください。

Answer 1

Canvas#scaleを使用していませんか？
その場合、タッチした位置と描画先がズレる可能性があります。

上記の場合描画する座標にscaleで設定した値を掛けることで補正する必要があります。

Comments

[退会済みユーザー]

Canvas#scaleは使用しておりません。

[yona]

ImageViewのscaleTypeはなんでしょうか。
これも自動で画像を拡大する可能性があります。

そもそもImageViewを経由せずに直接CanvasにBitmapを描画する方が一般的だと思いますよ。

[退会済みユーザー]

ImageViewのscaleTypeはfitCenterです。
画像が自動で縮小されてもできる方法はありますか？

[yona]

fitCenterだと元の画像から拡大・縮小されているのでタッチの位置と画像上の位置がずれそうですね。

ImageViewの縦横とBitmapの縦横の比率を考慮して、タッチの位置と描画の位置を調整するとできます。

ただ、Canvasだけを使った方がらくですよ。

[abs123]

横から失礼します。

ImageView#getImageMatrixで行列が取得できるので、
その逆行列にタッチ位置を突っ込めば、画像上の座標に変換できそうな感じがしますね

ただ、縮小の度合いによっては、線がきれいに引けない可能性がありそう・・・

yonaさんもおっしゃっている通り、
Canvas(+View?)で実装した方が、いろいろといじりやすいと思います。

[yona]

abs123さん
そのメソッドってScaleTypeがMatrix以外でも使えるんでしたっけ？

[abs123]

ImageView#configureBoundsの処理を見た限りでは、
すべてのScaleTypeで行列操作していそうなので、たぶん使えると思います。

Matrixの場合は設定された行列をそのまま使うように、
それ以外では、設定された行列か、なければ単位行列にいろいろやってるっぽいです。

[退会済みユーザー]

Canvasを使った方法について詳しく教えてください。

[yona]

Canvas#drawBitmapを使えばいいですよ。

ただ、実装方法は今のものと大きく異なるので調べて、実装してみて分からなければ再度質問した方が効率的ですよ。