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

Question

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

Answer 1

您不能将 DOM 元素添加到Konva场景中。所以<div>不能是stage或layer的child。

但是您可以<div>在Konva.Stage绝对位置之上并手动控制它。

有一个<textarea>在画布顶部添加的演示：https : //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"

    style="-webkit-tap-highlight-color: transparent; user-select: none;">

    <div

        style="position: relative; overflow: hidden; width: 1132px; height: 569px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">

        <canvas data-zr-dom-id="zr_0" width="1132" height="569"

            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>

    </div>

</div>

因此，您可以将主机 div 放置在屏幕外，并使用该 echarts 画布的 canvas.toDataURL 方法来抓取图像，然后将其提供给 Konva 图像对象。查看 echarts API，您可以监听事件触发器以了解何时执行。所以这把问题变成了“如何将画布 A 的内容绘制成画布 B 上的图像形状”。

但是，我注意到有些动画可能是您想要维护良好 UX 的一部分，在这种情况下，您可能希望恢复保留纯 HTML div 并将其定位在 Konva 画布上方等，按照@lavrton 的回答。