如何使用 createjs 围绕一个点旋转时钟指针

Question

我有一个要旋转的时钟指针。现在它围绕图像的 0,0 点旋转整个图像。我将如何围绕时钟指针上的点旋转？你能选择它应该旋转的注册点吗？

我的fiddlehttp://jsfiddle.net/yhx94cuf/23/

    var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);
var image = new Image();
var image2 = new Image();
image.src = "http://paulrhayes.com/experiments/clock/images/minuteHand.png"
image2.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Analogue_clock_face.svg/1024px-Analogue_clock_face.svg.png"
image.onload = Clock;

function Clock() {
    clockContainer = new createjs.Container();
    clockBack = new createjs.Bitmap(image2)
    clockHand = new createjs.Bitmap(image)
    clockBack.x = 40;
    clockBack.y = 180;
    clockHand.x = -30;
    clockHand.y = 100;
    clockHand.scaleX = clockHand.scaleY = 1.20;
    clockHand.scaleX = clockHand.scaleY = 1.20;
    clockBack.scaleX = clockBack.scaleY = 0.30;
    clockBack.scaleX = clockBack.scaleY = 0.30;

    clockContainer.addChild(clockBack, clockHand);
    stage.addChild(clockContainer)
    createjs.Tween.get(clockHand, { loop: false }).to({ rotation: 360 }, 5000);
}

function tick(event) {
    stage.update();
}

Answer 1

您可以使用regX和regY来更改显示对象的注册(0,0)点。您必须相应地调整 x/y 值。

http://jsfiddle.net/yhx94cuf/24/

如何使用 createjs 围绕一个点旋转时钟指针

How to rotate a clock hand around a point with createjs

javascript

rotation

html5-canvas

createjs

tween.js