有没有办法将外部 DOM 对象（即 <div>）添加到舞台或图层？

Question

我正在尝试将动态图像合并到 Konva。我使用的插件是 Apache Echarts。这些图像的容器通常是一个 div 元素。有没有办法将 div 添加到 Konva 层？

Answer 1

您不能将 DOM 元素添加到Konva场景中。所以<div>不能是stage或layer的child。但是您可以<div>在Konva.Stage绝对位置之上并手动控制它。有一个<textarea>在画布顶部添加的演示：https&nbsp;:&nbsp;//konvajs.org/docs/sandbox/Editable_Text.html

Answer 2

查看这个在浏览器中使用inspect的echart示例，可以看到echarts插入了一个canvas元素——这里是DOM的副本，注意canvas元素。<div id="chart-panel" class="right-panel" _echarts_instance_="ec_1573495851087"&nbsp; &nbsp; style="-webkit-tap-highlight-color: transparent; user-select: none;">&nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; style="position: relative; overflow: hidden; width: 1132px; height: 569px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">&nbsp; &nbsp; &nbsp; &nbsp; <canvas data-zr-dom-id="zr_0" width="1132" height="569"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style="position: absolute; left: 0px; top: 0px; width: 1132px; height: 569px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>&nbsp; &nbsp; </div></div>因此，您可以将主机 div 放置在屏幕外，并使用该 echarts 画布的 canvas.toDataURL 方法来抓取图像，然后将其提供给 Konva 图像对象。查看 echarts API，您可以监听事件触发器以了解何时执行。所以这把问题变成了“如何将画布 A 的内容绘制成画布 B 上的图像形状”。但是，我注意到有些动画可能是您想要维护良好 UX 的一部分，在这种情况下，您可能希望恢复保留纯 HTML div 并将其定位在 Konva 画布上方等，按照@lavrton 的回答。