在聚合物网格布局内自动调整画布 [英] Autosizing canvas inside a polymer grid layout
问题描述
我有一个使用 polymer-grid-layout 布局的组件，它包含一个画布作为内容的主要部分。我想根据 polymer-grid-layout 分配的大小自动调整画布大小。
I have a component that's laid out using polymer-grid-layout which contains a canvas as the main part of the content. I want the canvas to auto resize based on the size that polymer-grid-layout allocates.
width：100％; height：100％在画布上，只是伸展的画布，使其扭曲和颗粒感。相反，我在画布上包裹了一个div，并根据代码中的div大小手动调整画布大小。
I can't put width:100%; height:100% on the canvas as that just stretches the canvas making it distorted and grainy. Instead I wrapped a div around the canvas and manually resize the canvas based on the div size in code.
代码看起来有点像like etc）
Code looks somewhat like (note I've left out the boiler plate like etc)
<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包含
where canvas-view contains
<panel id="canvasContainer" flex>
<canvas id="canvas"></canvas>
</panel>
在画布视图dart代码中，我将画布宽度设置为
In the canvas-view dart code I set the canvas width like so
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毫秒允许容器的大小正确的网格布局在我的机器上，但这似乎真的很狡猾，可能会在不同的设备有问题。
The problem is in the above code. If I call _resize directly here then the container div doesn't yet know it's proper height. After experimenting I found that 50 millisecs allows the container to be sized correctly by the grid layout on my machine but that seems really dodgy and likely to be problematic on different devices.
如何避免这种延迟？是否有一些事件，我可以听，告诉我什么时候网格布局已经调整组件大小？
How can I avoid that delay? Is there some event I can listen to that tells me when the grid layout has finished sizing components?
还有一个更简单的方法来实现在第一个
Also was there a simpler way to have achieved the canvas resizing in the first place?
最后，我不得不对canvasContainer面板进行风格设置，使其具有0边距，边框等等。有没有办法获取容器的内部尺寸？ p>
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?
推荐答案
有没有一些事件，我可以听，告诉我什么时候网格布局完成组件大小调整？
Is there some event I can listen to that tells me when the grid layout has finished sizing components?
网格布局发送一个 polymer-grid-layout
还有一个更简单的方法来实现canvas调整大小吗？
Also was there a simpler way to have achieved the canvas resizing in the first place?
我不这么认为，但也许一个Canvas专家会有更好的建议。
I don't think so, but maybe a Canvas expert out there will chime in with better advice.
最后，我不得不风格的canvasContainer面板有0页边距，边框等。有没有一种方法来获取该容器的内部尺寸？
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
clientWidth/Height ignores the margins and border, but does count padding. There are other ways of measuring boxes, but it gets complicated quickly (mostly because of x-browser concerns). This can be a difficult topic, here is a starter link: https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements
这篇关于在聚合物网格布局内自动调整画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
