9

Canvas 要素から拡張された「Viewport」タイプの要素を作成しようとしています。親コンテナーを満たすことを意図していましたが、それはそれほど簡単ではないようです。

canvas 要素は style="width:100%; height:100%" では機能しません (特別な Canvas の幅と高さの属性が設定されていない場合、既定値の 300x150 ピクセルに戻ります。または、100x100 になります)これらの属性を「100%」に設定しようとするとピクセル.これにより、親要素のサイズに応じてキャンバス要素の幅を手動で設定するタスクが残ります.ただし、カスタム要素の観点からハンドラーを追加できるサイズ変更イベントにアクセスする方法 カスタム要素内のどこからでも 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 ");    
}

ただし、これにより、マージンとパディングがゼロに設定されていても、サイズ変更イベントごとに高さが 3 ピクセル増加するというバグが発生します。

4

2 に答える 2

1

これが、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);
 }
于 2019-09-16T12:46:41.463 に答える