Вращение одного объекта вокруг другого В createJS/easelJS

В easelJS, что является лучшим способом повернуть объект вокруг другого? То, что я пытаюсь выполнить это метод, чтобы повернуть перекрестие вокруг круга, изображенный ниже, так же, как планеты вокруг Солнца:Вращение одного объекта вокруг другого В createJS/easelJS

Я был в состоянии вращать объекты вокруг своей собственной центральной точки , но мне трудно найти способ поворота одного объекта вокруг центральной точки второго объекта. Есть идеи?

источник

2016-08-08 flemingslone

Не можете ли вы просто переместить перекрестие по траектории круга с помощью параметрического уравнения круга? – ampawd

@ampawd благодарит за это предложение, что параметрическое уравнение было именно тем, что мне нужно. Однако, когда я начинаю вращение с углом 1 градуса в уравнении, моя точка сначала перемещается в точку прямо справа от начала, вокруг которой она вращается. Однако, чтобы переместить точку из произвольной начальной точки, я правильно понял, что сначала мне нужно определить угол, образованный началом, который указывает вправо, и моя произвольная точка? Будет ли закон косинусов быть способом этого? Я могу представить иллюстрацию моего вопроса, если это не достаточно ясное объяснение. – flemingslone

Если вы знаете координаты перекрестия, просто переместите его по траектории круга, используя следующую формулу: 'x = distance * Math.cos (angle) + cricle.center.x, y = distance * Math.sin (angle) + circle.center. y', где «расстояние» - это расстояние между перекрестием и кругом – ampawd

Может иметь смысл обернуть содержимое контейнера. Переведите координаты так, чтобы точка центра находилась там, где вы хотите, а затем вращайте контейнер.

источник

2016-08-08 17:06:58 Lanny

Когда вы говорите, что вы переводите координаты, вы имеете в виду, что центральная точка является центром контейнера? Это отличная идея, хотя, я посмотрю, смогу ли я это обработать. Вы были отличным ресурсом для всех моих вопросов в области мольберта, спасибо человеку! – flemingslone

Да, например, если вы хотите, чтобы точка центра находилась на уровне 100x100, вы можете легко разместить содержимое в контейнере, установить контейнер regX/regY в эту точку, а затем смещать свой контент на 100x100, чтобы он заметно находился там же. Рад был помочь :) – Lanny

Чтобы опираться на то, что предлагает Лэнни, могут быть случаи, когда вы не хотите вращать весь контейнер. Альтернативой может быть использование тригонометрических функций и возрастающий угол для вычисления положения x/y перекрестия. Вы можете найти x/y, используя угол (преобразованный в радианы) и Math.cos(angleInRadians) для x и Math.sin(angleInRadians) для y, умноженный на радиус орбиты.

См. Это working example для справки.

Вот полный фрагмент.

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(); 
});

источник

2016-08-09 16:17:46 Andrew

Вращение одного объекта вокруг другого В createJS/easelJS

ответ

Смежные вопросы