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

Question

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. 我正在使用Flash CS6并输出CreateJS框架动画，而不是常规的.swf文件。 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. 当您从API（Flash）中发布时，它会生成一个html5文档和一个带有定义动画的实际JavaScript的外部.js文件。

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. 这就是我需要的：我希望动画能够全屏显示并保持其宽高比-OR-设置为例如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! 再次感谢！

Answer 1

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! 希望能对某人有所帮助！

Answer 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 is your game canvas scaling ratio. widthToHeight是您的游戏画布缩放比例。 gameArea is your div id 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"/>

Answer 3

The inline width and the height of the canvas define "resolution" - setting a CSS style of width defines "scale". 画布的内联宽度和高度定义“分辨率”-设置CSS样式的width定义“比例”。 Think of it like canvas size and image size in photoshop. 可以将其视为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（或任何原始尺寸），然后将常规的width和height设置为所需的大小（成比例）。

Then just use CSS to center - margin:auto and all that. 然后，只需使用CSS居中-margin：auto等即可。

Answer 4

Another useful discussion on topic 关于主题的另一个有用的讨论

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

If anyone can get this to work I would like to see an example. 如果有人可以解决这个问题，我想举个例子。

Answer 5

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 无论是使用javascript还是html创建，都必须为canvas元素分配width和height属性。
You have to adjust the object's style.height property, not the canvas height property directly. 您必须调整对象的style.height属性，而不是直接调整canvas 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. 编辑：我还没有在画布中进行任何交互性测试，仅对布局和动画进行了测试。

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

问题描述

5 个解决方案

解决方案1
4 已采纳 2013-01-23 21:51:41

解决方案2
2 2013-08-13 04:16:39

解决方案3
0 2012-12-28 15:22:59

解决方案4
0 2014-04-23 05:40:47

解决方案5
0 2015-04-30 16:20:57

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

问题描述

5 个解决方案

解决方案1 4 已采纳 2013-01-23 21:51:41

解决方案2 2 2013-08-13 04:16:39

解决方案3 0 2012-12-28 15:22:59

解决方案4 0 2014-04-23 05:40:47

解决方案5 0 2015-04-30 16:20:57

解决方案1
4 已采纳 2013-01-23 21:51:41

解决方案2
2 2013-08-13 04:16:39

解决方案3
0 2012-12-28 15:22:59

解决方案4
0 2014-04-23 05:40:47

解决方案5
0 2015-04-30 16:20:57