使用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 中与玩家相关的一个圆圈）

我错过了什么吗？

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

小提琴：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 设置在 Container 上而不是船上来将其定位为上/左方向。