javascript - FabricJS getCircle 按 Id 或名称

Question

我正在创建多个圆形对象，每个对象都有一个唯一的名称(或 ID)。当我想选择一个对象时，我必须搜索所有圆形对象并返回正确的对象。对于许多对象，我猜这不利于性能。有没有办法通过唯一属性选择对象？

我创建了一个简单的 JSFiddle 来展示我当前获取圆形对象的解决方法: https://jsfiddle.net/t47vvtec/5/

我将每个对象与属性进行比较，如果匹配，则返回该对象。也许你可以帮我找到一个更简单的解决方案。

到目前为止，这是我获取对象的代码:

function getPoint(name) 
{
    var line_point_array = canvas.getObjects('circle');

    for (var i = 0; i < line_point_array.length; i++) {
        var point = line_point_array[i];

        if (point.name == name) {
            return point;
        }
    }
}

谢谢:)

Answer 1

您可以尝试类似 ( https://jsfiddle.net/cssimsek/akbe97c5/1/ ) 的方法:

var FabricCanvasObject = function(canvasId, attrSet) {
    this.theCanvas = new fabric.Canvas(canvasId, attrSet);
    this.addShape = function(shapeAttrSet) {
        var newShape = this.theCanvas.add(new fabric.Circle(shapeAttrSet));
        this.canvasElements.length += 1;
        this.canvasElements[shapeAttrSet.name + this.canvasElements.length] = newShape;
    };
    this.canvasElements = { length: 0 };
};
var myFabric = new FabricCanvasObject('c', {
    targetFindTolerance: 15
});
console.log(myFabric);
myFabric.addShape({
    radius: 20,
    fill: 'green',
    left: 100,
    top: 100,
    name: 'circle',
    id: 1
});
myFabric.addShape({
    radius: 20,
    fill: 'red',
    left: 150,
    top: 150,
    name: 'circle',
    id: 2
});
myFabric.addShape({
    radius: 20,
    fill: 'blue',
    left: 200,
    top: 200,
    name: 'circle',
    id: 3
});
console.log(myFabric.canvasElements);
console.log(myFabric.canvasElements.circle1);