0

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

我正在使用 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>

再次感谢！

4

4 回答 4

4

不知道你最后是否解决了这个问题，但我最近遇到了同样的问题 - 我只需要将整个 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;
}

希望对某人有所帮助！

于 2013-01-23T21:51:41.907 回答
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"/>
于 2013-08-13T04:16:39.443 回答
0

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

因为导出时没有定义元素的宽度和高度，所以我正在努力想出一种扩大规模的好方法。但是，你总是可以缩小规模。使用 CSS 将 max-width 和 max-height 设置为 1024x768（或您的原始值），然后将常规宽度和高度设置为您需要的任何值（按比例）。

然后只需使用 CSS 居中 - margin:auto 和所有这些。

于 2012-12-28T15:22:59.813 回答
0

我发现让我的画布根据宽度流动，然后根据调整大小的纵横比调整高度很有用。有几件事要记住。

  1. 无论您是使用 javascript 还是 html 创建，都必须为 canvas 元素分配宽度和高度属性
  2. 您必须调整对象的 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);

编辑：我没有用画布内的任何交互性测试这个，只有布局和动画。

于 2015-04-30T16:20:57.390 回答