Question

我在固定坐标空间工作，比方说{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/

Answer 1

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

在缩放阶段中心层

1 个答案: