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

我在这里看到了一些类似的问题，但实际上并不是我需要知道的！如何动态调整大小和居中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>

再次感谢！

来源

2012-11-13 user11643

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

不知道你是否最终完成了这一个，但我最近有同样的问题 - 我只需要调整整个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; 
}

希望能帮助别人！

来源

2013-01-23 21:51:41 JohnJ

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

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

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

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

来源

2012-12-28 15:22:59 robodevil

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

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

来源

2013-08-13 04:16:39 Villan

的话题另一个有用的讨论

http://community.createjs.com/discussions/createjs/547-resizing-canvas-and-its-content-proportionally-cross-platform

如果任何人都可以得到这个工作，我想看看一个例子。

来源

2014-04-23 05:40:47 user3303724

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

您必须分配无论你是使用JavaScript或HTML
你必须调整对象的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);

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

来源

2015-04-30 16:20:57

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

回答

相关问题