Easeljs drehen Objekt mousemove- mit

Question

Ich arbeite in HTML5-Canvas + Easeljs

Ich mag würde Objekte in meiner Anwendung mit meiner Maus drehen. Idee ist die folgende: Klicken Sie auf ein Objekt> Kreis erscheint mit ziehbarer Box> ziehen Sie diese Box über den Kreis, macht das Objekt rotieren.

Es ist ein bisschen die gleiche Frage wie this one, aber ich habe keine Ahnung, wie dies in Easeljs zu tun.

Zur Veranschaulichung

Jetzt können Sie Objekte drehen, indem Sie die Schaltflächen oben rechts anklicken (L = links, R = rechts), aber ich möchte es wie hier sein:

Click + ziehen auf weißem Feld wird es machen drehen

Hilfe wird sehr geschätzt!

Answer 1

Sie müssen Listener für die Bühne (oder in Ihrem Fall vielleicht das Spielfeld Shape) für die mousedown, mousemove und mouseup hinzufügen. In this example höre ich nur die globalen stagemouseup, stagemousedown und stagemousemove Ereignisse. Ich weise den Listener stagemousemove nicht zu, bis die stagemousedown ausgelöst wird. Ich entferne es dann, wenn der stagemouseup ausgelöst wird.

Für jedes Ereignis stagemousemove müssen Sie den Winkel zwischen Ihrem Player und der Bühne Mausposition finden. Sie können diese wird die folgende Formel tun, wo shape Ihr Spieler ist:

var angleInRadians = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x); 
var angleInDegrees = angleInRadians * (180/Math.PI); 

Dann setzen Sie einfach die shape.rotation = angleInDegrees.

Check out this working example.