web-dev-qa-db-ja.com

HTML5のfabric.jsキャンバスで複数のオブジェクトを一度に削除します

私は実際に、キャンバスの相互作用にfabric.jsフレームワークを使用するhtml5キャンバスプロジェクトに取り組んでいます。今、私は複数のオブジェクトの削除に苦労しています。次のコードは、選択したオブジェクトを追跡するようには見えませんが、キャンバス上のすべてのオブジェクトを追跡します。

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function(){
    var curSelectedObjects = new Array();
    curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);
    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++){
        canvas.setActiveObject(curSelectedObjects[i]);
        canvas.remove(canvas.getActiveObject());
    }
};

失敗しないで。

javascripthtmlcanvasfabricjs
21
John Mayer

ほとんどの問題を解決した@Kangaxコメントのため、キャンバスから現在選択されているオブジェクトを削除する次の解決策を見つけました。

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function()
{
if(canvas.getActiveGroup()){
      canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) });
      canvas.discardActiveGroup().renderAll();
    } else {
      canvas.remove(canvas.getActiveObject());
    }
};

この関数は、グループが選択されているかどうかを確認します。グループを選択すると、グループのすべてのオブジェクトが削除されます。グループが選択されていない場合、関数は選択されたオブジェクトを削除しようとします。何も選択されていない場合、キャンバスは変更されません。

37
John Mayer

あなたのコードは、オブジェクトを選択してから選択解除しているようです。

これはうまくいくかもしれません：

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function()
{
    var curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);

    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++)
    {
        canvas.remove(curSelectedObjects[i]);
    }
};

良い情報リンク：

https://github.com/kangax/fabric.js/wiki/Tutorial-2#wiki-modifying-objects

5
Alex W

オブジェクトのプロパティを確認して削除できます

var objects = canvas.getObjects();

for (var i = 0; i < objects.length; ) {
  if (objects[i].name == 'cropArea' || objects[i].name == 'bleedLine') {
    canvas.remove(objects[i]);
    i = 0;
  } else {
    i++;
  }
}
3
Amit Gaur

Canvas.removeは複数のパラメーターを取ることができることをご存知ですか？したがって、最も簡単な方法はこれです：

canvas.remove(...canvas.getObjects());

canvas.clear以外は、キャンバス内のオブジェクトのみが削除され、背景も削除されません。

0
TAB

Jsfiddleで見つけたこの1つの解決策を除いて、上記の解決策（またはstackoverflowの他の場所）は私にとってはうまくいきませんでした：

function deleteObjects(){
var activeObject = canvas.getActiveObject(),
activeGroup = canvas.getActiveGroup();
if (activeObject) {
    if (confirm('Are you sure?')) {
        canvas.remove(activeObject);
    }
}
else if (activeGroup) {
    if (confirm('Are you sure?')) {
        var objectsInGroup = activeGroup.getObjects();
        canvas.discardActiveGroup();
        objectsInGroup.forEach(function(object) {
        canvas.remove(object);
        });
    }
}
}

http://jsfiddle.net/beewayne/z0qn35Lo/

0
Hooman Askari

私はこれをしました：

  var selectedObj = canvas.getObjects(canvas.getActiveGroup())

選択したオブジェクトの配列を返します。 :)最後の関数括弧がコードスニペットにありません

0
Ajit kohir