2017-09-07 72 views
0

我想在不影響織物輸出的情況下得到影像的文本對象。fabricjs克隆的對象影響舊的(默認)對象

代碼

var clonedText = jQuery.extend({}, obj); 
clonedText.fill = "rgba(50,50,50,0.5)"; 
imageURL = clonedText.toDataURL({format:'png'}); 

結果

默認:enter image description here AfterRun:enter image description here

怎樣纔可以解決嗎? 我的意思是如何複製對象,以便不能影響默認圖像?

UPDATE:

我也試過這個和這個。

canvas._objects.forEach(function(obj, index){ 
var clonedText = fabric.util.object.clone(obj); 
    clonedText.fill = "rgba(50,50,50,0.5)"; 
    imageURL = clonedText.toDataURL({format:'png'}); 
}); 

這有同樣的結果。

+0

您正在使用的fabricjs的版本? – Durga

+0

@AndreaBogazzi你可以檢查這個[問題](https://jsfiddle.net/durga598/qn066wtz/)得到一個克隆對象的'toDataURL'後它會影響到父元素,在縮放它回到原來的。 – Durga

回答

2

所以你不應該像克隆JavaScript對象那樣真正克隆實例。 結構對象可以具有對畫布元素,圖像元素,深層結構的引用,並且每個克隆邏輯都可以獨立運行。

上fabricjs文檔指定其fabric.util.object.extende /克隆不克隆fabricJS對象:

http://fabricjs.com/docs/fabric.util.object.html

此外,在該文檔中指定的克隆方法:

enter image description here

所以你必須運行

myText.clone(function(cloned) { 
    // do something with cloned.... 
}); 

如果您需要一個完整的syncronous過程中,並沒有使用文本模式或圖像源你也可以這樣做:

var objectForm = myText.toObject(); 
var clonedText = new fabric.Text(objectForm.text, objectForm); 
+0

是的,完全正確。 –