Soy un poco nuevo en javascript, así que solo trato de aprender aquí, pero ¿por qué una función devuelve un valor, pero la otra no? Permítanme explicar más:
Por ejemplo:
''' canvas.on({ 'object:moved': updateNewLineCoordinates, 'selection:created': updateNewLineCoordinates, 'selection:updated': updateNewLineCoordinates, 'mouse:dblclick': addingControlPoints }); '''Cuando hago doble clic con el mouse, esta función se ejecuta
''' function addingControlPoints(o) { let obj = o.target; // Object is defined without issue. console.log(obj); } '''La consola muestra las propiedades de la línea en la que hice doble clic.
Sin embargo, cuando selecciono la línea, esta función se ejecuta:
''' function updateNewLineCoordinates(o) { let obj = o.target; // Object is Undefined, why? console.log(obj); '''La consola muestra que el objeto no está definido. No puedo entender el "por qué"?
La razón es que los eventos de selección tienen una forma ligeramente diferente a los eventos normales del mouse. Cuando haces clic con el mouse, se activa un evento que te dice en qué se hizo clic. Los eventos del mouse son muy estándar en Javascript, pero Fabric otorga a los eventos una propiedad de subTargets en caso de que su clic toque varios objetivos a la vez.
Los eventos de selection de Fabric, esperan devolver una lista de objetos dentro de la selección. Una buena manera de hacerse una idea de lo que está pasando es ir a la demostración de FabricJS Events y desmarcar todo excepto los eventos de selection . Verá esa selection: create devuelve un objeto con una propiedad e que representa el evento y una matriz selected que representa todo dentro de la selección.
Cuando selecciona algo en el lienzo haciendo clic, la propiedad de target del evento mouse:down será la misma que el objeto en la matriz selected de la selection: created , que también se activará. Por el contrario, cuando hace una selección de hacer clic y arrastrar, la selection:created contendrá potencialmente muchos más objetos que el mouse:down que inició la selección.