3

KineticJS を使用して HTML Canvas アニメーションを実行しています。アニメーションは、すべてのデスクトップ ブラウザー、および非 Retina iDevice (iPad mini を含む) で完全に機能します。ただし、Retina デバイス (ブラウザーまたは appcelerator を使用したアプリ内 Web ビュー) からは、これらのアニメーションは非常に遅くなります。Retina ディスプレイのキャンバス アニメーションで同様の問題を見たことがありますが、真の解決策は見つかりませんでした。

私のステージのコンストラクターは 1024w x 768h です。すべての画像はプリロードされています。また、アニメーションはプリローダーのコールバック関数を使用して構築されます。

ステージ サイズを半分に縮小すると (そしてそれに応じて内部コンテンツをスケーリングすると)、アニメーションはほぼ正常に再生されます (それでも、他の iPad よりも少し途切れ途切れになります)。これを試す唯一の理由は、Retina ディスプレイが 2 つの「ポイント」/ピクセルであるという私の非常に不十分な理解でした。

洞察やアイデアは大歓迎です。私の次の試みは、動的にスケーリングするのではなく、画像の解像度を変更することです。

4

3 に答える 3

8

これは、4 か月前に追加された機能によるものです。KineticJS は、デバイスの pixelratio が 1 を超えているかどうかを認識し、pixelratio 1 の場合と同じくらい鮮明にしようとします。これが私たちのユースケースに当てはまることがわかりました。

私たちの解決策: KineticJS のピクセル比率部分をコメントアウトし、常に 1 になるようにハードコーディングしました。

長所：

パフォーマンスは正常に戻ります

短所：

画像はそれほど鮮明ではありません

これは、変更を加えた部分です。

Kinetic.Canvas = function(width, height, pixelRatio) {
// eduplus change to fix pixel ratio performance problems
this.pixelRatio = 1; //pixelRatio || _pixelRatio;

これについてエリックと話し合ったとき、彼はピクセル比のパフォーマンスを調査するためにコメントしましたが、まだそれを行う時間がなかったと思います. お役に立てれば！

于 2013-04-02T12:31:10.220 に答える
3

KineticJS 5 以降を使用する場合 (このグローバル設定がいつ導入されたのか正確にはわかりません)、これを行うための最も簡単で最小限の方法は、ステージをインスタンス化する前に Kinetic.pixelRatio を目的の値に設定することです。

Kinetic.pixelRatio = 1;
var stage = new Kinetic.Stage({
    ...
});
于 2014-02-28T05:29:09.587 に答える
1

ステージをインスタンス化する前にこれを使用して、KineticJS のソース ファイルを変更せずに pixelRatio をオーバーロードします。(更新後にソース ファイルを更新する必要がなくなります。)

https://gist.github.com/echong/6107722

コーヒースクリプト:

# Adjust device pixel ratio
for className in ["HitCanvas", "SceneCanvas", "Canvas"]
    Kinetic[className].prototype.init = ((p_method) -> (p_config={}) ->
        p_config.pixelRatio = 1
        p_method.call @, p_config
    ) Kinetic[className].prototype.init

JavaScript:

_ref = ["HitCanvas", "SceneCanvas", "Canvas"];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  className = _ref[_i];
  Kinetic[className].prototype.init = (function(p_method) {
    return function(p_config) {
      if (p_config == null) {
        p_config = {};
      }
      p_config.pixelRatio = 1;
      return p_method.call(this, p_config);
    };
  })(Kinetic[className].prototype.init);
}
于 2013-07-29T20:47:32.573 に答える