Co to jest najlepsza praktyka w obsłudze zdarzeń zmiany rozmiaru w elemencie polimerowym?

Question

Próbuję utworzyć element typu "rzutnia" rozszerzony z elementu Canvas. Zamierzałem wypełnić zapełnienie kontenera nadrzędnego, ale nie wydaje się to banalne.

Element canvas nie działa ze stylem = "width: 100%; height: 100%" (przywróci domyślną wartość 300x150 pikseli, jeśli nie zostaną ustawione specjalne atrybuty Canvas i height, lub trafi do 100x100 pikseli, gdy próbuję ustawić te atrybuty na „100%”. To pozostawia mnie z zadaniem ręcznego ustawiania szerokości elementu canvas zależności od wielkości elementu nadrzędnego. jednak jestem w rozterce, gdy próbuje aby wymyślić sposób, aby uzyskać dostęp do zdarzenia zmiany rozmiaru mogę dodać do obsługi z punktu widzenia elementu niestandardowego. nie wydaje się, aby uzyskać dostęp do window.on.resize z dowolnego miejsca wewnątrz elementu niestandardowego. Czy muszę zrobić to z zewnątrz

Oto przykład definicji elementu polimer:

<polymer-element name="canvas-viewport"> 
    <template> 
    <style> 
     @host{ 
     :scope { 
      margin:0px; 
      padding:0px; 
      display:block; 
      position:relative; 
      width:100%; 
      height:100%; 
      background:limegreen; 
      overflow:visible; 
      border:0; 
     } 
     } 

     div { 
     border:0; 
     margin:0px; 
     padding:0px; 
     width:100%; 
     height:100%; 
     } 

    </style> 
<div id="container"> 
     <canvas width="{{wpWidth}}" height="{{wpHeight}}" id="theCanvas"></canvas> 
    </div> 
    </template> 
    <script type="application/dart" src="canvas_viewport.dart"></script> 
</polymer-element> 

Oto niektóre kody dartów w dołączonej definicji klasy polimerów, które próbują poradzić sobie ze zmianą rozmiaru, którą wykonałem w oparciu o sugerowane rozwiązanie tego pytania.

@override 
void attached() { 
    super.attached(); 
    viewPortContainer = shadowRoot.querySelector("#container"); 
    window.onResize.listen(resizecontainer); 
} 


void resizecontainer(Event e){ 
    wpWidth = viewPortContainer.clientWidth; 
    wpHeight = viewPortContainer.clientHeight; 
    print("resizing Width:$wpWidth , Height:$wpHeight ");  
} 

jednak skutkuje to bug gdzie wysokość rośnie od trzech pikseli w każdym razie zmiana rozmiaru, chociaż marże i podkładki są ustawione na zero.

Answer 1

OnResize działa na mnie wewnątrz elementu niestandardowego.

@override 
void attached() { 
    super.attached(); 
    window.onResize.listen((e) { 
    print(e.currentTarget.innerWidth); 
    }); 
}