Question

我正在尝试创建一个从Canvas元素扩展的“Viewport”类型元素。我打算用它填充父容器，但这似乎不是很简单。

canvas元素不适用于style =“width：100％; height：100％”（如果未设置特殊的Canvas宽度和height属性，它将恢复为默认值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>

以下是随附的聚合物类定义中的一些dart代码，用于尝试根据此问题的建议解决方案处理我所做的调整大小。

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

然而，这导致每个resize事件的高度增加三个像素的错误，即使边距和填充设置为零。

Answer 1

OnResize在自定义元素中为我工作。

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

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

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

2 个答案: