Thực hành tốt nhất để xử lý các sự kiện thay đổi kích thước trong một phần tử polymer là gì?

Question

Tôi đang cố gắng tạo phần tử loại "Chế độ xem" được mở rộng từ phần tử Canvas. Tôi dự định cho nó để điền vào các thùng chứa cha mẹ, nhưng điều đó có vẻ không phải là rất tầm thường.

Yếu tố canvas không hoạt động với style = "width: 100%; height: 100%" (nó sẽ hoàn nguyên về giá trị mặc định là 300x150 pixel nếu chiều rộng Canvas đặc biệt và thuộc tính độ cao không được đặt hoặc sẽ đi tới 100x100 pixel nếu tôi cố gắng đặt các thuộc tính đó thành "100%". Điều này khiến tôi có nhiệm vụ đặt chiều rộng của phần tử canvas theo cách thủ công theo kích thước của phần tử gốc. Tuy nhiên, tôi đang gặp khó khăn khi thử để tìm ra cách để truy cập sự kiện thay đổi kích cỡ, tôi có thể thêm một trình xử lý từ quan điểm của phần tử tùy chỉnh. Tôi dường như không có quyền truy cập vào window.on.resize từ bất kỳ đâu trong phần tử tùy chỉnh. điều này từ bên ngoài?

Dưới đây là ví dụ về định nghĩa phần tử polymer:

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

Dưới đây là một số mã phi tiêu trong định nghĩa lớp polymer đi kèm để cố gắng xử lý thay đổi kích thước mà tôi đã thực hiện dựa trên giải pháp được đề xuất cho câu hỏi này.

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

Tuy nhiên điều này dẫn đến lỗi có chiều cao tăng 3 pixel trên mỗi sự kiện thay đổi kích thước, mặc dù lề và đệm được đặt bằng 0.

Answer 1

OnResize hoạt động cho tôi bên trong phần tử tùy chỉnh.

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