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

时间:2015-10-16 19:00:34

标签: javascript rotation html5-canvas createjs tween.js

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

我的小提琴http://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();
}

1 个答案:

答案 0 :(得分:2)

您可以使用regXregY更改显示对象的注册(0,0)点。您必须按比例调整x / y值。

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