【问题标题】:Modify fabric.Image.fromURL after initial load using Fabric.js使用 Fabric.js 初始加载后修改 fabric.Image.fromURL
【发布时间】:2014-08-17 20:09:29
【问题描述】:

我正在使用 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 变量有什么意义?还是我用错了?

【问题讨论】:

  • 如果我在下面回答了您的问题,请选择此作为答案,或者如果您仍然遇到同样的问题,请告诉我。

标签: javascript html5-canvas fabricjs


【解决方案1】:

使用

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

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

你应该可以使用

myImg.rotation = 45;

记得将 myImg 变量创建为全局变量。图片外来自URL函数Modify After Load Fiddle

【讨论】:

  • 如果您想在fabric.Image.fromURL() 之后立即访问变量(而不是从函数访问它),这绝对行不通。而fabric.Image() 并非如此。 [小提琴] (jsfiddle.net/sinq/wdwtgsy7/28)
  • "以后有没有办法修改它的属性?"之后立即访问不是 OP 问题的一部分。在您的示例中,警报发生在图像实际加载之前。我不确定为什么要加载具有某些属性的图像并在没有用户交互的情况下直接更改它们。您不妨使用所需的属性加载它。
  • “我不知道你为什么要加载具有某些属性的图像并在没有用户交互的情况下直接更改它们。”不要改变它们,而是使用它们。示例:加载的图像必须添加到本身具有另一个对象的组中。现在第二个对象必须使用应该在调用后立即加载的图像的尺寸。为什么?因为它的数据(例如宽度和高度)是立即需要的。实现它的两种方法:一是忘记 image.fromURL,二是:(jsfiddle.net/wdwtgsy7/30)
猜你喜欢
  • 2012-07-12
  • 2014-06-25
  • 2013-11-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-11-03
  • 2012-05-21
相关资源
最近更新 更多