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

不可能直接检测到对这些值的更改 afaik，当然不是跨浏览器，这给您留下了两个选择：

  1. 在画布和消息框周围创建一个包装 div，并定位：画布和消息框的绝对位置。这让布局引擎能够处理它，并且会随着显示更新而做出有效的反应。（强烈推荐，除非您有其他未指定的需求）。

  2. 使用计时器轮询此属性的更改，并触发自定义事件来处理它。虽然这会落后于显示更新，加上空闲时消耗 cpu（与您希望它更新的速度成正比），这并不理想，但是像http://johnpolacek.github.io/scrollorama/这样的东西依赖于这种方法. 对于多个积分，您可能会使用请求inimationframe/settimeout的组合来执行此操作，而当标签不集中时不会燃烧循环，但我我在猜测并且自己没有尝试过。

于 2013-10-02T19:48:24.303 回答