Traslazione di un'immagine e copia di essa su un'altra ImageView, basata sulle matrici (promemoria codice)

Torniamo allo scrolling delle immagini.
Questo è il codice che ho preso da uno dei miei progetti-laboratorio:

public class MainActivity extends Activity {

 float[] pts;
 RelativeLayout mainLayout;
 ImageView imageView;
 ImageView imgControllo;
 Bitmap bitmap;
 float X, Y;
 float currentX, currentY;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  mainLayout=(RelativeLayout)findViewById(R.id.mainLayout);
  
  
  final ImageView imageView=new ImageView(this);
  imageView.setScaleType(ScaleType.MATRIX);
  bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.verticalimagetest);
  LayoutParams params=new LayoutParams(300,300);
  imageView.setLayoutParams(params);
  imageView.setImageBitmap(bitmap);
  imageView.setBackgroundColor(Color.GREEN);
  mainLayout.addView(imageView);
 
  final ImageView imgControllo=new ImageView(this);
  imgControllo.setScaleType(ScaleType.FIT_CENTER);
  bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.verticalimagetest);
  LayoutParams params2=new LayoutParams(100,200);
  params2.leftMargin=500;
  params2.topMargin=100;
  imgControllo.setLayoutParams(params2);
  imgControllo.setBackgroundColor(Color.BLACK);
  mainLayout.addView(imgControllo);
  
  Button button=new Button(this);
  LayoutParams bttParams=new LayoutParams(150,50);
  bttParams.leftMargin=300;
  bttParams.topMargin=100;
  button.setLayoutParams(bttParams);
  button.setText("Crea");
  mainLayout.addView(button);
  button.setOnClickListener(new View.OnClickListener() {
   
   @Override
   public void onClick(View v) {
    
    imageView.destroyDrawingCache();
    imageView.buildDrawingCache();
    Bitmap bmp=imageView.getDrawingCache();
    imgControllo.setImageBitmap(bmp);
    
   }
  });
  
  OnTouchListener onTouchListener=new View.OnTouchListener() {
   Matrix matrice=new Matrix();
   Matrix inversa=new Matrix();
   
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    
    switch (event.getAction()){
    case MotionEvent.ACTION_DOWN:
     X=event.getX();
     Y=event.getY();
     break;
    case MotionEvent.ACTION_MOVE:
     currentX=event.getX();
     currentY=event.getY();
     pts=new float[]{0,0};
     imageView.getImageMatrix().invert(inversa);
     inversa.mapPoints(pts);
     matrice.setTranslate(-pts[0]+currentX-X, -pts[1]+currentY-Y);
     imageView.setImageMatrix(matrice);
     X=currentX;
     Y=currentY;
     imageView.destroyDrawingCache();
     imageView.buildDrawingCache();
     Bitmap bmp=imageView.getDrawingCache();
     imgControllo.setImageBitmap(bmp);
     
     break;
    }
    return true;
   }
   
  };
  imageView.setOnTouchListener(onTouchListener);
  
 }

}

Questo è basato sulle matrici, ossia la traslazione di un'immagine avviene per mezzo di una Matrix.
Ma si può fare anche in modo diverso...

Drag Drop con una chiave che apre e chiude un lucchetto.

Qual è il modo migliore di rappresentare un'apertura con due "serrature" che usano il meccanismo del Drag Drop?

Da una parte metterei un lucchetto e dall'altra parte una chiave.
Trascino la chiave sul lucchetto, che risulta aperto.
Quindi trascino di nuovo la chiave sul lucchetto aperto e ridiventa chiuso.
Si potrebbe provare...

Costruiamola adesso...

Per prima cosa, devo trovare le chiavi e i lucchetti, e metterli come risorse.
Ne ho trovati due, aperto e chiuso, del medesimo modello e non protetti da copyright.
Adesso li metto in risorse, dopo averli rinominati "lucchiuso" e "lucaperto" perché i nomi dei files erano complessi e poco memorizzabili.

