Рендеринг на общий холст с полимерными элементами

Как лучше всего разрешить нескольким элементам Polymer доступ к общему холсту?

<canvas id="myCanvas"></canvas>
<my-element canvas="myCanvas"></my-element>

Внутри my-element делает document.getElementById({{myCanvas}} и затем начинает рисовать к нему.

Это лучший способ или есть лучший способ типа MDV?

Проблема, которую я вижу в этом, заключается в том, что веб-компоненты инкапсулированы, поэтому строка идентификации будет недействительной между компонентами инкапсуляции.


javascript canvas polymer
person Matt Clarkson    schedule 22.05.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы правы, что если <canvas id="myCanvas"></canvas> находится в другом поддереве теневого дома, document.getElementById('myCanvas') его не найдет. Вместо этого вы могли бы использовать document.querySelector('body /deep/ #myCanvas'), но это ненадежно и находит только первый #myCanvas в любом месте теневого дерева.

Лучшим подходом было бы установить свойство .canvas снаружи:

<canvas id="myCanvas"></canvas>
<my-element></my-element>

document.addEventListener('polymer-ready', function() {
  document.querySelector('my-element').canvas = document.querySelector('#myCanvas');
});

Другая вещь, которую мы обычно делаем, — это объединение элементов внутри другого <polymer-element>. Это позволит вам привязать данные элемента DOM холста к опубликованному свойству (атрибуту) canvas моего элемента:

<canvas id="myCanvas"></canvas>
<my-element canvas="{{$.myCanvas}}"></my-element>
person ebidel    schedule 22.05.2014
comment
Я просто сидел дома и думал, интересно, смогу ли я привязаться к $.myCanvas... кажется, вы подтвердили это! Спасибо за вашу работу с веб-компонентами/отношениями разработчиков полимеров. - person Matt Clarkson; 23.05.2014
comment
Я никогда не думал привязываться напрямую к свойству $! Это должен быть профессиональный совет или что-то в документации, если это еще не сделано :) - person CletusW; 24.05.2014