为响应式画布维护缩放比例

Question

我正在使用Flash CC创建一些画布内容。我使用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出口，您可以使用您的exportRoot中的nominalBounds，这是Flash计算的内容大小，也可以使用存储在lib.properties对象中的FLA大小。

希望有所帮助。