2012-11-13 133 views
0

我在这里看到了一些类似的问题,但实际上并不是我需要知道的!如何动态调整大小和居中Flash CreateJS画布元素动画

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

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

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

任何帮助将不胜感激。另外,我提供了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> 

再次感谢!

+0

凹凸,凹凸! 也许我的问题太过复杂。我只需要知道如何以及在哪里(我认为)使用javascript来动态调整canvas元素的大小,使其在显示的任何屏幕上保持高宽比。 任何帮助将被认真感谢! – user11643

回答

3

不知道你是否最终完成了这一个,但我最近有同样的问题 - 我只需要调整整个createJs对象到视口。 (我使用jQuery),然后调整画布舞台的大小以匹配视口,然后使用原始闪光灯舞台高度的高度或宽度取决于你想要什么(我的是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; 
} 

希望能帮助别人!

+0

'exportRoot'是我需要的缺失部分。谢谢! –

0

画布的内联宽度和高度定义“分辨率” - 设置宽度的CSS样式定义“缩放”。把它想像为像Photoshop中的画布大小和图像大小。

由于元素的宽度和高度在导出时未定义,因此我正在努力想出一个扩展的好方法。但是,你总是可以缩小比例。使用CSS设置最大宽度和最大高度为1024x768(或任何您的原始),然后将常规宽度和高度设置为任何您需要的(按比例)。

然后,只需使用CSS中心 - 边距:自动和所有。

+0

感谢Robodevil。虽然这不是一个完整的答案,但它可能是我需要和有用的70%。再次感谢。 – user11643

2
 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"/> 
0

我发现可以根据宽度让我的画布变得流畅,然后根据调整大小时的高宽比调整高度。有几件事要牢记。

  1. 您必须分配无论你是使用JavaScript或HTML
  2. 你必须调整对象的style.height属性,而不是画布高度直接财产创建一个宽度& height属性画布元素。

如果您遵循这样的例子,您甚至可以使用媒体查询来提供更大的灵活性。 jsFiddle, if you please.

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); 

编辑:我没有用帆布内的任何互动,只有布局和动画进行测试这一点。