3

私は小さなKineticJSアニメーションを作成しました。これは、次のアドレスで見ることができます。

http://sandbox-ben.kimbiaservices.com/kineticjs/index.html

このアニメーションを常にウィンドウ幅の100％に設定する方法を見つけたいと思います。（これは、別の要素の「背景」領域になります。）

jQueryから幅を$（window）.width（）に設定することで初期設定を行うことができます（おそらく他の方法もありますが、jQueryはすでに使用されています）が、再描画する方法がわかりません/サイズ変更またはorientationchangeでステージをリセットします。

それで、これを達成するために次のいずれかを行う方法はありますか？

  1. どういうわけか（100％）ステージを可変幅に設定できますか？（答えは「いいえ」だと思いますが、「はい」だったとしても、アニメーションが比較的拡大縮小できるかどうかはわかりません。）
  2. アニメーションをクリアして、サイズ変更または向きの変更時に再作成できますか？これはそれほど効率的ではないようです。サイズ変更とorientationchangeでlayer.remove（）を使用しようとすると、ブラウザがほとんどハングしました。
  3. または、この画像をSVGファイルに変換し、代わりにjQuery SVGを使用して同じことを実行する簡単な方法はありますか？（すべてがサイズ変更とorientationchangeで引き続き機能することを条件とします。）
  4. それとも私が考えていない何か他のものがありますか？
4

1 に答える 1

8

私は解決策を見つけたと思います。検出を試みる際の問題.on('resize')は、ウィンドウのサイズを変更すると、イベントが無数に発生し、ブラウザが下にドラッグされることです。

この答えに触発されました：JavaScriptを使用してウィンドウのサイズが変更されたことを検出しますか？--サイズ変更が完了したときに（多かれ少なかれ）検出するjQueryイベントを作成できました。それが完了したら、コンテナ要素を空にして、最初の描画スクリプトを再起動します。以下のコードはトリックを行います：

$(window).on('resize',function(){
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function(){
        $(this).trigger('resizeEnd');
    },500);
});

$(window).on('resizeEnd orientationchange',function(){
    $('#container').empty();
    RunHeaderAnim();
});
于 2013-01-09T22:55:09.900 に答える