javascript 如何动态调整大小并居中 Flash CreateJS 画布元素动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13368724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically resize and center a Flash CreateJS canvas element animation
提问by user11643
I have seen some similar questions here but not actually what I need to know!
我在这里看到了一些类似的问题，但实际上并不是我需要知道的！
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.
我正在使用 Flash CS6 并输出 CreateJS 框架动画而不是常规的 .swf 文件。当您从 API (Flash) 内发布时，它会生成一个 html5 文档和一个外部 .js 文件，其中包含定义动画的实际 javascript。
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.
这是我需要的：我希望我的动画能够全屏显示并保持其纵横比 - 或者 - 设置为 1024x768 并在浏览器窗口中居中，但如果在移动设备上查看，动态调整大小以适应设备屏幕大小或视口大小并居中。
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.
我需要的一个完美例子在这里：http: //gopherwoodstudios.com/sandtrap/但我没有看到在这个例子中哪个代码在做动态调整大小。
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.
任何帮助将不胜感激。此外，我提供 Flash API 的 html5/js 输出，因为它似乎与其他与画布相关的帖子中给出的示例代码非常不同。
<!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>
Thanks again!
再次感谢！
回答by JohnJ
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.
不知道你最后是否解决了这个问题，但我最近遇到了同样的问题 - 我只需要将整个 createJs 对象调整为视口的大小。
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).
我添加了一个监听器来调整视口大小（我使用 jQuery），然后调整画布舞台的大小以匹配视口，然后使用原始 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;
}
Hope that helps someone!
希望对某人有所帮助！
回答by Villan
function resizeGame()
{
widthToHeight = 600 / 350;
newWidth = window.innerWidth;
newHeight = window.innerHeight;
newWidthToHeight = newWidth / newHeight;
if (newWidthToHeight > widthToHeight)
{
newWidth = newHeight * widthToHeight;
gameArea.style.height = newHeight + 'px';
gameArea.style.width = newWidth + 'px';
} else
{
newHeight = newWidth / widthToHeight;
gameArea.style.height = newHeight + 'px';
gameArea.style.width = newWidth + 'px';
}
scale = newWidthToHeight / widthToHeight;
stage.width = newWidth;
stage.height = newHeight;
gameArea.style.marginTop = ((window.innerHeight - newHeight) / 2) + 'px';
gameArea.style.marginLeft = ((window.innerWidth - newWidth) / 2) + 'px';
}
widthToHeightis your game canvas scaling ratio. gameAreais your div id
widthToHeight是您的游戏画布缩放比例。gameArea是你的 div id
make it sure your html tag must contain
确保您的 html 标签必须包含
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
回答by user3303724
Another useful discussion on topic
关于主题的另一个有用的讨论
If anyone can get this to work I would like to see an example.
如果有人能让这个工作，我想看一个例子。
回答by Ryan Ore
I find it useful to allow my canvas to be fluid based on width, and then adjust the height based on the aspect ratio on resize. There are a couple things to keep in mind.
我发现让我的画布根据宽度流动，然后根据调整大小时的纵横比调整高度很有用。有几件事要记住。
- You must assign a width & height attribute to the canvas element whether you're creating with javascript or with html
- You have to adjust the object's style.height property, not the canvas height property directly.
- 无论您是使用 javascript 还是 html 创建，您都必须为 canvas 元素分配宽度和高度属性
- 您必须调整对象的 style.height 属性，而不是直接调整画布高度属性。
If you follow this sort of example you can even use media queries to give even more flexibility. jsFiddle, if you please.
如果您遵循此类示例，您甚至可以使用媒体查询来提供更大的灵活性。 jsFiddle，如果你愿意。
var el = document.getElementById('mycanvas');
var aspectRatio = el.height / el.width;
resizeCanv = function resize (){
var style = getComputedStyle(el);
var w = parseInt(style.width);
el.style.height = (w * this._aspectRatio) + 'px';
};
// TODO: add some logic to only apply to IE
window.addEventListener('resize', resizeCanv);
EDIT: I haven't tested this with any interactivity within the canvas, only layout and animations.
编辑：我没有在画布中测试过任何交互性，只有布局和动画。
回答by robodevil
The inline width and the height of the canvas define "resolution" - setting a CSS style of width defines "scale". Think of it like canvas size and image size in photoshop.
画布的内嵌宽度和高度定义了“分辨率”——设置宽度的 CSS 样式定义了“比例”。把它想象成 Photoshop 中的画布大小和图像大小。
Because width and height of elements isn't defined when you export, I'm struggling to come up with a good way to scale up. But, you can always scale down. Use CSS to set the max-width and max-height to be 1024x768 (or whatever your original is) and then set the regular width and height to be whatever you need (proportionately).
因为在导出时未定义元素的宽度和高度，所以我正在努力想出一种放大的好方法。但是，您始终可以缩小规模。使用 CSS 将 max-width 和 max-height 设置为 1024x768（或任何您原来的尺寸），然后将常规宽度和高度设置为您需要的任何尺寸（按比例）。
Then just use CSS to center - margin:auto and all that.
然后只需使用 CSS 居中 - margin:auto 等等。
