Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

264
Views
fabricjs how to double-click a picture(or rect) to edit text and name it

How to combine images and text with fabricjs and edit text when double clicking the combined object, Still combine after editing text, Please tell me how to edit text when rendering image and text combinations

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
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Based on your requirements, you can

  1. Create a subclass of Image class (or whatever object that you need to attach a label to)
  2. Make it create an instance of IText or Textbox and save an internal reference to it
  3. By hooking into the event handlers on the image (e.g. double click), manually manage the events of the text. Make sure to keep the position and dimensions of the text updated when the image is modified.

Take a look at this answer: Resize Fabric Rect without resizing Textbox. It does something very similar to what you've described.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!