fabric操作canvas绘图-（四）事件绑定

本文链接：https://blog.csdn.net/weixin_42349568/article/details/127355681

本文详细讲解了如何使用JavaScript在Fabric.js库中绑定事件，包括canvas画布的鼠标交互、对象事件响应，以及如何实现对象鼠标悬停时的动画效果。涵盖关键事件如'mouse:down', 'modified', 'selected'等，并展示了如何为矩形对象创建鼠标滑过动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，事件绑定的语法

    const canvas = new fabric.Canvas("canvas");
    canvas.setBackgroundColor("rgb(100,200,200)");
     //矩形
    const rect = new fabric.Rect({
      left: 0,
      top: 0,
      width: 200,
      height: 200,
      fill: 'pink',
    });
    canvas.on("mouse:down", (options) => {
      console.log(options.e.clientX, options.e.clientY);
      if (options.target) {
        //点击到图像对象上时
        console.log("an object was clicked!", options.target);
      }
    });
    canvas.add(rect)

也就是说事件绑定是通过如下的语法进行绑定的：

obj.on("事件名",(options)=>{
	//事件回调函数，options是接受到的参数
})

二，相关事件

事件的绑定，要区分是绑定在canvas画布上，还是画布上的图像对象上。

1，对于canvas画布，可以绑定的事件是：

和鼠标相关的事件有：

“mouse:down”，“ mouse:move”和“ mouse:up”，"mouse:over"
"mouse:out"

渲染完毕的生命周期事件：

“after:render”

选择相关事件：

“selection:created”：框选激活图像元素时触发
“before:selection:cleared”：取消选择的上一刻触发
“selection:cleared”：取消选择后触发

    const canvas = new fabric.Canvas("canvas");
    canvas.setBackgroundColor("rgb(100,200,200)");
     //矩形
    const rect = new fabric.Rect({
      left: 0,
      top: 0,
      width: 200,
      height: 200,
      fill: 'pink',
    });
    canvas.on("mouse:move", (options) => {
      console.log(options);
    });
    canvas.add(rect)

2，对于图像对象可以绑定的事件：

“modified”：修改时触发
“selected”：选中时触发
“moving”：移动时触发
“scaling”:缩放时触发
“rotating”：旋转时触发
“added”：添加对象时触发
“removed”：移除对象时触发

例如：

    const canvas = new fabric.Canvas("canvas");
    canvas.setBackgroundColor("rgb(100,200,200)");
     //矩形
    const rect = new fabric.Rect({
      left: 0,
      top: 0,
      width: 200,
      height: 200,
      fill: 'pink',
    });
    rect.on("selected", (options) => {
      console.log(options);
    });
    canvas.add(rect)

三，某对象鼠标hover事件

对于某对象鼠标划过，让它颜色变大一些的动画效果怎么写呢？

    const canvas = new fabric.Canvas("canvas");
    canvas.setBackgroundColor("rgb(100,200,200)");
     //矩形
    const rect = new fabric.Rect({
      left: 200,
      top: 200,
      width: 50,
      height: 50,
      originX: 'center',//调整中心点的X轴坐标
      originY: 'center',//调整中心点的Y轴坐标
      fill: 'pink',
    });
    //动画函数
    function animation(){
      rect.animate(
        "scaleX",
        rect.scaleX==2?1:2,
        {
          onChange:canvas.renderAll.bind(canvas),
          duration:200
        }
      )
    }
	//鼠标划入的事件对象上是没有的，但是画布有
    canvas.on("mouse:over", (options) => {
      if(options.target){
        animation()
      }
    });
    canvas.on("mouse:out", (options) => {
      if(options.target){
        animation()
      }
    });
    canvas.add(rect)