Поворот изображения вокруг него это центр с помощью easeljs/холст/JavaScript в то время как изображение остается на стартовой позиции

Question

я нашел много вопросов/ответов по этому вопросу, но ни с помощью easeljs и JavaScript

Так что я хочу, не повернуть изображение по центру, а не по 0,0 координатам его. Я действительно справлялся с этим с regX и regY (http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#property_regX), но тогда изображение заводится неуместно (немного слева от того, где оно должно быть).

Таким образом, мое изображение превращается в то, что я хочу, но немного неуместно, что неправильно. Изображение должно оставаться на месте, просто поверните себя и все.

Любые идеи/предложения приветствуются.

Если бы я был неясен, запросите дополнительную информацию, пожалуйста.

добавить игрока файл, как это:

player = new createjs.Bitmap("../images/player.png"); 

player.x = X; 
player.y = Y; 

stage.addChild(player); 

, где X и Y некоторые координаты на холсте. Если я пытаюсь повернуть это изображение на нажатия клавиши с этой линией, например:

player.rotation = 90; 

это переворачивает изображение на 90 градусов вправо. Таким образом, он смотрит прямо сейчас, что правильно, и он находится на том же месте, что и раньше. НО, если я пытаюсь сделать его лицом влево (с -90), что происходит, видно на фотографии ниже:

Игрок начал, как показано на первом изображении. Когда он поворачивает его на -90 градусов, он поднимается на одну полосу движения (рисунок 2).

Так я узнал о regX и regY (ссылка выше), и использовать их как это:

player.regX = playerSize/2; 
player.regY = playerSize/2; 

где playerSize является размер изображения в пикселях. Выполняет задачу правильного поворота игрока на месте, но что-то еще не получается - позиция игрока. Это изображение исходного положения, когда regX/regY используются:

Как вы можете видеть, есть некоторое пространство между игроком и «стены» на дне. Игрок должен располагаться на одном месте вниз и вправо (как круг по отношению к игроку на картинке 2)

Я что-то упустил?

Это изображение я использую (его беловатые из темного фона в моей игре):

скрипку: http://jsfiddle.net/PsychicSaw/MLSnK/24/ раскомментировать строки с regX и regY и посмотреть, что происходит.

Спасибо

Answer 1

Использования прилагаемой скрипки, я обновил код на следующее, чтобы установить прыжки вокруг на вращении. Вы можете видеть, что он работает на обновленном fiddle.

var ship; 
var canvas; 
var stage; 
var direction = "up"; 
var shipHolder; 

// add keyboard listener. 
window.addEventListener('keydown', whatKey, true); 
// create a new stage and point it at our canvas: 
canvas = document.getElementById("mycanvas"); 
stage = new createjs.Stage(canvas); 

createPlayer(); 

createjs.Ticker.addEventListener("tick", tick); 
createjs.Ticker.setFPS(20); 


function createPlayer(){ 
    var img = new Image(); 
    img.src = "http://i.stack.imgur.com/PXszc.png"; 

    var shipSize = 20; // 20x20 px is the image 
    ship = new createjs.Bitmap(img); 

    shipContainer = new createjs.Container(); 
    shipContainer.addChild(ship); 

    // he starts at the bottom center of the canvas 
    shipContainer.x = canvas.width/2; 
    shipContainer.y = canvas.height - shipSize; 

    // uncomment to see ship position then 
    ship.regX = 10; 
    ship.regY = 10; 
    ship.x = 10; 
    ship.y = 10; 

    stage.addChild(shipContainer);  
} 

function manageDirection(){ 
    if(direction == "left"){ 
     ship.rotation = -90; 
    } 
    else if(direction == "right"){ 
     ship.rotation = 90; 
    } 
    else if(direction == "up"){ 
     ship.rotation = 0; 
    } 
    else if(direction == "down"){ 
     ship.rotation = 180; 
    } 
}  

function tick(event){ 
    // draw the updates to stage: 
    manageDirection(); 
    stage.update(event);  
}  

function whatKey(event) { 
    switch (event.keyCode) { 
     // left arrow 
     case 37: 
      direction = "left"; 
      break; 
      // right arrow 
     case 39: 
      direction = "right"; 
      break; 
      // down arrow 
     case 40: 
      direction = "down"; 
      break; 
      // up arrow 
     case 38: 
      direction = "up"; 
      break; 
    } 
} 

Уведомление о том, что судно было размещено по адресу x: 10 y: 10 для учета точки регистрации смещения. Кроме того, добавив его в Container, мы можем повернуть корабль в центральной точке регистрации и поместить его в верхнюю/левую ориентацию, установив x/y на контейнере вместо корабля.