JavascriptProva

sabato 17 settembre 2016

Esercizi di scrittura di codice per un'immagine scrollabile su view.

Esercizio:
Scrivere il codice di un'immagine scrollabile nell'ambito di una View.
public class Immagine extends View {
    Context context;
    Drawable mImage;
    float lastX,lastY,posX,posY;
    public Immagine(Context context) {
        super(context);
        this.context=context;
        mImage=getResources().getDrawable(R.drawable.bona);
        mImage.setBounds(0,0,200,200);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event){

        switch(event.getAction()){
            case MotionEvent.ACTION_DOWN:
                lastX=event.getX();
                lastY=event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                posX+=event.getX()-lastX;
                posY+=event.getY()-lastY;
                invalidate();
                lastX=event.getX();
                lastY=event.getY();
                break;

        }
        return true;
    }

    @Override
    public void onDraw(Canvas canvas){
        super.onDraw(canvas);
        canvas.save();
        canvas.translate(posX,posY);
        mImage.draw(canvas);
        canvas.restore();
    }
}
Ho dimenticato di sottrarre a getX e getY dell'evento Move il valore di lastX e lastY, ossia delle coordinate dell'ultima posizione.

o Ripetere l'esercizio.
Voglio provare a lasciare il codice solo alla creazione dell'immagine, per vedere cosa ottengo. Secondo me la mancanza dell'evento onDraw dovrebbe lasciarmi la view vuota:
public class Immagine extends View {

    Context context;
    Drawable mImage;
    public Immagine(Context context) {
        super(context);
        this.context=context;
        mImage=getResources().getDrawable(R.drawable.bona);
        mImage.setBounds(0,0,300,300);
    }
    
}
Sì, è così!

Ora aggiungo onDraw senza il codice per il movimento:
public class Immagine extends View {

    Context context;
    Drawable mImage;
    public Immagine(Context context) {
        super(context);
        this.context=context;
        mImage=getResources().getDrawable(R.drawable.bona);
        mImage.setBounds(0,0,300,300);
    }
    
    @Override
    public void onDraw(Canvas canvas){
        super.onDraw(canvas);
        canvas.save();
        mImage.draw(canvas);
        canvas.restore();
    }

}
Ecco, con questo codice l'immagine appare.
Però, ovviamente, non si sposta.

Ora riscrivo il codice completo.
public class Immagine extends View {

    Context context;
    Drawable mImage;
    float lastX,lastY,posX,posY;
    public Immagine(Context context) {
        super(context);
        this.context=context;
        mImage=getResources().getDrawable(R.drawable.bona);
        mImage.setBounds(0,0,300,300);
    }


    @Override
    public boolean onTouchEvent(MotionEvent event){
        switch(event.getAction()){
            case MotionEvent.ACTION_DOWN:
                lastX=event.getX();
                lastY=event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                posX+=event.getX()-lastX;
                posY+=event.getY()-lastY;
                invalidate();
                lastX=event.getX();
                lastY=event.getY();
        }
        return true;
    }

    @Override
    public void onDraw(Canvas canvas){
        super.onDraw(canvas);
        canvas.save();
        canvas.translate(posX,posY);
        mImage.draw(canvas);
        canvas.restore();
    }
}
Ho dimenticato di aggiungere il metodo translate del canvas, subito ricordato e corretto.

Nessun commento:

Posta un commento