缩放阶段的居中层答案

【问题标题】：Centering layer in scaled stage缩放阶段的居中层
【发布时间】：2014-09-02 19:48:10
【问题描述】：

我在固定坐标空间工作，比如说{x:0, y:0, w:800, h:600}。画布被缩放以适合窗口尺寸，然后我缩放舞台并重新绘制它。然后我将我的背景层集中在舞台上。如果我不使用整个舞台的缩放，则居中工作正常，但是当我为舞台设置比例时，计算出的坐标与我在屏幕上看到的不匹配。

舞台缩放有什么技巧以及如何定位图层？

// @param size window size {width, height}
MyScene.prototype.scaleAndCenterScene = function (size) {
    var hfactor = size.width / this.baseWidth;
    var vfactor = size.height / this.baseHeight;
    var factor = Math.min(hfactor, vfactor);

    // resize stage
    this.stage.setSize(size);

    // scale stage
    this.stage.setScale({
        x: factor,
        y: factor
    });

    // calculate center
    var pos = {
        x: (size.width - this.baseWidth) * 0.5,
        y: (size.height - this.baseHeight) * 0.5
    };
    // center layer
    this.backgroundLayer.position(pos);

    // redraw
    this.stage.batchDraw();
};

JSFiddle 位于：http://jsfiddle.net/pronebird/ahqa9a3y/

【问题讨论】：

你能创建任何 jsfiddle 吗？
@lavrton 我已经用 jsfiddle 链接更新了帖子。取消注释 stage.scale 以查看它如何与缩放一起使用。也许我没有得到任何东西，但我希望在使用缩放时将坐标映射到画布尺寸。
@lavrton 对这个问题有什么想法吗？跟师傅查过，同样的问题。我做错了吗？
您期待什么？为什么需要改变图层的位置？ react 应该放在哪里，在中心？
@lavrton 我正在尝试实现整个舞台的比例缩放以适应视口或容器 div。因为舞台本身可以是任何大小，所以我必须将图层放在里面。例如，纵横比为 4:3，我必须在屏幕上垂直居中图层。在我打开缩放功能之前，所有这些都可以正常工作。如果我停止将内容居中并将其粘贴在 {0,0} 处，则它可以正常工作，但会在图层下方留下空白空间。

标签： javascript kineticjs

【解决方案1】：

关键是结合使用 stage.scale 和 stage.position，加上一些技巧来处理绝对和固定坐标空间。我为此写了一篇博文：https://coderwall.com/p/dy_dla。

【讨论】：