使用Fabric.js初始加载后修改fabric.Image.fromURL

时间:2014-06-26 20:23:14

标签: javascript html5-canvas fabricjs

我正在使用theFabric.js库,我已经看过很多关于如何使用Image.fromURL从URL加载图像的示例。几乎每个示例都使用以下常规设置将图像分配给变量:

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变量有什么意义呢?或者我使用不正确?

1 个答案:

答案 0 :(得分:2)

使用

插入图像后
canvas.insertAt(oImg,0);

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

您应该可以使用

进行更改
myImg.rotation = 45;

请记住将myImg变量创建为全局变量。来自URL函数Modify After Load Fiddle

的图像之外