在 polymer 元素中处理调整大小事件的最佳实践是什么？

Question

我正在尝试创建一个“Viewport”类型的元素，这个元素是从Canvas元素扩展而来的。我想让它填充父容器，但这似乎不是很容易实现。

Canvas元素不能使用style="width:100%; height:100%"（如果没有设置特殊的Canvas宽度和高度属性，则会恢复为默认值300x150像素，或者如果我尝试将这些属性设置为"100%"，则会变成100x100像素）。这让我需要手动根据父元素的大小设置canvas元素的宽度。然而，当我尝试从自定义元素的角度找到可以添加处理程序的调整大小事件时，我却束手无策。我似乎无法从自定义元素内部的任何地方访问window.on.resize。我必须从外部进行操作吗？

以下是一个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>

以下是一段Dart代码，附带的Polymer类定义用于尝试处理我基于此问题建议的解决方案所做的大小调整。

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

然而，这会导致一个错误，即在每次调整大小事件时高度增加三个像素，尽管边距和填充设置为零。

- MrMambo007

Answer 1

在自定义元素内部，OnResize 对我很有效。

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

- Günter Zöchbauer

---

谢谢，这很有帮助——它提供了正确的位置来放置事件处理程序！然而，当我尝试将画布设置为与我放置画布元素的容器相同的宽度和高度时，它似乎会在每次调整大小事件（而不是宽度）时将容器的高度扩展三个像素。我已经将所有填充和边距都设置为0。 - MrMambo007

我最近用Camas实现了类似的东西，就像我在另一个帖子中发布的那样。我得检查一下3像素增长的问题，看看它是否也影响到我。周末我会回复答案的。 - Anders

Answer 2

这就是我在Polymer中实现它的方式。

 connectedCallback() {
    super.connectedCallback();
    this._onResize = this.onResize.bind(this);
    window.addEventListener("resize", this._onResize);
 }

 onResize(e) {
    console.log('width', e.currentTarget.innerWidth);
 }

 disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener("resize", this._onResize);
 }

- Divyanshu Rawat

---

适用于Polymer 2.0（我只在Polymer 2.0中进行了测试） - Derk Jan Speelman

它应该在 Polymer 3.0 中也能工作，我在那里使用过它。 - Divyanshu Rawat