Polimer elemanındaki yeniden boyutlandırma olaylarını işlemek için en iyi uygulama nedir?

Question

Bir Canvas öğesinden uzatılmış "Viewport" tipi bir öğe oluşturmaya çalışıyorum. Ebeveyn konteynerini doldurmak için tasarladım, ama bu çok önemsiz görünmüyor.

Tuval öğesi style = "width: 100%; height: 100%" ile çalışmaz (özel Canvas genişliği ve height nitelikleri ayarlanmamışsa varsayılan değer 300x150 piksele döner. Bu öznitelikleri "% 100" olarak ayarlamaya çalışırsam 100x100 piksele gidersiniz.Bu, ana elemanın boyutuna göre tuval öğesinin genişliğini manuel olarak ayarlama göreviyle beni bırakır.Ancak çalışırken bir kaybım var Özel bir öğenin perspektifinden bir işleyici ekleyebileceğim bir yeniden boyutlandırma olayına erişmenin bir yolunu bulmak için window.on.resize öğesine özel öğenin herhangi bir yerinden erişmeyi göze alıyorum. Dışardan gelen bu örnek:

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

Bu soruna önerilen bir çözüm temelinde yaptığım yeniden boyutlandırmayı işlemeye çalışmak için, eşlik eden polimer sınıfı tanımında bazı dart kodu verilmiştir.

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

Ancak bu yükseklik marjları ve kenarların, sıfıra ayarlanmış olsa bile, her boyutlandırmak olayı üç piksel büyür bir hata ile sonuçlanır.

Answer 1

OnResize, özel bir öğe içinde benim için çalışır.

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