FabricJS：对象控件直到常规选择才起作用

如何解决FabricJS：对象控件直到常规选择才起作用

我正在使用Vue和FabricJS创建产品配置器。

我已经使用

创建了画布

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

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

在将对象添加到画布（IText，文本框，图像，使用new fabric.IText(...)）并用鼠标选择它之后，我无法使用对象控件来调整对象的大小，缩放，倾斜或旋转。但是，我可以在画布上移动对象。添加另一个对象后，一次选择两个对象，然后再次取消选择，这些控件将突然按预期工作。我无法在JsFiddle上重现该问题，在那里一切正常。

Controls not working until both objects are selected

我使用各种浏览器发现了这个问题。

我是否缺少一些canvas属性，该属性在添加后立即启用？还是那是Fabric.js中的错误？

解决方法

一段时间后，我使用了一种解决方法： 我在创建画布后立即在画布上添加了一个空的辅助对象，然后在添加了每个新对象之后，以编程方式选择并取消了所有对象。之后，所有对象均行为正常。我知道这是一个“ 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();
});