Есть ли способ добавить внешние объекты DOM (например, <div>) на сцену или слой? - PullRequest
Новая
       52

Есть ли способ добавить внешние объекты DOM (например, <div>) на сцену или слой?

1 голос
/ 11 ноября 2019

Я пытаюсь добавить динамические изображения в Konva. Я использую плагин Apache Echarts. Контейнер этих изображений обычно является элементом div. Есть ли способ добавить div в слой Konva?

Ответы [ 2 ]

1 голос
/ 11 ноября 2019

Глядя на этот пример эхарта с использованием inspect в браузере, можно увидеть, что 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 вне экрана и использовать метод canvas.toDataURL этого echarts canvas, чтобы получить изображение, а затем передать его объекту изображения Konva. В API echarts есть триггеры событий, которые вы можете прослушивать, чтобы знать, когда их выполнять. Таким образом, это превращает проблему в «как нарисовать содержимое холста A в форму изображения на холсте B».

Однако я отмечаю, что есть анимации, которые, возможно, являются частью того, что вы хотели бы сохранить дляхороший UX, и в этом случае вы можете захотеть вернуться к сохранению простого HTML-div и расположить его над холстом Konva и т. д. согласно ответу @ lavrton.

1 голос
/ 11 ноября 2019

Вы не можете добавлять элементы DOM в сцену Konva. Так что <div> не может быть потомком сцены или слоя.

Но вы можете <div> на вершине Konva.Stage с абсолютной позицией и контролировать его вручную.

Существуетдемонстрация добавления <textarea> поверх холста: https://konvajs.org/docs/sandbox/Editable_Text.html

...