如何動態調整Flash CreateJS畫布元素動畫的大小並使其居中

Question

我在這里看到了一些類似的問題，但實際上不是我需要知道的！

我正在使用Flash CS6並輸出CreateJS框架動畫，而不是常規的.swf文件。 當您從API（Flash）中發布時，它會生成一個html5文檔和一個帶有定義動畫的實際JavaScript的外部.js文件。

這就是我需要的：我希望動畫能夠全屏顯示並保持其寬高比-OR-設置為例如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>

再次感謝！

Answer 1

不知道您是否最后解決了這個問題，但是我最近遇到了同樣的問題-我只需要將整個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;
}

希望能對某人有所幫助！

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是您的游戲畫布縮放比例。 gameArea是您的div ID

確保您的html標記必須包含

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

Answer 3

畫布的內聯寬度和高度定義“分辨率”-設置CSS樣式的width定義“比例”。 可以將其視為photoshop中的畫布大小和圖像大小。

由於在導出時未定義元素的寬度和高度，因此，我在努力尋找一種擴大規模的好方法。 但是，您始終可以縮小規模。 使用CSS將max-width和max-height設置為1024x768（或任何原始尺寸），然后將常規的width和height設置為所需的大小（成比例）。

然后，只需使用CSS居中-margin：auto等即可。

Answer 4

關於主題的另一個有用的討論

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

如果有人可以解決這個問題，我想舉個例子。

Answer 5

我發現讓畫布根據寬度變化，然后根據調整尺寸的長寬比調整高度很有用。 有兩件事要牢記。

無論是使用javascript還是html創建，都必須為canvas元素分配width和height屬性。
您必須調整對象的style.height屬性，而不是直接調整canvas 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);

編輯：我還沒有在畫布中進行任何交互性測試，僅對布局和動畫進行了測試。

如何動態調整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