Ora devo trovare una chiaFave.
Seguo lo stesso procedimento di prima (importante l'assenza di copyright perché li voglio inserire in un'App pubblicabile).

Trovata! Essendo un file jpg la converto in png perché mi pare di ricordare che in Android vengono meglio trattate le png, anche se non ne sono sicuro...

La inserisco nelle risorse.

---

Ora scrivo il codice che ha questo scopo: trascinando la chiave sopra il lucchetto chiuso, questo si trasforma in un lucchetto aperto, e viceversa.
Iniziamo...

Fatto! Mi sembra una soluzione decente:

public class MainActivity extends Activity {
 
 ImageView imgChiave, imgLucchetto;
 boolean settingMode=false;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  //INIZIALIZZAZIONI
  imgChiave=(ImageView)findViewById(R.id.imageView1);
  imgChiave.setImageResource(R.drawable.chiave);
  imgLucchetto=(ImageView)findViewById(R.id.imageView2);
  imgLucchetto.setImageResource(R.drawable.lucchiuso);
  
  //LISTENERS
  
  View.OnTouchListener onTouchListener=new View.OnTouchListener() {
   
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    DragShadowBuilder shadowBuilder=new DragShadowBuilder(v);
    v.startDrag(null, shadowBuilder, v, 0);
    return true;
   }
  };
  
  View.OnDragListener onDragListener=new View.OnDragListener() {
   
   @Override
   public boolean onDrag(View v, DragEvent event) {
    if(event.getAction()==DragEvent.ACTION_DROP){
     if(settingMode==false){
      ((ImageView)v).setImageResource(R.drawable.lucaperto);
      settingMode=true;
     }else{
      ((ImageView)v).setImageResource(R.drawable.lucchiuso);
      settingMode=false;
     }
    }
    return true;
   }
  };
  
  imgChiave.setOnTouchListener(onTouchListener);
  imgLucchetto.setOnDragListener(onDragListener);
}

Drag-Drop in android.

Ho iniziato ad aggredire il Drag-Drop.
Riscrivo il codice per mio esercizio...

public class MainActivity extends Activity {
 
 OnTouchListener onTouchListener;
 OnDragListener onDragListener;
 TextView testo;
 Button bottone;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  testo=(TextView)findViewById(R.id.textView1);
  bottone=(Button)findViewById(R.id.button1);
  
  onTouchListener = new View.OnTouchListener() {
   
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    DragShadowBuilder shadowBuilder=new DragShadowBuilder(v);
    v.startDrag(null, shadowBuilder, v, 0);
    return false;
   }
  };
  
  testo.setOnTouchListener(onTouchListener);
  
 }

}

Ho derogato dal tutorial in quanto non ho usato nessuna variabile di tipo ClipData, e ho impostato null nel primo parametro di StartDrag.
Me l'ha accettato lo stesso, senza segnalarmi errori di sintassi.
Per il momento la variabile di tipo OnDragListener resta inutilizzata così come la variabile oggetto bottone: voglio solo testare se funziona il trascinamento.

Sì, funziona!
E' stata creata l' "ombra" della TextView che reca la scritta "Hello World".

---

Ora scrivo il codice che riceve il trascinamento sul Button, utilizzando le variabili dichiarate prima:

public class MainActivity extends Activity {
 
 OnTouchListener onTouchListener;
 OnDragListener onDragListener;
 TextView testo;
 Button bottone;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  testo=(TextView)findViewById(R.id.textView1);
  bottone=(Button)findViewById(R.id.button1);
  
  onTouchListener = new View.OnTouchListener() {
   
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    DragShadowBuilder shadowBuilder=new DragShadowBuilder(v);
    v.startDrag(null, shadowBuilder, v, 0);
    return false;
   }
  };
  
  onDragListener = new View.OnDragListener() {
   
   @Override
   public boolean onDrag(View v, DragEvent event) {
    if(event.getAction()==DragEvent.ACTION_DRAG_ENTERED){
     Log.d("DRAGAGGIO","RICEVUTO");
    }
    return false;
   }
  };
  
  testo.setOnTouchListener(onTouchListener);
  bottone.setOnDragListener(onDragListener);
  
  
 }
 


}

