FabricJS：对象控件在共同选择之前不起作用

Question

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

我使用

创建了一个canvas

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

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

在我将对象添加到 canvas（IText、文本框、图像，使用 new fabric.IText(...)）并使用鼠标 select 之后，我无法使用对象控件来调整、缩放、倾斜或旋转对象。但是，我可以在 canvas 上移动对象。在我添加另一个对象后，同时 select 和 deselect 再次，控件突然按预期工作。我无法在 JsFiddle 上重现该问题，一切正常。

Controls not working until both objects are selected

我使用各种浏览器遇到了这个问题。

我是否遗漏了一些 canvas 属性，添加后立即启用？还是 Fabric.js 中的错误？

Answer 1

一段时间后，我使用了一个解决方法：我在创建 canvas 后立即向 canvas 添加了一个空的辅助对象，然后在添加每个新对象后我以编程方式 select 和 deselect 所有这些对象。之后所有对象都正常运行。我知道这是一个“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();
});

FabricJS：对象控件在共同选择之前不起作用

FabricJS: Object controls not working until common selection

javascript

vue.js

canvas

controls

fabricjs