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

Posted 2023-03-25

【中文标题】FabricJS：对象控件在共同选择之前不起作用

【英文标题】：FabricJS: Object controls not working until common selection

【发布时间】：2021-02-18 03:50:04

【问题描述】：

我正在使用 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

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

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

【问题讨论】：

能否请您在 sn-p 中添加代码，您是如何将对象添加到画布的？

【参考方案1】：

一段时间后，我使用了一种解决方法： 我在创建它之后立即向画布添加了一个空的辅助对象，然后在添加每个新对象后，我以编程方式选择并取消选择所有这些对象。之后，所有对象的行为都正确。我知道这是一个“黑客”，但它有效:)

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

【讨论】：

谢谢，这个答案真的帮助了我