0

ここで同様の質問をいくつか見ましたが、実際には私が知る必要があることではありません!

Flash CS6 を使用しており、通常の .swf ファイルの代わりに CreateJS フレームワーク アニメーションを出力しています。API (Flash) 内から公開すると、アニメーションを定義する実際の JavaScript を含む html5 ドキュメントと外部 .js ファイルが生成されます。

必要なものは次のとおりです。アニメーションを全画面表示にしてアスペクト比を維持できるようにするか、または 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を使用）、ビューポートに合わせてキャンバスステージのサイズを変更し、元のフラッシュステージの高さ、または必要に応じて幅（私の場合は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 に答える