Угловой 7 поповер загрузки

Question

Я использую fabricjs для загрузки изображения и текстового содержимого.

У меня много текстового содержимого на холсте с фабрикой.

теперь при щелчке текстового содержимого fabricjs, которое я хочу открыть, Angular 7 popover может быть (ngbPopover).

как открыть это по клику текстового содержания, как мы открываем диалоговое окно?

, потому что я не могу ввести конфигурацию popover в любом месте в fabricjs.

Answer 1

На самом деле я пытался сказать что-то вроде этого, и я нашел решение здесь.

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);
                                });

Answer 2

У меня была похожая функциональность, но я нашел другой способ сделать это.

• При нажатии на текст, объект читает объект с помощью

  this.canvas.on ('object: selected', (e) => {this.objectSelected (e)});

• Затем сначала убедитесь, что текстовое поле / popover скрыто

• При щелчке объекта прочитайте выбранный объект по:

  var absCoords = this.canvas.getActiveObject ();

• Когда вы читаете активный объект, есть вещи, о которых вам придется позаботиться

  • Показать текстовое поле / popover
  • получить absCoords.left и absCoords.top и установить его в текстовое поле.

Это один из обходных путей, который помог решить эту проблему.