Fabric.js 图像点击和动画外部添加功能

Posted 2023-03-25

【中文标题】Fabric.js 图像点击和动画外部添加功能

【英文标题】：Fabric.js image on click and animate outside add function

【发布时间】：2021-01-04 01:00:35

【问题描述】：

您好，我正在使用 Fabric.js 开发一个应用程序，用户将在其中输入一些字符串，然后单击删除图像最后一个单词将被删除，图像将向左移动。

我正在使用类似的图像

fabric.Image.fromURL(srcImg, function (oImg) 
    canvas.add(oImg);
    oImg.set('left',0);
    oImg.set('top', 100);
    oImg.scale(.55);
    canvas.renderAll();

    // and then, we can animate the image    
    oImg.animate('left', 100, 
        onChange: canvas.renderAll.bind(canvas)
    );
    
    oImg.on('mouse:down', function() 
        //some function here
    );
 );

现在我想在 add 函数之外使用 click 和动画，但我收到错误 undefined index oImg。我想在其他地方使用点击和动画，以便我可以删除最后一个单词并使用动画将图像向左移动我现在正在使用文本进行点击和动画，但我想使用图像。

【问题讨论】：

请您提供到目前为止您尝试过的演示。还请改进问题的描述，以便我们更好地了解您的问题。

jsfiddle.net/geoLjhy0 这是小提琴，你可以看到 onclick 在函数内部工作我也添加了一个全局变量和 img2 但在函数外部这个 img 变量不可用。

【参考方案1】：

fabric.Image.fromURL 是一个异步方法，所以它会抛出一个 undefined 在它下面调用它的错误是正常的。您在这里主要有两种解决方案：

在回调中添加事件监听器：

fabric.Image.fromURL('//lorempixel.com/200/200/', function(img)   
  img2 = img

  ...

  img2.on('mousedown', function () 
    console.log('throws an error');
  );
);

调用事件绑定函数（总是在创建 img2 之后）

fabric.Image.fromURL('//lorempixel.com/200/200/', function(img)   
  img2 = img

  ...

  bindImageEvents(img2)
);

 function bindImageEvents (imageObject) 
   imageObject.on('mousedown', function () 
     console.log('Something...');
 );

【讨论】：

感谢您的回答 不是我在寻找，但成功了