我在这里看到了一些类似的问题，但实际上不是我需要知道的!
我使用 Flash CS6 并输出 CreateJS 框架动画而不是常规的 .swf 文件。当您从 API (Flash) 内发布时，它会生成一个 html5 文档和一个外部 .js 文件，其中包含定义动画的实际 javascript。
这就是我需要的:我希望我的动画能够全屏显示并保持其纵横比 - 或者 - 设置为 1024x768 并在浏览器窗口中居中，但如果在移动设备上查看，则动态调整大小以适合设备屏幕尺寸或视口(viewport)尺寸并居中。
我需要的一个完美例子在这里:http://gopherwoodstudios.com/sandtrap/但我没有看到此示例中哪些代码正在执行动态调整大小。
任何帮助将不胜感激。此外，我还提供 Flash API 的 html5/js 输出，因为它似乎与其他与 Canvas 相关的帖子中给出的示例代码非常非常不同。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from index</title>
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="index.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/Mesh.png", id:"Mesh"},
{src:"images/Path_0.png", id:"Path_0"}
];
var loader = new createjs.PreloadJS(false);
loader.onFileLoad = handleFileLoad;
loader.onComplete = handleComplete;
loader.loadManifest(manifest);
}
function handleFileLoad(o) {
if (o.type == "image") { images[o.id] = o.result; }
}
function handleComplete() {
exportRoot = new lib.index();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addListener(stage);
}
</script>
<style type="text/css">
body {text-align:center;}
#container { display:block;}
</style>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<div id="container">
<canvas id="canvas" width="1024" height="768" style="background-color:#ffffff; margin: 20px auto 0px auto;"></canvas>
</div>
</body>
</html>
再次感谢!
最佳答案
不知道你最终是否解决了这个问题，但我最近遇到了同样的问题 - 我只需要根据视口(viewport)调整整个 createJs 对象的大小。
我添加了一个监听器来调整视口(viewport)大小(我使用了 jQuery)，然后调整 Canvas 舞台的大小以匹配视口(viewport)，然后使用原始 Flash 舞台高度的高度或宽度，具体取决于您想要的(我的是 500)，您可以放大 createJs 影片对象 (exportRoot)。
(function($){
$(window).resize(function(){
windowResize();
});
})(jQuery);
function windowResize(){
stage.canvas.width = window.innerWidth;
stage.canvas.height = window.innerHeight;
var test = (window.innerHeight/500)*1;
exportRoot.scaleX = exportRoot.scaleY = test;
}
希望对某人有帮助!
关于javascript - 如何动态调整 Flash CreateJS Canvas 元素动画的大小和居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13368724/