dart - 在 polymer 网格布局中自动调整 Canvas 大小

Question

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

我不能把 width:100%; height:100% 在 Canvas 上，因为它只是拉伸(stretch) Canvas ，使其扭曲和呈颗粒状。相反，我在 Canvas 周围包裹了一个 div，并根据代码中的 div 大小手动调整 Canvas 的大小。

代码看起来有点像(注意我已经省略了样板等)

<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>

在 canvas-view dart 代码中，我这样设置 Canvas 宽度

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 毫秒允许容器根据我机器上的网格布局正确调整大小，但这看起来很不可靠，并且在不同的设备上可能会出现问题。

我怎样才能避免这种延迟？是否有一些事件可以告诉我网格布局何时完成调整组件大小？

还有没有更简单的方法来首先实现 Canvas 大小调整？

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

Answer 1

Is there some event I can listen to that tells me when the grid layout has finished sizing components?

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

Also was there a simpler way to have achieved the canvas resizing in the first place?

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

Lastly, I had to style the canvasContainer panel to have 0 margins, border etc. Is there a way to have fetched the inner dimensions of that container?

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