维护响应式Canvas的缩放

Question

我正在使用Flash CC创建一些Canvas内容。我使用100vh / vw缩放Canvas元素以填充浏览器窗口。这会导致该阶段上的元素在调整浏览器大小时倾斜和缩放。是否有可能使舞台流动，而其上的元素不会偏离其原始尺度？

Answer 1

以下是我回答的类似问题的链接： How should I create a responsive canvas with createJs to adapt different mobile device's screens?还包括一个JSFiddle示例。

如果您知道内容界限（宽度和高度），则可以使用较大（或较小）的比例根据新的视口大小缩放内容：

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

使用Flash CC导出，您可以使用nominalBounds的{​​{1}}，这是Flash计算内容的大小，也可以使用存储在其中的FLA大小exportRoot对象。

希望有所帮助。