[Android] Dessiner avec le doigt dans un Bitmap.

Custum ImageView

8 février 2018 à 13:53:41

Bonjour,

J'écris actuellement une class qui surcharge une ImageView celle-ci permettant de dessiner sur un Bitmap. Pour moment cela fonctionne mais j'ai un problème de coordonnée entre mon doigt et le dessin. Celui - ci varie selon la taille bitmap sélectionne. Je me doute que j'ai un problème de ratio, seulement je ne vois pas où. Cordialement.

package fr.yanasoft.axipush;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.support.v7.widget.AppCompatImageView;

/**
 * Created by Florian on 08/02/2018.
 */

public class ImageViewPaint extends AppCompatImageView implements View.OnTouchListener {

    private Context context;
    private Paint paint;
    private Canvas canvas;

    float   dwx, dwy, upx, upy;

    public ImageViewPaint(Context context) {
        super(context);
        init(context);
    }

    public ImageViewPaint(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public ImageViewPaint(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        super.setImageBitmap(bm);

        canvas.setBitmap(bm);
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {

        int action = motionEvent.getAction();

        switch (action)
        {
            case MotionEvent.ACTION_DOWN:
            {
                pointerPressed(motionEvent);
                break;
            }
            case MotionEvent.ACTION_MOVE:
            {
                pointerDragged(motionEvent);
                break;
            }
            case MotionEvent.ACTION_UP:
            {
                pointerReleased(motionEvent);
                break;
            }
        }

        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    @Override
    public boolean performClick() {
        return super.performClick();
    }

    private void init(Context c) {

        context = c;
        paint = new Paint();
        canvas = new Canvas();

        paint.setAntiAlias(true);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeWidth(10);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setColor(context.getColor(R.color.ax_green));

        this.setOnTouchListener(this);
    }

    private void pointerPressed(MotionEvent motionEvent)
    {
        dwx = motionEvent.getX();
        dwy = motionEvent.getY();
    }

    private void pointerDragged(MotionEvent motionEvent)
    {
        upx = motionEvent.getX();
        upy = motionEvent.getY();


        this.repaint();

        dwx = upx;
        dwy = upy;
    }

    private void pointerReleased(MotionEvent motionEvent)
    {
        upx = motionEvent.getX();
        upy = motionEvent.getY();

        this.repaint();
    }

    private void repaint()
    {
        this.canvas.drawLine(dwx, dwy, upx, upy, paint);
        this.invalidate();
    }
}

flo291288

9 février 2018 à 16:20:55

Bonjour,

J'ai ajouter un obj Matrix dans setImageBitmap, maintenant je suis très précis au centre du bitmap, mais plus je m’éloigne du centre, plus un décalage se fait.

Une idée?

package fr.yanasoft.axipush;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.support.v7.widget.AppCompatImageView;

/**
 * Created by Florian on 08/02/2018.
 */

public class ImageViewPaint extends AppCompatImageView implements View.OnTouchListener {

    private Context context;
    private Paint paint;
    private Canvas canvas;

    float   dwx, dwy, upx, upy;
    float xr, yr;

    public ImageViewPaint(Context context) {
        super(context);
        init(context);
    }

    public ImageViewPaint(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public ImageViewPaint(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        super.setImageBitmap(bm);

        xr = (bm.getWidth() - getWidth()) * 0.5f;
        yr = (bm.getHeight() - getHeight()) * 0.5f;

        Matrix matrix = new Matrix();
        matrix.setTranslate(xr, yr);

        canvas.setMatrix(matrix);
        canvas.setBitmap(bm);
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {

        int action = motionEvent.getAction();

        switch (action)
        {
            case MotionEvent.ACTION_DOWN:
            {
                pointerPressed(motionEvent);
                break;
            }
            case MotionEvent.ACTION_MOVE:
            {
                pointerDragged(motionEvent);
                break;
            }
            case MotionEvent.ACTION_UP:
            {
                pointerReleased(motionEvent);
                break;
            }
        }

        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    @Override
    public boolean performClick() {
        return super.performClick();
    }

    private void init(Context c) {

        context = c;
        paint = new Paint();
        canvas = new Canvas();

        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setFilterBitmap(true);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeWidth(10);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setColor(context.getColor(R.color.ax_green));

        this.setOnTouchListener(this);
    }

    private void pointerPressed(MotionEvent motionEvent)
    {
        dwx = motionEvent.getX();
        dwy = motionEvent.getY();
    }

    private void pointerDragged(MotionEvent motionEvent)
    {
        upx = motionEvent.getX();
        upy = motionEvent.getY();


        this.repaint();

        dwx = upx;
        dwy = upy;
    }

    private void pointerReleased(MotionEvent motionEvent)
    {
        upx = motionEvent.getX();
        upy = motionEvent.getY();

        this.repaint();
    }

    private void repaint()
    {
        this.canvas.drawLine(dwx, dwy, upx, upy, paint);
        this.invalidate();
    }
}

flo291288

12 février 2018 à 11:53:29

Bonjour,

Petite correction du source, pouvez vous me dire si je suis sur la bonne solution (elle fonctionne mais je la trouve un peu archaïque)...

Cordialement.

package fr.yanasoft.axipush;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.support.v7.widget.AppCompatImageView;

/**
 * Created by Florian on 08/02/2018.
 */

public class ImageViewPaint extends AppCompatImageView implements View.OnTouchListener {

    private Context context;
    private Paint paint;
    private Canvas canvas;

    float   dwx, dwy, upx, upy;

    public ImageViewPaint(Context context) {
        super(context);
        init(context);
    }

    public ImageViewPaint(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public ImageViewPaint(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        super.setImageBitmap(bm);

        float scale;
        float scaleX, scaleY;
        Matrix matrix = new Matrix();

        canvas.setBitmap(bm);

        scaleX =  (float) getWidth() / (float) bm.getWidth();
        scaleY = (float) getHeight() / (float) bm.getHeight();

        if(scaleX < scaleY) {
            scale = scaleX;
        }
        else {
            scale = scaleY;
        }

        float x = (((float)getWidth() - (float)bm.getWidth() * scale)) / 2.0f;
        float y = (((float)getHeight() - (float)bm.getHeight() * scale)) / 2.0f;

        matrix.set(getMatrix());
        matrix.preScale(scale, scale);
        matrix.postTranslate(x,y);
        matrix.invert(matrix);

        canvas.setMatrix(matrix);
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {

        int action = motionEvent.getAction();

        switch (action)
        {
            case MotionEvent.ACTION_DOWN:
            {
                pointerPressed(motionEvent);
                break;
            }
            case MotionEvent.ACTION_MOVE:
            {
                pointerDragged(motionEvent);
                break;
            }
            case MotionEvent.ACTION_UP:
            {
                pointerReleased(motionEvent);
                break;
            }
        }

        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

    }

    @Override
    public boolean performClick() {
        return super.performClick();
    }

    private void init(Context c) {

        context = c;
        paint = new Paint();
        canvas = new Canvas();

        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setFilterBitmap(true);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeWidth(10);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setColor(context.getColor(R.color.ax_green));

        this.setOnTouchListener(this);
    }

    private void pointerPressed(MotionEvent motionEvent)
    {
        dwx = motionEvent.getX();
        dwy = motionEvent.getY();
    }

    private void pointerDragged(MotionEvent motionEvent)
    {
        upx = motionEvent.getX();
        upy = motionEvent.getY();


        this.repaint();

        dwx = upx;
        dwy = upy;
    }

    private void pointerReleased(MotionEvent motionEvent)
    {
        upx = motionEvent.getX();
        upy = motionEvent.getY();

        this.repaint();
    }

    private void repaint()
    {
        this.canvas.drawLine(dwx, dwy, upx, upy, paint);
        this.invalidate();
    }
}

-
Edité par flo291288 12 février 2018 à 17:03:10