폴리머 요소의 크기 조정 이벤트를 처리하는 가장 좋은 방법은 무엇입니까?

Question

Canvas 요소에서 확장 된 "뷰포트"유형 요소를 만들려고합니다. 나는 그것이 부모 컨테이너를 채우려는 의도 였지만 그렇게 사소하지는 않다.

canvas 요소는 style = "width : 100 %; height : 100 %"와 작동하지 않습니다 (특수 캔버스 너비와 높이 특성이 설정되지 않은 경우 기본값 300x150 픽셀로 되돌아갑니다. 그 속성을 "100 %"로 설정하려고하면 100x100 픽셀이됩니다. 이로 인해 부모 요소의 크기에 따라 캔버스 요소의 너비를 수동으로 설정하는 작업이 필요합니다. 그러나 시도 할 때 손실이 발생합니다. resize 이벤트에 액세스하는 방법을 알아 내기 위해 사용자 정의 요소의 관점에서 핸들러를 추가 할 수 있습니다. 사용자 정의 요소 내의 window.on.resize에 액세스 할 수있는 권한이없는 것 같습니다. 이것은 외부로부터입니까?

다음은 폴리머 요소 정의의 예입니다 :

여기

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

나는이 질문에 대한 제안 된 솔루션을 기반으로 만들어진 크기 조정을 처리하려고에 첨부 된 폴리머 클래스 정의의 일부 다트 코드입니다.

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

그러나 이것은 높이 마진 가스켓이 0으로 설정되는 경우에도, 각각의 크기를 일정 세 픽셀 씩 증가 버그 초래한다.

Answer 1

OnResize는 맞춤 요소 내에서 작동합니다.

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