Angular 7 всплывающая загрузка
Я использую Fabricjs для загрузки изображения и текстового содержимого.
У меня много текстового содержимого на холсте с Fabricjs.
теперь при щелчке текстового содержимого Fabricjs я хочу открыть всплывающее окно Angular 7 (ngbPopover).
как открыть это при нажатии на текстовое содержимое, например, мы открываем диалоговое окно?
потому что я не могу внедрить конфигурацию всплывающего окна куда угодно в Fabricjs.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
У меня была похожая функциональность, но я нашел другой способ сделать это.
- При щелчке по тексту объект считывает объект с помощью
this.canvas.on('object:selected', (e) => {this.objectSelected(e)});
Затем изначально убедитесь, что текстовое поле/всплывающее окно скрыто
При щелчке объекта прочитайте выбранный объект:
var absCoords = this.canvas.getActiveObject();
Когда вы читаете активный объект, вам нужно позаботиться о некоторых вещах.
- показать текстовое поле / всплывающее окно
- получить
absCoords.leftиabsCoords.topи установить его в текстовое поле.
Это один из обходных путей, который помог решить эту проблему.
На самом деле я пытался сказать что-то вроде этого, и я нашел решение здесь.
const showImageTools = (e) => {
const content = '<div id = "imageDialog" class = "container">\n' +
' <mat-form-field class = "example-full-width">\n' +
' <input value = "' + pngText.texts + '" id = "textInputField" style = "width: 400px;\n' +
' box-shadow: 2px 4px 5px 3px #bdc3bdee;height: 50px;\n' +
' padding: 5px;\n' +
' border-radius: 5px;" matInput placeholder = "Add your texts"/>\n' +
' </mat-form-field>\n' +
' </div>';
$("body").append(content);
moveImageTools();
};
this.canvas.add(pngText).renderAll();
pngText.on('mousedown', event => {
showImageTools(event);
});