Question

允许多个Polymer元素访问公共画布的最佳方法是什么？

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

内部my-element是document.getElementById({{myCanvas}}，然后开始绘制。

这是最好的方式还是有更好的MDV类型？

我看到的问题是封装了Web组件，因此封装组件之间的标识字符串无效。

Answer 1

你是对的，如果<canvas id="myCanvas"></canvas>在另一个影子dom子树中，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>内。这个woudld允许您将canvas DOM元素数据绑定到my-element的canvas已发布属性（属性）：

<canvas id="myCanvas"></canvas>
<my-element canvas="{{$.myCanvas}}"></my-element>

使用Polymer元素渲染到常见画布

1 个答案: