Cómo hacer clic a través de un objeto telajs para seleccionar el objeto debajo de él (sin utilizar la propiedad evento)

Question

¿Cómo se hace un objeto de telajs  bloqueado  tal que: No es seleccionable (obj.selectable = falso) Permite 'mousedown' evento para el clic derecho (obj.evented debe ser cierto) No hay estado/evento de manguera (la musa no detecta esta obj en el acaparamiento o cambia el cursor) Permite que el ratón haga clic en objetos debajo de él (el ratón puede acceder a los objetos a través de él) Traté de buscar el código que trata de la prop  evented , pero no pude encontrarlo en la fuente. La propiedad evento hace que el objeto sea transparente (es decir, capaz de hacer clic a través de él), pero elimina el evento 'mousedown'. Esto es necesario en mi situación donde necesito implementar un menú contextual con función de bloqueo/desbloqueo de objetos. Si el objeto está bloqueado, todavía necesita ser capaz de hacer clic derecho en él para mostrar el menú contextual de nuevo para que pueda desbloquearlo. Además, cuando está bloqueado, necesita ser capaz de acceder y hacer clic en objetos debajo de él. Fabricjs 3.6.6 Editar:Me han dicho que esto no es posible fuera de la caja por tela y algún código personalizado debe ser escrito para añadir esta capacidad, según corresponda: https://github.com/fabricjs/fabric.js/issues/6734

Gpt · Accepted Answer

Según la información proporcionada, parece que no es posible lograr el comportamiento deseado directamente con Fabric.js sin escribir código personalizado. Para lograr que un objeto en tela.js sea "bloqueado" pero permita que los clics pasen a través de él para seleccionar objetos debajo, tendrás que implementar una solución personalizada.

Un enfoque posible sería capturar el evento de mousedown en el objeto superior y luego simular un clic en el objeto subyacente. Esto implica detectar el objeto subyacente en la posición del clic y activar su evento de clic manualmente.

Aquí te dejo un ejemplo de cómo podrías abordar esto:

Capturar el evento de mousedown en el objeto "bloqueado":

javascript
obj.on('mousedown', function (options) {
    var pointer = canvas.getPointer(options.e);
    var target = canvas.findTarget(pointer, true);

    if (target && target !== obj) {
        // Simular un clic en el objeto subyacente
        target.fire('mousedown', {});
    }
});

Asegúrate de que el objeto "bloqueado" tenga `evented: true` y `selectable: false` para permitir la detección del evento mousedown y bloquear la selección del objeto.

Este enfoque puede requerir ajustes adicionales según tus necesidades específicas y la estructura de tu aplicación. Recuerda que esta solución implica escribir cierto código personalizado para lograr el comportamiento deseado.

Respondida el Dec 19, 2020 a las 09:50 - por Gpt

Gemini · Answer

Esta es una limitación conocida en Fabric.js, donde un objeto "bloqueado" con selectable = false no permite que los eventos de clic pasen a través de él.

Para resolver este problema, puedes utilizar una solución personalizada que implique la siguiente lógica:

Crea un objeto "invisible" superpuesto: Crea un objeto rectangular transparente con `selectable = false` y `evented = false` que cubra el objeto bloqueado. Esto bloqueará los eventos de clic del objeto bloqueado.

Añade un evento de `mousedown` al objeto invisible: Cuando se hace clic en el objeto invisible, activa el menú contextual.

Configura la propiedad `pointerEvents`: Para permitir que los eventos de clic pasen a través del objeto bloqueado, establece la propiedad `pointerEvents` del objeto invisible en `'none'`.

Aquí tienes un ejemplo de código que implementa esta solución:

javascript
fabric.util.object.extend(fabric.Object.prototype, {
  makeUnselectableWithClickThrough: function() {
    // Crea un objeto invisible superpuesto
    var overlay = new fabric.Rect({
      width: this.width,
      height: this.height,
      fill: 'transparent',
      selectable: false,
      evented: false,
      originX: 'left',
      originY: 'top'
    });
    overlay.set({left: this.left, top: this.top});

    // Añade un evento de 'mousedown' al objeto invisible
    overlay.on('mousedown', function(e) {
      // Activa el menú contextual
      // ... tu código personalizado ...
    });

    // Establece la propiedad 'pointerEvents' en 'none'
    overlay.set('pointerEvents', 'none');

    // Agrupa el objeto invisible con el objeto bloqueado
    this.add(overlay);
  }
});

Para utilizar esta solución, simplemente llama al método makeUnselectableWithClickThrough en el objeto que deseas bloquear, por ejemplo:

javascript
myObject.makeUnselectableWithClickThrough();

Ten en cuenta que esta solución aún permite que se seleccione el objeto bloqueado haciendo clic en sus bordes, pero no en su área interior.

Respondida el Dec 19, 2020 a las 10:01 - por Gemini

Cómo hacer clic a través de un objeto telajs para seleccionar el objeto debajo de él (sin utilizar la propiedad evento)

2 Respuestas: