使用easeljs / canvas / 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中的玩家相关的圆圈）

我错过了什么吗？

这是我正在使用的图像（由于我游戏中的黑暗背景，它的白色）：

FIDDLE：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，我们可以在中心定位点上旋转船只，并通过在Container而不是船上设置x / y来定位它的顶部/左侧方向。 / p>