Вращение дуги вокруг центра в EaselJS

У меня есть дуга, созданная следующим образом:

Var arc = new createjs.Shape();
arc.graphics.beginStroke('#6d6e71')
                .setStrokeStyle(16)
                .arc(CONSTANTS.WIDTH/2, CONSTANTS.HEIGHT/2, 250, 0 + doorPosition, Math.PI/5 + doorPosition);

И я хочу повернуть его вокруг центра, как если бы остальная часть дуги была завершена. Кажется, что он вращается вокруг точки 0,0, если круг содержится в прямоугольнике при использовании setTransform:

arc.setTransform(0, 0, 1, 1, angle);

Любая помощь будет оценена по достоинству.


javascript easeljs
person Tarrence    schedule 12.11.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вращение вокруг точки (0,0), потому что даже если ваша дуга нарисована в (CONSTANTS.WIDTH/2, CONSTANTS.HEIGHT/2), положение вашей фигуры все еще (0,0). Вместо этого поместите свою фигуру перед:

var arc = new createjs.Shape();
arc.x = CONSTANTS.WIDTH/2;
arc.y = CONSTANTS.HEIGHT/2;
arc.graphics.beginStroke('#6d6e71')
            .setStrokeStyle(16)
            .arc(0,0, 250, 0 + doorPosition, Math.PI/5  + doorPosition);

И если вы просто хотите повернуть свою дугу, вы можете просто изменить свойство «rotation» вместо использования «setTransform»:

arc.rotation = angle;

Вот пример: http://jsfiddle.net/JTqvJ/40/, надеюсь, это поможет.

person Mister D.    schedule 12.11.2013