Question

我的页面上有一个Crafty实例，320x480。我试图为一个小游戏开发一个菜单。在菜单场景的背景中，我想要一个旋转的风车式效果。

现在，轮换并不是一个大问题，我已经在游戏中有了无休止的事情。但我不能因为我的生活将风车置于画布中间。

Crafty.defineScene("menu", function() {
Crafty.background("#000");

var bg = Crafty.e("2D, Canvas, Image, Tween")
    .image("img/pinwheel.jpg")
    .attr({x: 0, y: 0})
    .origin('center')
    .bind("Click", function(e) {
        Crafty.enterScene("game");
});

}）;

这是我在这里的代码。我还没有将补间放在旋转中。

我尝试将其作为DOM元素而不是Canvas尝试使用CSS来移动它，但Crafty似乎覆盖了这个CSS。

有问题的图像是2000 x 2000.我可以将其大小调整为320 x 480，但是当它旋转时会出现边缘。因此，图片必须是方形的，并且当旋转45度时也足够大以覆盖画布。但我无法弄清楚如何让图像的中心与画布的中心对齐！

Answer 1

首先，将您的图片调整为与您希望在应用程序中显示的尺寸相同的尺寸确保在png文件中使用透明/不存在的背景图层进行保存。

然后你可以继续使用视口的宽度和高度使图像居中（它们被明确指定为Crafty.init的参数或隐式设置为窗口的边界Crafty.DOM.window.width＆amp; {{1} }）：

Crafty.DOM.window.height

请查看以下代码段以查看正在执行的旋转示例。

.attr({x: viewportWidth/2 - imageWidth/2, y: viewportWidth/2 - imageHeight/2,
       w: imageWidth, h: imageHeight})

// setup Crafty
var gameWidth = 320,
    gameHeight = 480;

Crafty.init(gameWidth, gameHeight);
Crafty.background("#EEEEEE");

// the infinitely rotating, centered loading icon
var loadingIcon = Crafty.e("2D, Canvas, Image, Tween")
    .attr({x: gameWidth/2 - 230/2, y: gameHeight/2 - 230/2,
           w: 230, h: 230})
    .origin('center')
    .image("https://upload.wikimedia.org/wikipedia/commons/7/7e/OS_X_10.11_Beta_Beach_Ball.jpg")
    .bind("TweenEnd", function() {
      this.tween({rotation: this.rotation - 360}, 2000);
     });

// start rotating the icon
loadingIcon.trigger("TweenEnd");

// stop rotating the icon sometime later (e.g. when assets have loaded)
//loadingIcon.cancelTween("rotation");

在Crafty JS中居中图像/实体

1 个答案: