Question

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

我用fabric.js在画布上有很多文本内容。

现在我要打开Angular 7弹出窗口时单击fabricjs的textcontents可能是（ngbPopover）。

如何像单击对话框一样打开文本内容？

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

Answer 1

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

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

this.canvas.on（'object：selected'，（e）=> {this.objectSelected（e）}）;
然后从头开始确保文本框/弹出框被隐藏
单击对象时，通过以下方式读取所选对象：

var absCoords = this.canvas.getActiveObject（）;
当您阅读活动对象时，您需要注意一些事情
- 取消隐藏文本框/弹出框
- 获取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 Popover加载

2 个答案: