Coordinate immagine (Drag and Drop)

**azzurras18** · 11-09-2017, 12:28

Buongiorno

, spero che qualcuno possa aiutarmi.
Ho una pagina in cui faccio drag and drop di un'immagine su un'altra immagine (non draggable), il problema ï¿½ che volevo salvare il tutto, in modo che quando riaccedevo ritrovavo giï¿½ l'immagine che avevo spostato esattamente nel punto in cui l'avevo messa. Dunque ho pensato di trovarmi le coordinate dell'immagine, da passare poi al database, cosï¿½ quando riaccedo riprendo i valori dal database.
Ma come faccio a trovarmi le coordinate dell'immagine? Avevo trovato il metodo offset(), ma usandolo come ho fatto mi ritorna 0, dunque credo di doverlo impostare in modo che mi dia le coordinate rispetto a qualche riferimento. Riporto il codice (scusatemi, ma programmo da poco )
Grazie in anticipo

codice:

<body>
<div id="container">

</div>
<script>
    //Per le immagini draggable ho usato la libreria Konva

var width = window.innerWidth;
var height = window.innerHeight;
    
    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });
	
	
    var layer = new Konva.Layer();
    stage.add(layer);


	
	var darthVaderImg = new Konva.Image({   //immagine no draggable 
        draggable: false
    });
    layer.add(darthVaderImg);
	 
	var imageObj1 = new Image();
    imageObj1.onload = function() {
        darthVaderImg.image(imageObj1);
        layer.draw(); 
    };
	
    imageObj1.src = 'lightbox/images/6.jpg';


	
var yodaImg = new Konva.Image({    // immagine  draggable
			width: 50,
			height: 70,
			draggable: true,
        });
		layer.add(yodaImg); 
   
		var imageObj2 = new Image();
		imageObj2.onload = function() {
			yodaImg.image(imageObj2);
			layer.draw();
			};


		imageObj2.src = 'lightbox/images/lampada.png';


	layer.on('click', function(evt) {
        var shape = evt.target;
        document.body.style.cursor = 'pointer';
        shape.strokeEnabled(false);
        layer.draw();
	
        var offset = $(imageObj2).offset();
	alert(offset.top + offset.left );
    });	
	
	
</script>
</body>
</html>

**lucavizzi** · 11-09-2017, 14:59

Con offset top e left ricavi la posizione di un elemento del DOM in relazione al suo parent.
Nel tuo caso l'immagine non entra affatto a far parte del DOM ma viene disegnata all'interno di un canvas, quindi offset non può esserti di nessun aiuto.

https://konvajs.github.io/api/Konva.Layer.html
La libreria Konva sembra mettere a disposizione le proprietà offsetX e offsetY per l'oggetto Layer ma, non avendola mai usata, non saprei indirizzarti meglio.

Discussione: Coordinate immagine (Drag and Drop)

Strumenti discussione

Ricerca discussione

Visualizza

Coordinate immagine (Drag and Drop)

Permessi di invio