kineticjs drag and drop Bild von dom in canvas

Question

Ich habe bereits ein Bild auf das Dom geladen, und ich möchte in der Lage sein, das Bild in eine Leinwand zu ziehen und es in die Leinwand zu legen und ein kineticjs Objekt daraus zu erstellen.

Ich weiß nicht, wie man das Bild ziehbar macht, und ich weiß nicht, wie man die Leinwand auf Drag & Drop-Ereignisse, die bereits auf dem Dom vorhanden sind, reagieren lässt. Kann mir jemand zeigen, wie man das macht?

Die meisten Tutorials zeigen, wie Drag & Drop aus der Zeichenfläche oder dem Dateisystem, ich suche, wie aus dem DOM auf die Leinwand ziehen.

Hintergrundinfo: Ich möchte ein Menüsystem oder eine Reihe von Miniaturansichten haben, die ein Benutzer in die Zeichenfläche ziehen und dort ablegen kann, um das Foto zu erweitern.

Vielen Dank im Voraus!

Answer 1

Kein Problem!

1 Sie müssen "Drag & Drop" von HTML5 verwenden. Tutorial: http://www.html5rocks.com/en/tutorials/dnd/basics/

2 Setup dom Veranstaltung Bild:

var dragSrcEl = null; 
//image 
document.getElementById("yoda").addEventListener('dragstart',function(e){ 
     dragSrcEl = this; 
}); 

3 Veranstaltungen für Containerobjekt:

var con = stage.getContainer();   
con.addEventListener('dragover',function(e){ 
    e.preventDefault(); // !!important 
}); 
//insert image to stage 
con.addEventListener('drop',function(e){ 
    var image = new Kinetic.Image({ 
     draggable : true 
    }); 
    layer.add(image); 
    imageObj = new Image(); 
    imageObj.src = dragSrcEl.src; 
    imageObj.onload = function(){ 
     image.setImage(imageObj) 
     layer.draw() 
    }; 
}); 

Und natürlich voll Beispiel: http://jsfiddle.net/lavrton/n4w44/