FabricJS剪貼板實現（複製/粘貼）

我有一個關於我在fabricjs中執行剪貼板的問題。當我克隆組時，邊界框/控件處於正確的位置，但對象被扔到畫布的左上角，我只能移動控件。FabricJS剪貼板實現（複製/粘貼）

這是到目前爲止我的執行：

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：這裏是問題（組中的對象和複製/粘貼）

來源

2016-05-12 Hunter Mitchell

您是否解決了問題？按照您的指定，我不會在您的小提琴中遇到任何問題。 –

@JayadrathaMondal每當我嘗試粘貼一組時，我複製了所有的內容。 –

它看起來問題出在setActiveGroup功能的jsfiddle。檢查這個fiddle。在行號49 & 54我寫了console.log（）。在控制檯中查看結果，可以看到_objects屬性長度爲0.這意味着組中沒有對象。現在只需刪除setActiveGroup函數。現在_objects屬性長度爲2.

我不知道這是正常還是在setActiveGroup函數中有任何bug。但後來我嘗試在畫布中手動添加組對象，而不是一次添加完整的組。我用下面的替換你的小提琴線48。

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

canvas.deactivateAll();

現在工作。看到這個fiddle。

如果要手動設置活動組或對象，請使用canvas.deactivateAll（）。您也可以根據您的要求使用canvas.discardActiveGroup（）或canvas.discardActiveObject（）。

我認爲我們不能直接將克隆組添加到畫布上。相反，我們必須單獨添加該組的每個對象。請別人確認。

來源

2016-05-15 08:44:32

這是一個很好的答案，但我會提交一個錯誤報告以確認這是否是一個錯誤，謝謝！ –

@HunterMitchell是的，你應該這樣做。我也想看看它是否真的是一個錯誤。 –

@HunterMitchell你有沒有確定這是否是一個錯誤？制定我自己的複製/粘貼實施並運行到相同的問題。 – ACIDSTEALTH

最近我遇到了同樣的問題;克隆對象被拋出畫布的原因是，當您計算要克隆的對象的左側時，您將獲得組內的左側位置而不是畫布。要獲得對象左側的畫布，請參閱它的工作方式

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

來源

2016-07-27 07:36:00

FabricJS剪貼板實現（複製/粘貼）

回答

相關問題