我应该如何使用 createJs 创建响应式画布以适应不同的移动设备屏幕？

Posted 2023-03-05

【中文标题】我应该如何使用 createJs 创建响应式画布以适应不同的移动设备屏幕？

【英文标题】：How should I create a responsive canvas with createJs to adapt different mobile device's screens?

【发布时间】：2015-04-11 12:28:58

【问题描述】：

我想开发一款html5手机游戏。如您所知，移动设备的屏幕大小不同，所以我想创建一个响应式画布，以便它可以适应不同的屏幕。

【参考方案1】：

最简单的方法是使用 javascript 根据视口调整画布大小，然后重排内容。

var w = $("#container").width();
var h = $("#container").height();

stage.canvas.width = w;
stage.canvas.height = h;

// Simple "fit-to-screen" scaling
var ratio = contentWidth / contentHeight; // Use the "default" size of the content you have.
var windowRatio = w/h;
var scale = w/contentWidth;
if (windowRatio > ratio) 
    scale = h/contentHeight;

content.scaleX = content.scaleY = scale;

这是一个简单的例子。它与使其在调整大小窗口中工作的示例代码有点不同。 http://jsfiddle.net/lannymcnie/4yy08pax/

如果您使用的是移动设备，还需要考虑其他一些事项（它们会自动缩放画布以解决其高 DPI 问题）。

希望这会有所帮助。

【讨论】：

如果你有多个形状怎么办？如何获取每个的 contentWidth / contentHeight？

您想调整每个元素的大小以适应屏幕吗？理想情况下，您只有一个可缩放的内容，并且您知道在上述方法中使用的该内容的“默认”大小。该示例使用exportRoot，因为它具有创建时的标称大小。

我明白你的意思。想象一下您的窗口或内容区域是 500 x 300。您将其粘贴到 contentWidth / contentHeight - 因为您只需要计算比率！感谢您的回复。

调整舞台大小有一些可能的副作用。我推荐一个子容器。它几乎没有开销（一个额外的上下文转换），并且让您可以继续将您的舞台可视化为画布的表示。

@Lanny #container 在这种情况下是包装画布 /stage 的 DOM 元素，然后“内容”是一个实际的 Easeljs 容器对象，它是舞台的子对象，对吗？