FabricJS:对象控件在公共选择之前不起作用

Question

我正在使用Vue和FabricJS创建一个产品配置程序。

我使用创建了一个画布

this.canvas = new fabric.Canvas("canvas");

<template>
<div id="wrapper">
<div id="left"></div>
<canvas id="canvas"/>
</div>
</template>

在我将对象添加到画布(IText、Textbox、Image，使用new fabric.IText(...)(并用鼠标选择后，我无法使用对象控件来调整对象大小、缩放、扭曲或旋转对象。但是，我可以在画布上移动对象。在我添加另一个对象后，同时选择这两个对象并再次取消选择，控件突然按预期工作。我没能在JsFiddle上重现这个问题，一切都在那里。

在选择两个对象之前，控件不起作用

我使用各种浏览器解决了这个问题。

我是否缺少一些画布属性，该属性在添加后立即启用？或者这是Fabric.js中的一个错误？

Answer 1

过了一段时间后，我使用了一个变通方法：我在创建一个空的辅助对象后立即将其添加到画布中，然后在添加每个新对象后，我用程序选择并取消选择所有对象。之后，所有对象都表现正确。我知道这是一个"；hack"；，但它有效：(

this.canvas = new fabric.Canvas("canvas", {
...canvasProps
});
const helperObj = new fabric.Object({});    //abstract invisible object
helperObj.set("selectable", false);         //so the user is not able to select and modify it manually
this.canvas.add(helperObj);
this.canvas.on("object:added", () => {
//workaround - selecting all objects to enable object controls
let objects = this.canvas.getObjects();
var selection = new fabric.ActiveSelection(objects, {
canvas: this.canvas,
});
this.canvas.setActiveObject(selection);   //selecting all objects...
this.canvas.discardActiveObject();        //...and deselecting them
this.canvas.requestRenderAll();
});