如何在 CraftyJS 中以场景为中心调整视口？

Question

我想显示整个场景（静态大小）并将其居中，即我必须根据窗口大小缩放/缩放和移动 viewport。根据纵横比，我scale 要么适合宽度，要么适合高度。然后我centerOn现场

const heightScale = Crafty.viewport.height / staticSceneHeight
const widthScale = Crafty.viewport.width / staticSceneWidth
if (heightScale < widthScale) {
  Crafty.viewport.scale(heightScale)
} else {
  Crafty.viewport.scale(widthScale)
}
Crafty.viewport.centerOn(scene, 0)

缩放有效，但场景未正确居中。看这个例子：

const staticSceneWidth = 640
const staticSceneHeight = 960
Crafty.init()
Crafty.background('rgb(127,127,127)')
// grid of four rectangles
// top left
Crafty.e('2D, Canvas, Color, Fourway')
  .attr({ x: 0, y: 0, w: 320, h: 480 })
  .color('red')
// top right
Crafty.e('2D, Canvas, Color, Fourway')
  .attr({ x: 320, y: 0, w: 320, h: 480 })
  .color('green')
// bottom left
Crafty.e('2D, Canvas, Color, Fourway')
  .attr({ x: 0, y: 480, w: 320, h: 480 })
  .color('blue')
// bottom right
Crafty.e('2D, Canvas, Color, Fourway')
  .attr({ x: 320, y: 480, w: 320, h: 480 })
  .color('yellow')
// dummy for centering
const scene = Crafty.e('2D').attr({ x: 0, y: 0, w: 640, h: 960 })

function fitViewportToScene() {
  const heightScale = Crafty.viewport.height / staticSceneHeight
  const widthScale = Crafty.viewport.width / staticSceneWidth
  if (heightScale < widthScale) {
    Crafty.viewport.scale(heightScale)
  } else {
    Crafty.viewport.scale(widthScale)
  }
  Crafty.viewport.centerOn(scene, 0)
}

window.onresize = fitViewportToScene

fitViewportToScene()

body,
html {
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.9.0/crafty.js"></script>

为什么场景没有正确居中？如何正确居中？

---

Crafty.JS 0.9.0

Answer 1

我不明白centerOn 的行为，如果是intended or a bug，但我找到了解决方法。我手动计算视口 x/y 坐标。因此，我使用current scale 缩放视口尺寸。只需将示例中的centerOn 替换为

function centerOnScene() {
  const scaledViewportWidth = Crafty.viewport.width / Crafty.viewport._scale;
  Crafty.viewport.x = Math.abs(staticSceneWidth - scaledViewportWidth) / 2;
  const scaledViewportHeight = Crafty.viewport.height / Crafty.viewport._scale;
  Crafty.viewport.y = Math.abs(staticSceneHeight - scaledViewportHeight) / 2;
}

const staticSceneWidth = 640;
const staticSceneHeight = 960;
Crafty.init();
Crafty.background("rgb(127,127,127)");
// grid of four rectangles
// top left
Crafty.e("2D, Canvas, Color, Fourway")
  .attr({ x: 0, y: 0, w: 320, h: 480 })
  .color("red");
// top right
Crafty.e("2D, Canvas, Color, Fourway")
  .attr({ x: 320, y: 0, w: 320, h: 480 })
  .color("green");
// bottom left
Crafty.e("2D, Canvas, Color, Fourway")
  .attr({ x: 0, y: 480, w: 320, h: 480 })
  .color("blue");
// bottom right
Crafty.e("2D, Canvas, Color, Fourway")
  .attr({ x: 320, y: 480, w: 320, h: 480 })
  .color("yellow");

function centerOnScene() {
  const scaledViewportWidth = Crafty.viewport.width / Crafty.viewport._scale;
  Crafty.viewport.x = Math.abs(staticSceneWidth - scaledViewportWidth) / 2;
  const scaledViewportHeight = Crafty.viewport.height / Crafty.viewport._scale;
  Crafty.viewport.y = Math.abs(staticSceneHeight - scaledViewportHeight) / 2;
}

function fitViewportToScene() {
  const heightScale = Crafty.viewport.height / staticSceneHeight;
  const widthScale = Crafty.viewport.width / staticSceneWidth;
  if (heightScale < widthScale) {
    Crafty.viewport.scale(heightScale);
  } else {
    Crafty.viewport.scale(widthScale);
  }
  centerOnScene();
}

window.onresize = fitViewportToScene;

fitViewportToScene();

body,
html {
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.9.0/crafty.js"></script>