Question

在我的测试代码中，我想根据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;
}

Answer 1

直接检测这些值的变化是不可能的，当然也不能跨浏览器，这有两个选择：

在画布和消息框周围创建一个包装器div，并定位：绝对画布和消息框。这让布局引擎可以处理它，并且会像显示更新一样有效地做出反应。（强烈建议除非您没有指定其他需求）。
使用计时器轮询对此属性的更改，并触发自定义事件来处理它。这将落后于显示器更新，加上空闲时消耗cpu（与你想要更新的速度成比例），这并不理想，但像http://johnpolacek.github.io/scrollorama/这样的东西依赖于这种方法。对于额外的积分，您可以使用requestAnimationFrame / setTimeout的组合来执行此操作，这种方式在选项卡未聚焦时不会刻录循环，但我猜测并且自己没有尝试过。
< / LI>

如何在Dart中捕获canvas.offsetLeft，canvas.offsetTop中的更改？

1 个答案: