Question

我有一个使用polymer-grid-layout布局的组件，其中包含画布作为内容的主要部分。我希望画布根据polymer-grid-layout分配的大小自动调整大小。

我无法将width:100%; height:100%放在画布上，因为它只是拉伸画布使其变形和颗粒状。相反，我在画布周围包裹了一个div，并根据代码中的div大小手动调整画布大小。

代码看起来有点像（注意我已经省略了锅炉板等）

<polymer-grid-layout xnodes="{{xnodes}}" 
     layout="[[1, 2, 3],
              [4, 4, 4]]">
</polymer-grid-layout>

<gauge-slider id='front' label='Front'></gauge-slider>
<panel flex></panel>
<gauge-slider id='back' label='Back'></gauge-slider>

<canvas-view id="canvasView" canvasModel="{{canvasModel}}" flex></canvas-view>

canvas-view包含

<panel id="canvasContainer" flex>
  <canvas id="canvas"></canvas>
</panel>

在画布视图飞镖代码中，我像这样设置画布宽度

void _resize() {
  canvas.width = canvasContainer.clientWidth;
  canvas.height = canvasContainer.clientHeight;

  _redraw();
}

我打电话给

@override
void ready() {
  canvas = $['canvas'];
  canvasContainer = $['canvasContainer'];

  // doesn't seem to be a resize on anything other than window!?!
  window.onResize.listen((_) => _resize());
}

和

@published void set canvasModel(CanvasModel m) {
  _canvasModel = m;

  // TODO: need to build in a delay as otherwise the containing div has not been sized properly yet
  new Timer(new Duration(milliseconds: 50), _resize);
}

问题出在上面的代码中。如果我直接在这里调用_resize，那么容器div还不知道它的高度是否合适。经过实验，我发现50毫秒允许通过我的机器上的网格布局正确调整容器的大小，但这似乎很狡猾，并且可能在不同的设备上存在问题。

我怎样才能避免这种延迟？是否有一些我能听到的事件告诉我什么时候网格布局已经完成了组件的大小调整？

还有一种更简单的方法可以首先实现画布大小调整吗？

最后，我不得不将canvasContainer面板设置为0边距，边框等。有没有办法获取该容器的内部尺寸？

Answer 1

是否有一些我可以听的事件告诉我网格布局何时完成了组件大小调整？

网格布局在完成组件大小调整后发送polymer-grid-layout事件。

还有一种更简单的方法可以首先实现画布大小调整吗？

我不这么认为，但也许Canvas专家会提出更好的建议。

最后，我不得不将canvasContainer面板设置为0边距，边框等。有没有办法获取该容器的内部尺寸？

clientWidth/Height忽略边距和边框，但会计算填充。还有其他测量盒子的方法，但它很快就会变得复杂（主要是因为x浏览器问题）。这可能是一个困难的主题，这是一个起始链接：https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

在聚合物网格布局内自动调整画布

1 个答案: