Javascript 如何动态调整Flash CreateJS画布元素动画的大小并使其居中
我在这里看到了一些类似的问题，但实际上并不是我需要知道的 我正在使用FlashCS6并输出CreateJSFramework动画，而不是常规的.swf文件。当您从API（Flash）中发布时，它会生成一个html5文档和一个外部.js文件，其中包含定义动画的实际javascript 我需要的是：我希望我的动画能够全屏显示并保持其纵横比，或者设置为1024x768并在浏览器窗口中居中，但如果在移动设备上观看，则动态调整大小以适应设备屏幕大小或视口大小并居中 这里是我需要的一个完美的例子：但在这个例子中，我看不出哪个代码正在进行动态调整大小 任何帮助都将不胜感激。此外，我还提供了Flash API的html5/js输出，因为它似乎与其他画布相关文章中给出的示例代码非常非常不同Javascript 如何动态调整Flash CreateJS画布元素动画的大小并使其居中,javascript,flash,canvas,createjs,Javascript,Flash,Canvas,Createjs,我在这里看到了一些类似的问题，但实际上并不是我需要知道的 我正在使用FlashCS6并输出CreateJSFramework动画，而不是常规的.swf文件。当您从API（Flash）中发布时，它会生成一个html5文档和一个外部.js文件，其中包含定义动画的实际javascript 我需要的是：我希望我的动画能够全屏显示并保持其纵横比，或者设置为1024x768并在浏览器窗口中居中，但如果在移动设备上观看，则动态调整大小以适应设备屏幕大小或视口大小并居中 这里是我需要的一个完美的例子：但在这个例
<!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从索引导出
var画布、stage、exportRoot；
函数init（）{
canvas=document.getElementById（“canvas”）；
图像=图像| |{}；
变量清单=[
{src:“images/Mesh.png”，id:“Mesh”}，
{src:“images/Path_0.png”，id:“Path_0”}
];
var loader=newcreatejs.PreloadJS（false）；
loader.onFileLoad=手动文件加载；
loader.onComplete=handleComplete；
loader.loadManifest（清单）；
}
功能手柄文件负载（o）{
如果（o.type==“image”）{images[o.id]=o.result；}
}
函数handleComplete（）{
exportRoot=new lib.index（）；
stage=newcreatejs.stage（画布）；
stage.addChild（exportRoot）；
stage.update（）；
createjs.Ticker.setFPS（24）；
createjs.Ticker.addListener（stage）；
}
正文{文本对齐：居中；}
#容器{显示：块；}
再次感谢 画布的内联宽度和高度定义“分辨率”——设置CSS样式的宽度定义“比例”。想象一下photoshop中的画布大小和图像大小 因为导出时并没有定义元素的宽度和高度，所以我很难找到一种放大的好方法。但是，你总是可以缩小规模。使用CSS将“最大宽度”和“最大高度”设置为1024x768（或您的原稿是什么），然后将“常规宽度”和“高度”设置为您需要的（成比例）
然后只需使用CSS来居中-margin:auto等等。画布的内联宽度和高度定义了“分辨率”——设置CSS样式的宽度定义了“比例”。想象一下photoshop中的画布大小和图像大小 因为导出时并没有定义元素的宽度和高度，所以我很难找到一种放大的好方法。但是，你总是可以缩小规模。使用CSS将“最大宽度”和“最大高度”设置为1024x768（或您的原稿是什么），然后将“常规宽度”和“高度”设置为您需要的（成比例）
然后使用CSS来居中-margin:auto等等。不知道你最后是否解决了这个问题，但我最近遇到了同样的问题-我只需要调整整个createJs对象到视口的大小 我在调整视口大小时添加了一个侦听器（我使用jQuery），然后调整画布舞台的大小以匹配视口，然后使用原始flash舞台的高度或宽度（取决于所需的宽度）（我的是500），您可以放大createJs电影对象（exportRoot）
希望这对别人有帮助 不知道您是否最终解决了这个问题，但我最近遇到了同样的问题-我只需要将整个createJs对象调整到视口
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';
}
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';
}
widthToHeight <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
widthToHeight <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
我发现允许画布根据宽度流动，然后根据调整大小时的纵横比调整高度非常有用。有几件事需要记住
编辑：我没有在画布中测试过任何互动性，只测试过布局和动画。我发现根据宽度允许画布流动，然后根据调整大小时的纵横比调整高度很有用。有几件事需要记住
编辑：我没有在画布中测试过任何互动性，只有布局和动画。Bump，Bump！也许我的问题太复杂了。我只需要知道如何以及在哪里（我认为）使用javascript来动态调整画布元素的大小，使其显示在任何屏幕上，同时保持其纵横比。任何帮助都将不胜感激！砰，砰！也许我的问题太复杂了。我只需要知道如何以及在哪里（我认为）使用javascript来动态地