1

JS および JQuery シーン全体に非常に慣れていない皆さん、少し助けが必要です。いくつかの検索を実行しましたが、解決策が見つからなかったか、見落としていました (または実装が間違っていました)。

CreateJS を使用してサイトを作成し、サイズ変更がうまく機能するように管理しました (ここで見つけた小さな JQuery を使用)。ただし、コードはサイズ変更でのみ機能し、ブラウザーウィンドウを最小化された状態でロードしたときは動作しません (基本的に、キャンバス全体をフルスクリーンのようにロードして、サイトを切り離します)。

このサイトをあらゆる解像度とモバイル デバイスで自動的に表示できるようにしています。これが私が取り組んでいるコードです。いくつかの方向性は素晴らしいでしょう!

<script>
var canvas, stage, exportRoot;



function init() {
canvas = document.getElementById("canvas");
images = images||{};

var manifest = [
    {src:"images/Bitmap1.png", id:"Bitmap1"},
    {src:"images/Bitmap2.png", id:"Bitmap2"},
    {src:"images/Bitmap3.png", id:"Bitmap3"},
    {src:"images/Bitmap4.png", id:"Bitmap4"},
    {src:"images/facebook.png", id:"facebook"},
    {src:"images/mainbg.jpg", id:"mainbg"},
    {src:"images/mainbglarge.jpg", id:"mainbglarge"}
];

var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}


//resize jquery
(function($){
  $(window).resize(function(){
    windowResize();                      
  });         
})(jQuery);

function windowResize(){
   stage.canvas.width = window.innerWidth;
   stage.canvas.height = window.innerHeight;    
   var test = (window.innerWidth/1680)*1; 
   exportRoot.scaleX = exportRoot.scaleY = test;
}

function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete() {
    exportRoot = new lib.strikersite_html5Resize();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();
    stage.enableMouseOver();

    createjs.Ticker.setFPS(12);
    createjs.Ticker.addEventListener("tick", stage);
}
</script>

私は基本的に Jquery の要素を持つ通常の Javascript を使用しているため、このコードを念頭に置いて両方のアプローチを評価してください! ありがとう！

4

2 に答える 2

0

あなたの問題を正しく理解していれば、ロード時にサイズ変更イベントをトリガーしてみてください。「スクリプト」ブロックの最後に置くだけです。

$(function() {
    $(window).trigger('resize');
});
于 2013-05-02T08:25:19.423 に答える
0

サイズ変更イベントを手動でトリガーするのはハックのように思えますが、load または ready イベントで関数を呼び出します。

windowResize()ウィンドウの読み込み時またはドキュメントの準備ができたときに呼び出します。

$(window).load(windowResize());

ウィンドウ ロードとドキュメント準備完了の違いは、すべてのアセットとドキュメントがロードされたときにウィンドウ ロードが起動することです。document ready は、ドキュメントを操作する準備が整うとすぐに起動します。そうは言っても、画像がキャンバス上の寸法を計算するのを待つ必要がある場合は、ウィンドウの読み込みを使用してください。それ以外の場合は、ドキュメントの準備ができていれば問題ありません。

于 2013-05-02T08:23:43.410 に答える