E vediamo se al trascinamento della TextView sul primo Button viene scritto il messaggio in LogCat:

No: non funziona.
Proviamo a impostare a true onDrag():

  onDragListener = new View.OnDragListener() {
   
   @Override
   public boolean onDrag(View v, DragEvent event) {
    if(event.getAction()==DragEvent.ACTION_DRAG_ENTERED){
     Log.d("DRAGAGGIO","RICEVUTO");
    }
    return true;
   }
  };

e funziona:

04-12 23:46:55.145: D/DRAGAGGIO(3448): RICEVUTO

Devo ancora capire bene come "funzioni" il valore booleano di certe funzioni.

Ripasso e modifica del codice per il DragDrop di un DIV in JavaScript.

E se riprendessi a postare qui i miei progressi? Questo enorme blocco di appunti mi è prezioso...

---

E infatti vi ho ritrovato il codice per realizzare il drag-drop.

Facciamolo con la sintassi buona per Firefox.

Prendo un DIV e lo rendo quadrato, colorandolo in modo diverso dallo sfondo.

<html>
<head>

<style>
#oggetto{
 background-color:green;
 height:100px;
 width:100px;
}
</style>


<script>

</script>

<body>
<div id="oggetto"></div>

</body>
</html> 

Ecco il risultato:

Bene.
Ora rendo la posizione assoluta...

<html>
<head>

<style>
#oggetto{
 position:absolute;
 background-color:green;
 height:100px;
 width:100px;
}
</style>


<script>

</script>

<body>
<div id="oggetto"></div>

</body>
</html>

E adesso ottengo la posizione, salvandola in variabili.
Iniziamo con il solo asse delle X.

Per prima cosa, definisco una variabile che contiene l'oggetto bersaglio degli eventi, quindi creo le routines degli eventi.

<script>
var dragElement;

function OnMouseDown(event){
 alert(event.target.style.left);
}


document.onmousedown=OnMouseDown;


</script> 

La casella di dialogo non mi restituisce assolutamente nulla.
Forse devo estrarne il numero mediante la funzione ExtractNumber. Come la creo?
Ma un momento... ricordo che le impostazioni di posizione date tramite il CSS non appaiono quando rilevate tramite il JavaScript...

---

---

Ecco: ho ricostruito il programma, con qualche ritocco, ossia la capacità di leggere in JavaScript le impostazioni fornite con il CSS mediante ComputedStyle.

<html>
<head>

<style>
#oggetto{
 position:absolute;
 left:100px;
 background-color:green;
 height:100px;
 width:100px;
}
</style>
<script>
var dragElement;
var OffsetX;
var OffsetY;
var StartX;
var StartY;

function Sinistra(oggetto){
 var risultato=parseInt(getComputedStyle(oggetto).left); 
 return isNaN(risultato)==true? null: risultato;
}

function Alto(oggetto){
 var risultato=parseInt(getComputedStyle(oggetto).top); 
 return isNaN(risultato)==true? null: risultato;
}
function OnMouseDown(e){
 dragElement=e.target;
 OffsetX=Sinistra(dragElement);
 OffsetY=Alto(dragElement);
 StartX=e.clientX;
 StartY=e.clientY;
 document.onmousemove=OnMouseMove; 
}

function OnMouseMove(e){
 dragElement.style.left=OffsetX+e.clientX-StartX;
 dragElement.style.top=OffsetY+e.clientY-StartY;
}

function OnMouseUp(){
 document.onmousemove=null;
}
document.onmousedown=OnMouseDown;
document.onmouseup=OnMouseUp;

</script>

<body>
<div id="oggetto"></div>

</body>
</html>

E funziona!!! Incollando su Blocco Note questo codice, e salvando con un'estensione .HTML, col browser Firefox, funziona! Con Internet Explorer sicuramente non funziona, mentre con altri non lo so.