如何动态调整Flash CreateJS画布元素动画的大小和居中

我在这里看到了一些类似的问题，但实际上并不是我需要知道的！

我使用的是Flash CS6，并输出一个CreateJS框架动画，而不是常规的.swf文件。当您在API(Flash)中发布时，它会生成一个html5文档和一个带有定义动画的实际javascript的外部.js文件。

我需要的是：我希望我的动画能够全屏显示并保持其纵横比，或者设置为1024x768并在浏览器窗口中居中，但如果在移动设备上观看，则动态调整大小以适应设备屏幕大小或视口大小并居中。

我需要的一个完美的例子是：http://gopherwoodstudios.com/sandtrap/但是我看不出在这个例子中是哪个代码在动态调整大小。

如有任何帮助，我们将不胜感激。此外，我提供Flash API的html5/js输出，因为它似乎与其他canvas-related文章中给出的示例代码非常非常不同。

<!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对象调整到视口的大小。

我添加了一个监听器来调整视口大小(我使用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;
}

希望这能帮助到别人！

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是您的游戏画布缩放比例。gameArea是您的div id

确保你的html标签必须包含

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

画布的内联宽度和高度定义"分辨率"-设置宽度的CSS样式定义"比例"。把它想象成photoshop中的画布大小和图像大小。

因为导出时没有定义元素的宽度和高度，所以我很难想出一个放大的好方法。但是，你总是可以缩小规模。使用CSS将最大宽度和最大高度设置为1024x768(或您原来的大小)，然后将常规宽度和高度设置为您需要的大小(按比例)。

然后使用CSS居中边距：auto等等。

我发现允许画布根据宽度保持流动，然后在调整大小时根据纵横比调整高度是很有用的。有几件事需要记住。

您必须指定一个宽度&画布元素的height属性，无论您是用javascript还是用html创建
您必须调整对象的style.height属性，而不是直接调整画布高度属性

如果您遵循这种示例，您甚至可以使用媒体查询来提供更大的灵活性。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);

编辑：我还没有在画布中测试过任何交互性，只有布局和动画。

相关内容

最新更新

热门标签：