Canvas 缩放画布时，EaselJS对象位置会发生变化

我正在使用以下调整大小功能缩放画布：

function resize() {
    var w, h;
    var size = [1920, 1080];
    ratio = size[0] / size[1];
    if (window.innerWidth / window.innerHeight >= ratio) {
        w = window.innerHeight * ratio;
        h = window.innerHeight;
    } else {
        w = window.innerWidth;
        h = window.innerWidth / ratio;
    }
    $('canvas').width(w);
    $('canvas').height(h);

    var scale = w/1920;
    stage.scaleX = stage.scaleY = scale;

}
window.onresize = resize;

使用HTML和CSS

<canvas width="1920" height="1080"></canvas>
<style>
   canvas {
       width: 1920px;
       height: 1080px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
   }
</style>

在一个大画布中间呈现，但当我调整大小时，它移向顶部，至少看起来也不成比例。

所以我想我必须对这些位置应用相同的比率，但我似乎无法得到正确的公式。任何帮助都将不胜感激

此示例（）似乎可以正确缩放和移动

经过反复试验，我发现问题出在自动售票机上

createjs.Ticker.addEventListener("tick", tick);

function tick(event) {
    if (!event.paused) {
        stage.update();
    }
}

但是…我确实需要动画的自动售票机。任何想法都将不胜感激

一些注意事项：

扩大舞台规模是不可取的。据报道，鼠标交互存在一些问题。最好是把东西放在一个容器里，然后按比例缩放

如果缩放容器（或舞台），坐标也将缩放。因此，在一个按2倍比例缩放的容器中，[50,50]的某个值仍然表示它们在[50,50]，但从视觉上看，它们在[100100]处

不建议使用CSS缩放画布。它变换像素。最好将画布的

宽度

和

高度

设置为所需的大小。有时，我们将画布设置为像素数的2倍或0.5倍，然后使用CSS对其进行反向缩放以基本上“缩放”它。这是一个好办法，要么减少像素（保真度更低，速度更快），要么增加像素（高分辨率），但这将是我唯一一次使用CSS

我用下面的调整大小代码更新了你的代码笔，它运行得很好（我想）

之前（CSS缩放）

之后（JS缩放）

我还去掉了画布上的CSS宽度/高度。这是一支更新过的钢笔：

---

我希望这是有道理的。

谢谢@Lanny。您是否介意编辑实际的代码笔本身，以便我可以看到更改？在我的代码笔中，你会看到它确实可以正确缩放，但只有当股票行情器关闭时…这当然不是一个真正的选项。

createjs.Ticker.addEventListener("tick", tick);

function tick(event) {
    if (!event.paused) {
        stage.update();
    }
}

$('canvas').width(w);
$('canvas').height(h);

stage.canvas.width = w;
stage.canvas.height = h;
stage.update(); // Must update because a resize clears the stage.