在初始加載後使用Fabric.js修改fabric.Image.fromURL

我正在使用Fabric.js庫，並且我已經看到了很多關於如何使用Image.fromURL從URL加載圖像的示例。幾乎每個例子中，圖像賦值給變量，使用這個常規設置：在初始加載後使用Fabric.js修改fabric.Image.fromURL

var bgnd = new fabric.Image.fromURL(bgndURL, function(oImg){ 
    oImg.hasBorders = false; 
    oImg.hasControls = false; 
    // ... Modify other attributes 
    canvas.insertAt(oImg,0); 
});

我發現圖像的屬性只能在回調函數中當圖像完成加載修改。有沒有辦法在以後修改它的屬性？我試圖直接更改bgnd變量的屬性，但它什麼都不做。

bgnd.set({left: 20, top: 50}); 
canvas.renderAll();

或

bgnd.rotation = 45; 
canvas.renderAll();

他們沒有做任何事情。如果以後無法訪問此變量，則將fabric.Image對象分配給bgnd變量有什麼意義？或者我使用不正確？

來源

2014-06-26 Marquizzo

如果我在下面回答您的問題，請選擇此作爲答案，或者讓我知道如果您仍然有同樣的問題。 – mathius1

後您插入使用

canvas.insertAt(oImg,0); 

canvas.setActiveObject(oImg); 
myImg= canvas.getActiveObject();

圖像您應該能夠使用

myImg.rotation = 45;

記住創建myImg變量作爲一個全局變量來改變它。來自URL功能的圖像Modify After Load Fiddle

來源

2015-01-27 19:07:50 mathius1

如果你想在'fabric.Image.fromURL（）'（不從函數中訪問它）之後訪問變量，這肯定不起作用。而'fabric.Image（）'不是這種情況。 [小提琴]（http://jsfiddle.net/sinq/wdwtgsy7/28/） – JDrake

「有沒有辦法在以後修改它的屬性？」權限之後訪問不是OP問題的一部分。在您的示例中，警報在圖像實際加載之前發生。我不知道你爲什麼要加載一個具有某些屬性的圖像，並在沒有用戶交互的情況下直接更改它們。你可能會加載它所需的屬性。 – mathius1

「我不確定你爲什麼要加載一個具有特定屬性的圖像，並且在沒有用戶交互的情況下直接更改它們。」不改變它們，但使用它們。示例：加載的圖像必須添加到具有其他對象本身的組中。現在，第二個對象必須使用應該在被調用後立即加載的圖像的維度。爲什麼？因爲它的數據（如寬度和高度）是馬上需要的。實現它的兩種方法：一個忘記image.fromURL，第二個是：（http://jsfiddle.net/wdwtgsy7/30/） – JDrake

在初始加載後使用Fabric.js修改fabric.Image.fromURL

回答

相關問題