4

キャンバスの外側に 6 つのオブジェクトとボタンを含むキャンバスがあるとします。

このボタンをクリックすると、このオブジェクトの 3 つがグループになり、選択されます。オブジェクトは、キャンバスに対する相対的な位置を維持します。

それは可能ですか？

私は非常に多くのことを試しましたが、それをうまく機能させることができました。私が探している解決策は、以下のようなものです。

var objectList=[1,2,3];    
var newgroup = new fabric.Group();

$.each(objectList, function (i) {
    var obj = canvas.item(i);
    newgroup.add(obj.clone());
    canvas.remove(obj);
});

canvas.add(newgroup)
canvas.setActiveGroup(newgroup);
canvas.renderAll();
4

3 に答える 3

8

次のようなものを使用できます。

(function() {
  var objectList = [1,2,3],
      group = new fabric.Group();

  canvas.forEachObject(function(o, i) {
    if (objectList.indexOf(i) > -1) {
      group.addWithUpdate(o);
      canvas.remove(o);
    }
  });
  canvas.setActiveObject(group);
  canvas.add(group);
})();

インデックス 1、2、または 3 のオブジェクトのみがグループに追加されます。

于 2013-10-28T12:11:25.170 に答える
1

選択したアイテムをグループとして追加すると、後でそれらへの接続を再描画すると奇妙な結果が生じました。fabic の ActiveSelection は、プログラムで選択グループをキャンバスに追加するためのグループ オブジェクトです (おそらく 2013 年には存在しませんでした)。

これは、次の移動イベントでも機能する抜粋です。「issueType」と「clusterIndex」の 2 つの属性に基づいてアイテムを選択しています。

let allObjects = CANVAS.getObjects();
let selectedObjects = [];
for(let i=0;i < allObjects.length;i++){
    let object = allObjects[i];
    if(object.issueType && object.clusterIndex === clusterIndex){
        selectedObjects.push(object);
        }
    }
let selectionGroup = new fabric.ActiveSelection(selectedObjects);
CANVAS.add(selectionGroup);
CANVAS.setActiveObject(selectionGroup);
于 2018-05-25T10:29:26.500 に答える
0 
var objectList = [1,2,3],
group = new fabric.Group(objectList);

上記のコードは、オブジェクト 1,2,3 をグループ化します。

元のオブジェクトを取り除き、クローンをグループ化するだけです。

于 2014-06-26T11:05:09.767 に答える