Fabric.js Event demo
下面只是我用到的一些基本事件和方法，当做笔记记录下来…

• getObjects() 获取 canvas 画布的所有对象
• setActiveObject() 设置 canvas 画布选中元素
• getActiveObject() 获取 canvas 画布选中元素
• discardActiveObject() 取消 canvas 画布中所有对象的选中状态
• selection canvas 画布框选选中：默认为true，设置为false 则不可被选中。可以用于同时选中多个元素对象的情况。

canvas.selection = false; // canvas无法被选中

 如果想要禁用多选如何处理？我们可以通过 selection:created 事件进行控制。
 
selection:created 初次选中画布
 
canvas.on('selection:created', (e) => {
  if (e?.selected && e?.selected.length > 1) {
    canvas.discardActiveObject();
  } else {
    const selectTarget = e?.selected[0];
    canvasContainer.setActiveObject(selectTarget);
});
 
selection:updated 画布选择变化
 
 
selection:cleared 清空画布选中
 
 
mouse:down 鼠标按下
 
 
mouse:up 鼠标抬起
 
 
mouse:move 鼠标移动
 
 
mouse:dblclick 鼠标双击
 
 
object:added 添加图层
 
 
object:modified 编辑图层
 
 
object:removed 移除图层
 
 
object:moving 对象移动
 
 
object:added 对象被加入
 
 
object:removed 对象被移除
 
 
mouseup 鼠标抬起
mousedown 鼠标按下
mousemove 鼠标移动
mouseup:before 鼠标抬起前
mousedown:before 鼠标按下前
mousemove:before 鼠标移动前
mousedblclick 鼠标双击
mousewheel 鼠标滚动
mouseover 鼠标移入
mouseout 鼠标移除
 
mousedown 点击事件
 
function addRect() {
  const rect = new fabric.Rect({
    top: 100, // 距离容器顶部 100px
    left: 100, // 距离容器左侧 100px
    fill: 'orange', // 填充 橙色
    width: 200, // 宽度 100px
    height: 200, // 高度 100px
  });
  rect.on('mousedown', (e) => {
    console.log('mousedown 单击', e);
    const selectTarget = e.transform.target;
    canvasContainer.setActiveObject(selectTarget);
    let activeObject = canvasContainer.getActiveObject();
    console.log('获取画布当前选中的对象', activeObject);
  });
  // 将矩形添加到画布中
  canvasContainer.add(rect);
Fabricjs一个简单强大的Canvas绘图库快速入门：
Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面的基础上，怎样监听画布上鼠标按下、移动、抬起时的事件，以及画布上对象
被选中、被移动、被旋转、被加入和被移除的事件。
博客：https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
1、画布的事.
                                    Fabric.js是一个功能强大且简单的HTML5画布库，它给canvas上的元素提供了交互式对象模型。借助Fabric.js，你可以轻松地绘制各种图形线条图片，对它们进行拖拽、旋转、形变等操作，并且支持丰富的事件方法
npm install fabric --save
// 或者
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/451/fabric.js"></script>
创建canvas容器
impor
                                    可以使用 fabric.js 中的 "evented: true" 和 "selectable: true" 属性来为 canvas 中的元素绑定点击事件。
首先，在创建元素时设置 "evented: true" 和 "selectable: true" 属性，例如：
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill:...
由于需要给每一种元素设置一个独立的工具栏，所以就需要给每一个元素设置一个独立的事件去修改对应的工具栏的值
比如一个元素的角度显示问题。
我们可以给元素添加一个rotate事件，去动态修改工具栏的angle的值。
    this.gettersTarget.on('rotating', arg => {
      // 设置角度的angle值
      this.angl...
                                    可以使用 fabric.js 中的 getCoords() 方法来获取多选框内元素的相对整个画布的坐标。代码示例如下：
var group = new fabric.Group(objects, {
  left: 100,
  top: 100
canvas.add(group);
var coords = group.getCoords();
console.log(coords);...
                                    1.fabric[ˈfæbrɪk']是一个功能强大的运行在的JavaScript库,。fabric为canvas提供了一个交互式对象模型，通过简洁的api就可以在画布上进行丰富的操作。3.在使用过程发现文档阅读比较困难，因此自己在写的时候顺便总结一下，便于后续参考。
元素是 Fabric.js 的重要组成部分，如果画布上没有元素，那其实没啥意义。
元素数量多了，难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。
本文将讲解 Fabric.js 中的5种控制元素层级的方法。
之前使用这个框架写过一个卡片DIY的项目，中间遇到很多问题都只能通过google或github issues才能解决，国内资料较少，所以才想写这篇文章来简单的做下总结，希望可以帮到其他人哈。
附上个人项目地址：vue-card-diy 欢迎star~ ✨
什么是Fabric.js?
Fabric.js 是一个强大的H5 canva...