基于Fabric.js的JavaScript事件派发调用问题

嘿，我来帮你搞定这个Fabric.js的事件触发需求！你想要实现鼠标悬停在灰色矩形上时，让红色矩形触发mouseover事件变黑，其实有两种简洁的解决方式：

方法一：直接触发redBox的mouseover事件 #

Fabric.js的对象内置了trigger()方法，可以手动触发指定的事件。你只需要在greyBox的mouseover回调里，调用redBox的trigger方法并传入mouseover事件名即可：

var greyBox = new fabric.Rect({ fill: 'grey', width: 100, height: 100 });
var redBox = new fabric.Rect({ left:300, top:300, fill: 'red', width: 100, height: 100 });
function createCanvas(id){
  canvas = new fabric.Canvas(id);
  canvas.add(greyBox);
  canvas.add(redBox);
  redBox.on("mouseover", function(e){
    redBox.set({fill: 'black'});
    canvas.renderAll(); // 确保画布刷新，显示颜色变化
  })
  greyBox.on("mouseover", function(e){
    // 触发redBox的mouseover事件
    redBox.trigger('mouseover', e);
  })
  return canvas;
}

方法二：抽离重复逻辑（更易维护） #

如果后续需要修改红色矩形的变色逻辑，把逻辑抽成单独的函数会更方便，这样两处调用都用同一个函数：

var greyBox = new fabric.Rect({ fill: 'grey', width: 100, height: 100 });
var redBox = new fabric.Rect({ left:300, top:300, fill: 'red', width: 100, height: 100 });
var canvas;

// 抽离变色逻辑为单独函数
function turnRedBoxBlack() {
  redBox.set({ fill: 'black' });
  canvas.renderAll();
}

function createCanvas(id){
  canvas = new fabric.Canvas(id);
  canvas.add(greyBox);
  canvas.add(redBox);
  
  // 绑定redBox的mouseover事件
  redBox.on("mouseover", turnRedBoxBlack);
  
  // greyBox的mouseover直接调用变色函数
  greyBox.on("mouseover", turnRedBoxBlack)
  
  return canvas;
}

小提示 #

别忘了调用canvas.renderAll()！虽然Fabric.js的部分事件回调会自动触发渲染，但手动加上能确保颜色变化及时显示在画布上，避免出现不更新的情况。

内容的提问来源于stack exchange，提问作者AntonAntonoff