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

Question

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

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>

这非常适合舞台本身，但内容缩放和位置似乎发生了变化并且不起作用。

所以如果我以后有：

some_container.y = 1000;

它在一个大画布上呈现在中间，但是当我调整大小时，它会靠近顶部，并且至少看起来也不成比例。

所以我想我必须以某种方式对位置应用相同的比率，但我似乎无法正确计算公式。任何帮助将不胜感激。

此示例 (https://codepen.io/funktion/pen/JwwwBx) 似乎可以正确缩放和移动。

经过反复试验，我发现问题出在股票行情上……

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

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

但是...我确实需要动画的代码。任何想法将不胜感激。

Answer 1

几点说明：

1. 不建议缩放舞台。报告了一些与鼠标交互有关的问题。最好将东西放入容器中并进行扩展
2. 如果您缩放容器（或舞台），坐标也会缩放。因此，在缩放 2 倍的容器中位于 [50,50] 的东西仍然会说它们在 [50,50]，但在视觉上会在 [100,100]。
3. 不建议使用 CSS 缩放画布。它转换像素。最好把画布的width和height设置成你想要的大小。有时我们将画布设置为像素数的 2 倍或 0.5 倍，然后使用 CSS 对其进行反缩放以基本上“缩放”它。这是减少像素（保真度较低，速度更快）或更多（高分辨率）的好方法，但那将是我唯一一次使用 CSS。

我用以下调整大小的代码更新了你的 codepen，效果很好（我认为）

之前（CSS 缩放）

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

之后（JS 缩放）

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

我还去掉了画布上的 CSS 宽度/高度。这是更新的笔：https://codepen.io/lannymcnie/pen/vvPLWb

我希望这是有道理的。