javascript - 使用 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 是 Canvas 上的一些坐标。例如，如果我尝试使用此行在按键时旋转此图像:

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 ，我已将代码更新为以下内容以修复旋转时的跳跃。您可以看到它在更新的 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 而不是船。