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

Question

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

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;

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

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

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

经过反复试验，我发现问题出在自动收报机上...

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

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

但是...我确实需要动画的自动收报机。任何想法将不胜感激。

Answer 1

一些注意事项：

缩放舞台不是超级明智的。有一些报告的鼠标交互问题。最好将东西放入容器中并按比例缩放
如果缩放容器（或舞台），坐标也会缩放。因此，在缩放为 2 倍的容器中 [50,50] 处的某些内容仍然会说它们在 [50,50]，但视觉上会在 [100,100]。
使用 CSS 缩放 canvas 是不可取的。它转换像素。最好把canvas的width和height设置成你想要的大小。有时我们将 canvas 设置为像素数的 2 倍或 0.5 倍，然后用 CSS 将其反缩放为基本上 "zoom"。这是一个减少像素（保真度较低，速度更快）或更多（高分辨率）的好方法，但那将是我唯一一次使用 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.

我也去掉了 canvas 上的 CSS width/height。这是更新的笔：https://codepen.io/lannymcnie/pen/vvPLWb

我希望这是有道理的。

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

EaselJS object positions change when scaling canvas

canvas

easeljs

responsive