0

以下のテスト コードでは、canvas.offsetLeft に従って mbox.style.left を更新したいのですが、レイアウトの変更によりキャンバスが再配置されたときに関数 repositionBox() が呼び出されません。canvas.offsetLeft の変更を検出する方法に関するヒントはありますか? (同じ質問が canvas.offsetTop にも当てはまります。)

DivElement createMessagebox(String id, CanvasElement c) {

  DivElement mbox = new DivElement();
  mbox.id = id;

  int left = 10 + canvas.offsetLeft;
  int top  = 28 + canvas.offsetTop;

  mbox.style.border = '2px solid #FFF';
  mbox.style.zIndex = "1";
  mbox.style.position = "absolute";
  mbox.style.width = "300px";
  mbox.style.color = "lightgreen";
  mbox.style.background = "rgba(50,50,50,0.7)";
  mbox.style.textAlign = "left";
  mbox.style.padding = "2px";
  mbox.style.fontSize = 'x-small';

  void repositionBox(Event e) {
    int left = 10 + canvas.offsetLeft;
    int top  = 28 + canvas.offsetTop;

    mbox.style.left = "${left}px";
    mbox.style.top = "${top}px";

    print("repositionBox: event=$e: left=${mbox.style.left} top=${mbox.style.top}");
  }

  repositionBox(null);

  c.onChange.listen(repositionBox);

  return mbox;
}
4

1 に答える 1

1

これらの値の変更を直接検出することはできず、もちろんクロス ブラウザーでは検出できないため、次の 2 つのオプションがあります。

  1. キャンバスとメッセージ ボックスの周りにラッパー div を作成し、キャンバスとメッセージ ボックスの両方を position: absolute にします。これにより、レイアウト エンジンがそれを処理できるようになり、表示の更新と同じくらい効率的に反応します。(他に指定されていない必要がない限り、強くお勧めします)。

  2. タイマーを使用してこのプロパティへの変更をポーリングし、カスタム イベントを発生させてそれを処理します。ただし、これはディスプレイの更新に遅れをとります。さらに、アイドル時に CPU を消費します (更新の速さに比例して)。これは理想的ではありませんが、http://johnpolacek.github.io/scrollorama/ などはこの方法に依存しています。 . 追加のポイントについては、 requestAnimationFrame/setTimeout の組み合わせを使用して、タブがフォーカスされていないときにサイクルを燃やさない方法でこれを行うことができますが、私は推測しており、これを自分で試したことはありません。

于 2013-10-02T19:48:24.303 に答える