Как лучше всего обрабатывать события изменения размера в полимерном элементе?

Я пытаюсь создать элемент типа "Viewport", расширенный из элемента Canvas. Я хотел, чтобы он заполнил родительский контейнер, но это кажется не очень тривиальным.

Элемент холста не работает со стилем = "ширина: 100%; высота: 100%" (он вернется к значению по умолчанию 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>

Вот некоторый код дротика в сопроводительном определении класса полимера для попытки справиться с изменением размера, которое я сделал на основе предложенного решения этого вопроса.

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

Однако это приводит к ошибке, когда высота увеличивается на три пикселя при каждом изменении размера, даже если поля и отступы установлены на ноль.


dart canvas events resize dart-polymer
person MrMambo007    schedule 30.10.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

OnResize работает для меня внутри пользовательского элемента.

@override
void attached() {
  super.attached();
  window.onResize.listen((e) {
    print(e.currentTarget.innerWidth); 
  });
}
person Günter Zöchbauer    schedule 17.11.2013
comment
Спасибо, это было полезно - это обеспечивает правильное место для размещения обработчика событий! Однако при попытке установить для холста ту же ширину и высоту, которые я получаю из контейнера, в который я поместил элемент холста, кажется, что высота контейнеров увеличивается на три пикселя при каждом событии изменения размера (не ширина). Я установил все отступы и поля до 0. - person MrMambo007; 20.11.2013
comment
Недавно я применил аналогичную вещь с camas, о чем я писал в другой теме. Мне нужно проверить проблему роста на 3 пикселя, чтобы увидеть, влияет ли она и на меня. на выходных отпишусь с ответом - person Anders; 05.03.2014

arrow_upward
1
arrow_downward

Вот как я добьюсь этого в 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);
 }
person Divyanshu Rawat    schedule 16.09.2019
comment
Работает в Polymer 2.0 (я тестировал только в Polymer 2.0) - person Derk Jan Speelman; 17.09.2019
comment
Это должно работать и в Polymer 3.0, я использовал его там. - person Divyanshu Rawat; 17.09.2019