【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>
相关推荐
jiangzhihao05153 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI5 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front6 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie6 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀6 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻6 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树7 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔7 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城7 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04127 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端