如何动态调整Flash CreateJS canvas元素动画的大小和居中 [英] How to dynamically resize and center a Flash CreateJS canvas element animation
问题描述
我已经在这里看到了一些类似的问题，但实际上不是我需要知道的！
I have seen some similar questions here but not actually what I need to know!
我使用Flash CS6并输出CreateJS框架动画，而不是常规的.swf文件。当您从API（Flash）发布时，它会生成一个html5文档和一个外部.js文件，其中包含定义动画的实际JavaScript。
I am using Flash CS6 and outputting a CreateJS framework animation instead of regular .swf files. When you publish from within the API (Flash) it generates an html5 doc and an external .js file with the actual javascript that defines the animation.
我希望我的动画能够全屏显示并保持其纵横比 - 或者设置为1024x768，并且在浏览器窗口中居中，但是如果在移动设备上查看，则动态调整大小以适合设备屏幕大小或视口
Here's what I need: I want my animation to either be able to go full screen and maintain it's aspect ratio -OR- be set at say 1024x768 and be centered in the browser window but if viewed on a mobile device, dynamically resize to fit the device screen size or viewport size and centered.
我需要的一个完美的例子是： http://gopherwoodstudios.com/sandtrap/ ，但我没有看到在此示例中执行动态调整大小的代码。
A perfect example of what I need is here: http://gopherwoodstudios.com/sandtrap/ but I don't see which code is doing the dynamic resizing in this example.
任何帮助非常感谢。此外，我提供Flash API的html5 / js输出，因为它似乎非常非常不同于其他画布相关帖子中给出的示例代码。
Any help would be greatly appreciated. In addition, I am supplying the html5/js output of the Flash API since it seems to be very, very different than the example code given in other canvas-related posts.
<!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>
再次感谢！
推荐答案
不知道你是否在最后使用这个，但我最近有同样的问题 - 我只需要调整整个createJs对象到视口。
don't know if you worked this one out in the end, but I recently had the same issue - I just needed to resize the whole createJs object to the viewport.
我添加了一个监听器调整视口大小（我使用jQuery），然后调整画布阶段匹配视口，然后使用原始闪光阶段高度的高度，或宽度取决于你想要什么是500），您可以扩展createJs电影对象（exportRoot）。
I added a listener to viewport resizing (I used jQuery), then resized the canvas stage to match the viewport, then using the height of the original flash stage height, or width depending on what you want (mine was 500), you can scale up the createJs movie object (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;
}
希望能帮助别人！
这篇关于如何动态调整Flash CreateJS canvas元素动画的大小和居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
