Ein Objekt um ein anderes rotieren In createJS/staffelJS

Question

Was ist in elastelJS der beste Weg, ein Objekt um ein anderes zu drehen? Was ich versuche ist ein Verfahren zu erreichen, das Fadenkreuz um den Kreis zu drehen unten dargestellt, wie ein Planet umkreist die Sonne:

Ich habe in der Lage Objekte um ihren eigenen Mittelpunkt dreht , aber es fällt mir schwer, einen Weg zu finden, um ein Objekt um den Mittelpunkt eines zweiten Objekts zu drehen. Irgendwelche Ideen?

Answer 1

Es könnte sinnvoll sein, Inhalt in einen Container zu packen. Übersetzen Sie die Koordinaten so, dass der Mittelpunkt an der gewünschten Position liegt, und drehen Sie dann den Container.

Answer 2

Um darauf aufzubauen, was Lanny vorschlägt, kann es Fälle geben, in denen Sie den gesamten Container nicht drehen möchten. Eine Alternative wäre, trigonometrische Funktionen und einen Inkrementierungswinkel zu verwenden, um die x/y-Position des Fadenkreuzes zu berechnen. Sie können x/y mit einem Winkel (in Radianten) und Math.cos(angleInRadians) für x und Math.sin(angleInRadians) für y, multiplizieren mit dem Radius der Umlaufbahn finden.

Siehe working example als Referenz.

Hier ist ein komplettes Snippet.

var stage = new createjs.Stage("stage"); 
var angle = 0; 

var circle = new createjs.Shape(); 
circle.graphics.beginFill("#FF0000").drawEllipse(-25, -25, 50, 50).endFill(); 
circle.x = 100; 
circle.y = 100; 

var crosshair = new createjs.Shape(); 
crosshair.graphics.setStrokeStyle(2).beginStroke("#FF0000").moveTo(5, 0).lineTo(5, 10).moveTo(0, 5).lineTo(10, 5).endStroke(); 

stage.addChild(circle); 
stage.addChild(crosshair); 

createjs.Ticker.addEventListener("tick", function(){ 

    angle++; 
    if(angle > 360) 
    angle = 1; 

    var rads = angle * Math.PI/180; 
    var x = 100 * Math.cos(rads); 
    var y = 100 * Math.sin(rads); 
    crosshair.x = x + 100; 
    crosshair.y = y + 100; 

    stage.update(); 
});