FabricJSクリップボードの実装（コピー/貼り付け）

Question

fabricjsでのクリップボードの実装に関する問題が発生しています。グループをクローンすると、boundingBox/Controlsは正しい位置にありますが、オブジェクトはキャンバスの左上隅にスローされ、コントロールを移動することしかできません。ここで

は、これまでの私の実装です：これらのメソッドの

var canvas = new fabric.Canvas("c"); 
var clipboard = null; 

function Copy() { 
    // Single Object 
    if(canvas.getActiveObject()) { 
     // Does this object require an async clone? 
     if(!fabric.util.getKlass(canvas.getActiveObject().type).async) { 
      clipboard = canvas.getActiveObject().clone(); 
     } else { 
      canvas.getActiveObject().clone(function(clone) { 
       clipboard= clone; 
      }); 
     } 
    } 

    // Group of Objects (all groups require async clone) 
    if(canvas.getActiveGroup()) { 
     canvas.getActiveGroup().clone(function(clone) { 
      clipboard = clone; 
     }); 
    } 
} 


function Paste() { 
    // Do we have an object in our clipboard? 
    if(clipboard) { 
     // Lets see if we need to clone async 
     if(!fabric.util.getKlass(clipboard.type).async) { 
      var obj = clipboard.clone(); 
      obj.setTop(obj.top += 10); 
      obj.setLeft(obj.left += 10);    
      canvas.add(obj); 
      // We do not need to clone async, all groups require async clone 
      canvas.setActiveObject(obj); 
      clipboard = obj; 
     } else { 
      clipboard.clone(function(clone) { 
       clone.setTop(clone.top += 10); 
       clone.setLeft(clone.left += 10); 
       canvas.add(clone); 

       // We need to clone async, but this doesnt mean its a group 
       if(clipboard.isType("group")) { 
        canvas.setActiveGroup(clone); 
       } else { 
        canvas.setActiveObject(clone); 
       } 
       clipboard = clone; 
      }); 
     } 
    } 
} 

私の実装と私のロジックが冗長であるかもしれないし、その可能性は、これを行うのより良い、より小さく、より効率的な方法である（私に教えてください） 。

これはバグか間違っているかどうかわかりません。どのオブジェクトがクローンされるのか分からないので、非同期クローンを使用する必要があるかどうかを知る必要があります。これは、その方法だけです。

UPDATE：ここは問題（グループオブジェクトおよびコピー/貼り付け）

Answer 1

そのはsetActiveGroup機能である問題のように見えるのjsfiddleです。これをチェックしてくださいfiddle。行番号49 & 54 console.log（）を書きました。コンソールの結果を見ると、_objectsプロパティの長さが0であることがわかります。つまり、グループにオブジェクトがないことを意味します。今すぐsetActiveGroup関数を削除してください。今_オブジェクトのプロパティの長さは2です。

これは正常なのか、setActiveGroup関数にバグがあるのか​​わかりません。 しかし、グループ全体を一度に追加するのではなく、キャンバスに手動でグループオブジェクトを追加しようとしました。私はあなたのフィドルライン48を以下のものに置き換えました。

clone.forEachObject(function(obj){ 
    canvas.add(obj); 
}); 

canvas.deactivateAll(); 

これで機能しました。これはfiddleを参照してください。

有効なグループまたはオブジェクトを手動で設定する場合は、canvas.deactivateAll（）を安全に使用します。必要に応じて、canvas.discardActiveGroup（）またはcanvas.discardActiveObject（）を使用することもできます。

私はキャンバスに直接クローングループを追加することはできないと思います。代わりに、そのグループの各オブジェクトを個別に追加する必要があります。他の誰かが確認してください。

Answer 2

最近同じ問題が発生しました。クローンオブジェクトがキャンバスからスローされる理由は、クローン対象のオブジェクトの左を計算するときにキャンバスではなくグループ内の左の位置になります。ここでは、オブジェクトのキャンバス関連の左側を取得するには、それは私のため

var cloneGroup = canvas.getActiveGroup(); 
if (cloneGroup) { 
      var objectsInGroup = cloneGroup.getObjects(); 
      objectsInGroup.forEach(function (object) { 
       var cloneobj = object.clone(); 
       cloneobj.set({ 
        left: ((object.left + object.group.left)+20),// added 20 to add some gap 
        top: ((object.top + object.group.top) + 20), 
        width: object.get('width'), 
        height: object.get('height'), 
       }); 
       canvas.add(cloneobj); 
      }); 
     } 
canvas.renderAll();