【Fabric.js】监听画布or元素的点击、选中、移动、添加、删除销毁、变形等各事件

在fabric使用过程中,如果想要玩各种花样,那么fabric的事件监听是一定、必须、肯定要掌握!!!

例子就用vue项目组件里的代码,fabric的使用跟vue、react、angular之类的框架都没任何关系!

并且本demo只对功能进行讲述,实际项目使用肯定要进行封装,别直接就照抄导致写的丑!

代码中监听事件回调函数里的第一个参数,根据事件的不同,有目标图形信息、坐标信息等,自己一看就看得懂了,不讲解;

代码只简单介绍一些常用的目标监听事件,更全面的、更多花样的玩法自行查阅官网即可~~

html 复制代码
<template>
  <div class="cdie">
    <canvas id="c" ref="canvas"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { fabric } from "fabric";
let canvas = null;
onMounted(() => {
  canvas = new fabric.Canvas("c", {
    backgroundColor: "grey",
    minZoom: 1,
    maxZoom: 1.5,
    width: 1000,
    height: 444,
  });
  canvas
    .on('selection:cleared', (e) => {
      // 画布内取消选中后的事件
      console.log(canvas.getActiveObject());
    })
    .on('selection:created', (e) => {
      // 初次选中图形目标的事件
      console.log(canvas.getActiveObject());
    })
    .on('selection:updated', (e) => {
      // 变更选中图形目标的事件
      console.log(canvas.getActiveObject());
    })
    .on('mouse:down', (e) => {
      // 画布鼠标按下事件
      console.log(e);
    })
    .on('mouse:up', (e) => {
      // 画布鼠标松开事件
      console.log(e);
    })
    .on('mouse:move', (e) => {
      // 画布鼠标移动事件
      console.log(e);
    })
    .on('object:added', (e) => {
      // 当有图形添加进画布时触发的事件
      console.log(e.target);
    })
    .on('object:removed', (e) => {
      // 当有图形从画布销毁时触发的事件
      console.log(e.target);
    })
    .on('object:moving', (e) => {
      // 图形移动时触发;
      console.log(e.target);
    })
    .on('object:scaling', (e) => {
      // 图形缩放时触发;
      console.log(e.target);
    })
  window.fabric = canvas
  var line = new fabric.Line([10, 10, 333, 200], {
    strokeWidth: 1,
    stroke: "yellow",
    id: "linexx",
  });
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 50,
    fill: "pink",
  });
  var rect2 = new fabric.Rect({
    left: 400,
    top: 100,
    width: 100,
    height: 50,
    fill: "yellow",
  });

  canvas.add(line);
  canvas.add(rect);
  canvas.add(rect2);
  canvas.renderAll()
});
</script>
<style>
img {
  margin: 10px !important;
}
</style>
<style scoped lang="less">
.bss {
  margin: 10px;
  object-fit: contain;
  width: 22px;
  height: 22px;
  border: 1px solid rgb(46, 46, 46);
}

.cdie {
  width: 100%;
  text-align: center;
  display: flex;
}
</style>
相关推荐
摸鱼仙人~14 分钟前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子3 小时前
React状态管理最佳实践
前端
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情4 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图