Qual è la procedura migliore per gestire gli eventi di ridimensionamento in un elemento polimerico?

Question

Sto provando a creare un elemento di tipo "Viewport" esteso da un elemento Canvas. Intendevo che riempisse il contenitore genitore, ma non sembra molto banale.

L'elemento canvas non funziona con style = "width: 100%; height: 100%" (ripristinerà un valore predefinito di 300x150 pixel se la larghezza speciale della canvas e gli attributi height non sono impostati, oppure andrà a 100x100 pixel se provo a impostare quegli attributi su "100%" .Questo mi lascia con il compito di impostare manualmente la larghezza dell'elemento canvas in base alla dimensione dell'elemento genitore.Tuttavia sono in perdita quando provo per capire come accedere ad un evento di ridimensionamento potrei aggiungere un gestore dalla prospettiva dell'elemento personalizzato. Non riesco ad accedere a window.on.resize da nessuna parte all'interno dell'elemento personalizzato. Devo fare

Ecco una definizione di elemento polimerico di esempio:

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

Ecco alcuni codici dardo nella definizione di classe del polimero di accompagnamento per tentare di gestire il ridimensionamento che ho creato in base a una soluzione suggerita per questa domanda.

@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 ");  
} 

Tuttavia questo si traduce in un errore dove l'altezza cresce da tre pixel di ciascun evento ridimensionare, anche se i margini e padding sono impostati a zero.

Answer 1

OnResize funziona per me all'interno di un elemento personalizzato.

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