Вращающееся колесо с холстом HTML 5

Я пытаюсь заставить эти 2 изображения png просто вращаться на моем холсте. Изображения больше, чем холст, потому что я хочу показать только определенные участки колеса, когда оно вращается в холсте. Я отлично получил png на холсте, они круглые и выровнены по низу и по центру, так что он показывает только эту часть колеса. Я использую createjs в своем коде с easl и tween. По какой-то причине, когда я поворачиваю свое изображение, оно делает это из какой-то случайной точки регистрации. Есть ли способ заставить это изображение вращаться вокруг своего собственного центра, который находится вне области холста?

var CANVAS;
var STAGE;
var CTX;

var imageCount = 0;

var img1Obj = new Image();
var img2Obj = new Image();
var img3Obj = new Image();

var img1;
var img2;
var img3;

var box;

function init(){

    CANVAS  = document.getElementById("spinWheel");
    STAGE   = new createjs.Stage(CANVAS);
    CTX     = CANVAS.getContext('2d');  

    img1Obj.src = "img/iphone_wheel_outer.png";
    img2Obj.src = "img/iphone_wheel_middle.png";
    img3Obj.src = "img/iphone_wheel_inner.png";

    img1Obj.name = "img1";
    img2Obj.name = "img2";
    img3Obj.name = "img3";

    img1Obj.onload = loadImages;
    img2Obj.onload = loadImages;
    img3Obj.onload = loadImages;

    createjs.Ticker.setFPS(30);
    createjs.Ticker.addListener(STAGE);

}


function loadImages(e)
{
    if(e.target.name == 'img1'){img1 = new createjs.Bitmap(img1Obj); }
    if(e.target.name == 'img2'){img2 = new createjs.Bitmap(img2Obj); }
    if(e.target.name == 'img3'){img3 = new createjs.Bitmap(img3Obj); }

    imageCount++;

    /* Display graphics until all of them are loaded */

    if(imageCount == 3)
    {
        buildInterface();
    }
}

function buildInterface(){


    img1.x = -370;
    img2.x = -370;
    img3.x = -370;

    img1.y = 235;
    img2.y = 235;
    img3.y = 235;

    createjs.Tween.get(img1,{loop:true})
            .to({rotation : 360}, 2000);


    STAGE.addChild(img1, img2, img3, box);

}

$(document).ready(function() {
    init();
});

canvas html html5-canvas createjs
person Carlos R. Batista    schedule 27.09.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я наконец-то понял.

Ответы здесь, говорящие мне повернуть контекст, не являются неправильными, они просто не работают, если я использую createjs.Bitmap для создания изображений на холсте. Однако на самом деле это намного проще с использованием библиотек createjs. Все, что мне нужно сделать, это:

img1.regX   = img1.image.width/2|0;
img1.regY   = img1.image.height/2|0;

На самом деле это напрямую нацелено на точку регистрации растрового изображения, мне не нужно манипулировать контекстом, поскольку объект createjs.Bitmap позаботится об этом внутри меня.

Спасибо за помощь в любом случае!

person Carlos R. Batista    schedule 28.09.2012

arrow_upward
0
arrow_downward

Чтобы повернуть на холсте, вы должны сделать следующее:

context.translate(cx, cy);
context.rotate   (radians);

Но я не уверен, что это сработает с объектом createjs.Bitmap, надо попробовать. Перевод заставит точку вращаться вокруг.

может попробовать:

img1.translate((.5*img1.width),(.5*img1.height));

img1.height должен работать, чтобы это работало.

person nycynik    schedule 27.09.2012
comment
ya translate не будет работать с createjs.Bitmap, поскольку вся обработка контекста происходит внутри. - person Carlos R. Batista; 29.09.2012

arrow_upward
-2
arrow_downward

Я не видел приведенный выше css, но проблема, вероятно, в свойстве transform-origin.

Ссылка для получения дополнительной информации: http://www.w3schools.com/cssref/css3_pr_transform-origin.asp

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
person nycynik    schedule 27.09.2012
comment
Никакого css нет, все генерируется через canvas :( - person Carlos R. Batista; 27.09.2012