Angular 7个弹窗加载

Question

我正在使用 fabricjs 加载图像和文本内容。

我在 canvas 上用 fabricjs 有很多文本内容。

现在单击 fabricjs 的文本内容我想打开 Angular 7 popover 可能是 (ngbPopover)。

如何在点击文本内容时打开它，就像我们打开对话框一样？

因为我无法在 fabricjs 的任何地方注入 popover 配置。

Answer 1

我有类似的功能要做，但我找到了另一种快捷方式。

单击文本时，对象通过使用读取对象

this.canvas.on('object:selected', (e) => {this.objectSelected(e)});
然后首先确保 textbox/popover 被隐藏
单击对象时通过以下方式读取所选对象：

var absCoords = this.canvas.getActiveObject();
当您阅读活动对象时，有些事情您需要注意
- 取消隐藏 textbox/popover
- 获取absCoords.left和absCoords.top并将其设置到文本框。

这是帮助解决问题的变通办法之一。

Answer 2

其实我想说的是这样的，我在这里找到了解决方案。

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

Angular 7个弹窗加载

Angular 7 popover loading

javascript

popover

fabricjs

angular-material

angular