Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

260
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda