fabricjs如何双击图片（或矩形）来编辑文本并命名

Posted 2023-03-25

【中文标题】fabricjs如何双击图片（或矩形）来编辑文本并命名

【英文标题】：fabricjs how to double-click a picture(or rect) to edit text and name it

【发布时间】：2022-01-05 18:23:24

【问题描述】：

如何用fabricjs组合图像和文本，双击组合对象时编辑文本， 编辑文本后仍然合并， 请告诉我如何在渲染图像和文本组合时编辑文本

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

// a rect
const rect = new fabric.Rect(
  stroke: "#000",
  strokeWidth: 1,
  fill: "#ccc",
  left: 170,
  top: 80,
  width: 50,
  height: 50
);

// a text for describe rect
const text = new fabric.IText("describe rect", 
  fontFamily: "Comic Sans",
  fontSize: 14,
  stroke: "#000",
  strokeWidth: 1,
  fill: "#000",
  left: 170,
  top: 80
);

// 1 Combine the above two things but can not edit text

// 2 use LabeledRect also

【参考方案1】：

根据您的要求，您可以

创建 Image 类的子类（或您需要附加标签的任何对象） 使其创建 IText 或 Textbox 的实例并保存对其的内部引用 通过挂钩图像上的事件处理程序（例如双击），手动管理文本事件。确保在修改图像时保持文本的位置和尺寸保持更新。

看看这个答案：Resize Fabric Rect without resizing Textbox。它的作用与您所描述的非常相似。