Автоизображение холста внутри полимерной сетки

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> 

где холст ракурс содержит

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

В холсте вид дротика кода I установите ширину полотна таким образом

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

    _redraw(); 
} 

, который я LL от

@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 после того, как он закончил настройку размеров.

Также был ли более простой способ добиться изменения размера холста в первую очередь?

Я так не думаю, но, возможно, эксперт по холсту будет перекликаться с лучшими советами.

Наконец, мне нужно было создать панель canvasContainer, чтобы иметь 0 полей, границу и т. Д. Есть ли способ получить внутренние размеры этого контейнера?

clientWidth/Height игнорирует поля и границу, но делает подсчет дополнений.Существуют и другие способы измерения ящиков, но они быстро усложняются (в основном из-за проблем с x-браузером). Это может быть трудная тема, вот стартовая ссылка: https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements