Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

375
Vistas
Detect collision between two text object (not the bounding box)

I'm trying to check for a collision between 2 text objects and using the intersectsWithObject. It's working but it's taking the bouding rect into account. Is it possible to check on pixel level?

Current behaviour:

enter image description here

Wanted behaviour:

enter image description here

const canvas = new fabric.Canvas('canvas');
canvas.setWidth(document.body.clientWidth);
canvas.setHeight(document.body.clientHeight);


const text = new fabric.Textbox('some text', {
  width: 300,
  fontSize: 70,
  top: 120,
  left: 100
});

const text2 = new fabric.Textbox('some more text', {
  width: 350,
  fontSize: 50,
  top: 200,
  left: 20,
})


if (text.intersectsWithObject(text2, true, true)) {
  text.set('fill', 'red');
}
else {
  text.set('fill', 'black');
}

canvas.on('after:render', function() {
  canvas.contextContainer.strokeStyle = '#555';

  canvas.forEachObject(function(obj) {
    var bound = obj.getBoundingRect();

    canvas.contextContainer.strokeRect(
      bound.left + 0.5,
      bound.top + 0.5,
      bound.width,
      bound.height
    );
  })
});


canvas.add(text);
canvas.add(text2);

https://jsbin.com/menadejato/edit?js,console,output

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda