Question

如何在光标位置找到光纤组内的对象？

假设以下画布初始化：

var text = new fabric.Text('Hello');
var rect = new fabric.Rect({width: 100, height: 50});
var group = new fabric.Group([text, rect], {
    left: 150, top: 100, angle: -10
});
canvas.add(group);

现在我想检测光标下面的对象（即text或rect）。如下所示：

canvas.on('mouse:move', myFunc);
myFunc = function(o) {
   var target = canvas.findTarget(o.e);
   if (target.type === 'group') {
       var obj = group.findTarget(o.e);
       // obj should be now either rect, text or null
   } 
}

但是，我找不到像group.findTarget这样的函数。

Answer 1

我知道已经晚了。但可能会对其他人有所帮助。感谢asturur，他提出了一个解决方案。 solution

我从asturur repo下载了fabricjs。 build fabric.js文件

node build.js modules=ALL exclude=json,gestures

它有效！

然后，您可以在组中的对象上使用事件。

canvas._objects[0]._objects[0].on('mousedown', function(e){ this.stroke = 'black'});

在我的应用程序中，我决定从mousedown回调中搜索事件

group.on('mousedown', function(e){
    var innerTarget  = group._searchPossibleTargets(e.e);
    console.log(innerTarget);
});

group._searchPossibleTargets = function(e) {
    var pointer = this.canvas.getPointer(e, true);
    var i = objects.length,
        normalizedPointer = this.canvas._normalizePointer(this, pointer);

    while (i--) {
        if (this.canvas._checkTarget(normalizedPointer, this._objects[i])) {
            return this._objects[i];
        }
    }
    return null;
}

FabricJS：按光标位置查找组中的对象

1 个答案: