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

一些注意事项：

扩展舞台不是超级明智的选择。报告了一些鼠标交互问题。最好将东西放入容器中并进行缩放
如果要缩放容器（或舞台），则坐标也将缩放。因此，在缩放为2倍的容器中[50,50]处的值仍会表示它们在[50,50]处，但在视觉上会是[100,100]。
不建议使用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

我希望这是有道理的。

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

1 个答案: