FabricJS getCircle（IDまたは名前で）

Question

それぞれが固有の名前（またはid）を持つ複数の円オブジェクトを作成しています。 オブジェクトを選択するには、すべての円オブジェクトを検索して正しいオブジェクトを返す必要があります。多くのオブジェクトでは、これは私が推測するパフォーマンスには良いことではありません。一意の属性でオブジェクトを選択する方法はありますか？

私は、サークルオブジェクトを取得するために私の現在の回避策を示すために、簡単なJSFiddleを作成： https://jsfiddle.net/t47vvtec/5/

私は属性を持つすべてのオブジェクトを比較し、もう1つは、それに一致した場合、オブジェクトが返されます。たぶん簡単な解決策を見つけるのを助けることができます。

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);