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

问题描述

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

I'm using theFabric.js library, and I've seen a lot of examples on how to load an image from a URL using Image.fromURL. Almost every example assigns the image to a variable, using this general setup:

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

我发现图像的属性只能在图像的回调函数中修改完成加载。有没有办法在以后修改其属性？我尝试直接更改 bgnd 变量的属性，但它没有做任何事情。

I've found that the attributes of the image can only be modified within the callback function when the image finishes loading. Is there a way to modify its attributes at a later time? I tried changing the attributes of the bgnd variable directly but it doesn't do anything.

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

或

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

他们什么都不做。如果以后无法访问此变量，那么将fabric.Image对象分配给 bgnd 变量有什么意义呢？或者我使用不正确？

they don't do anything. What's the point of assigning the fabric.Image object to the bgnd variable if this variable can't be accessed at a later time? Or am I using it incorrectly?

推荐答案

使用

canvas.insertAt(oImg,0);

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

您应该可以使用

myImg.rotation = 45;

请记住将myImg变量创建为全局变量。来自URL函数的图像之外

Remember to create the myImg variable as a global variable. Outside of the image fromURL function Modify After Load Fiddle

这篇关于使用Fabric.js初始加载后修改fabric.Image.fromURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！