Javascript fabric.js 一行的函数属性

Question

我对 javascript 有点陌生，所以只是想在这里学习，但为什么一个函数 return 是一个值，而另一个不会？让我进一步解释：

例如：

'''
canvas.on({
    'object:moved': updateNewLineCoordinates,
    'selection:created': updateNewLineCoordinates,
    'selection:updated': updateNewLineCoordinates,
    'mouse:dblclick': addingControlPoints
});
'''

当我双击鼠标时执行此函数

'''
function addingControlPoints(o) {
    let obj = o.target;  // Object is defined without issue.
    console.log(obj);
}
'''

控制台输出我双击的行的属性。

但是，当我select行时，这个函数执行：

'''
function updateNewLineCoordinates(o) {
let obj = o.target;  // Object is Undefined, why?
console.log(obj);
'''

控制台输出对象未定义。我无法理解“为什么”？

Answer 1

原因是 selection 事件的形状与常规鼠标事件略有不同。当您单击鼠标时，会触发一个事件，告诉您单击的是什么。鼠标事件在 Javascript 中非常标准，但 Fabric 为事件提供 subTargets 属性以防您的点击同时触及多个目标。

Fabric 的 selection 事件，预计 return list selection 中的对象。了解正在发生的事情的一个好方法是转到 FabricJS Events demo 并取消选中除 selection 事件之外的所有内容。您会看到 selection: create return 是一个对象，其中属性 e 表示事件，selected 数组表示 selection 中的所有内容.

当你select点击canvas中的某物时，mouse:down事件的target属性将与canvas中的对象相同selection: created 事件的 selected 数组，也将被触发。相比之下，当您执行 click-and-drag select 时，selection:created 可能包含比启动 selection 的 mouse:down 更多的对象。

Javascript fabric.js 一行的函数属性

Javascript fabric.js function properties of a line

javascript

fabricjs