devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

fabric.js 实现元素拖拽、引入图片、标注交互_fabricjs

作者：繁依Fanyi0 | 2024-05-14 01:20:45

赞

踩

fabricjs

by：垃圾程序员

零、前言

特别鸣谢：拿只键盘出来绣花的德育处主任，他的系列文章给了我很大的帮助。该说不说，站在前人的肩膀上就是得劲。

德育处主任 - 知乎拿只键盘出来绣花 回答数 7，获得 143 次赞同icon-default.png?t=N7T8https://www.zhihu.com/people/rabbit-svip

fabric.js 是一个用于创建可交互式的 HTML5 canvas 应用程序的开源 JavaScript 库，它提供了一套简单、易用的 API，可以快速地实现各种图形操作和动画效果。使用 fabric.js，你可以轻松地创建文本、图像、形状、路径等多种元素，并对它们进行缩放、旋转、位移、剪切、合并等操作。

fabric.js 具有以下特点：

  1. 简单易用：fabric.js 的 API 非常简单、易于理解和使用，即使是初学者也能够快速上手。

  2. 功能强大：fabric.js 提供了各种基本图形元素的创建和操作方法，同时还支持高级功能，如复合对象、滤镜、选区、事件处理、动画等。

  3. 跨浏览器兼容：fabric.js 支持多种主流浏览器，包括 Chrome、Firefox、Safari、Edge 和 IE 等。

  4. 开源免费：fabric.js 是完全开源的，你可以自由地使用、修改和分发它。

最终实现效果：

一、引入 fabric.js 库

1.1npm 安装

npm install fabric --save

1.2全局引入

  1. import { fabric } from 'fabric'
  2. Vue.use(fabric);

二、页面布局

2.1创建左右结构的布局

  1. <template>
  2.   <div class="mainDiv rowflex">
  3.     <!-- 左侧元素区 -->
  4.     <div class="leftFiv columnflex" style="justify-content: start;">
  5.       <!-- 循环所有图标 -->
  6.       <div class="element columnflex" v-for="(item, index) in elementList" :key="index">
  7.         <img class="element_item" :src="item.address" @dragstart="handleDragStart(index)" />
  8.       </div>
  9.     </div>
  10.     <!-- 画布区 -->
  11.     <div id="rightDiv" class="rightDiv">
  12.       <canvas id="fabric"></canvas>
  13.     </div>
  14.     <!-- 右键菜单 -->
  15.     <div id="menu" class="menu-x" v-show="menuDisplay">
  16.       <div class="menu-li" @click="bindingIdentifier()">绑定唯一标识</div>
  17.       <div class="menu-li" @click="deleteElement()">删除</div>
  18.     </div>
  19.   </div>
  20. </template>

2.2画布初始化并加载底图

  1. //初始化画布
  2.       initCanvas() {
  3.         // 获取容器元素,得到父容器的宽和高
  4.         const container = document.getElementById('rightDiv');
  5.         // 创建一个与容器宽高一致的 canvas 对象
  6.         this.canvas = new fabric.Canvas("fabric", {
  7.           width: container.clientWidth,
  8.           height: container.clientHeight,
  9.           fireRightClick: true, // 启用右键，button的数字为3
  10.           stopContextMenu: true, // 禁止默认右键菜单
  11.         })
  12.         // 设置画布的背景图片
  13.         this.setBackground(container.clientWidth, container.clientHeight)
  14.         //监听元素是否被下放到画布上
  15.         this.elementPlacement()
  16.         //监听画布拖拽,包含三个监听事件
  17.         this.canvasDragAndDrop()
  18.         //监听画布缩放
  19.         this.canvasZoom()
  20.       },
  21.       //设置画布的背景图片
  22.       setBackground(clientWidth, clientHeight) {
  23.         fabric.Image.fromURL(this.canvasBackgroundImage, img => {
  24.           // 缩放背景图片以适应画布
  25.           // 如果背景图片宽度或高度大于画布宽度或高度
  26.           if (img.width > clientWidth || img.height > clientHeight) {
  27.             // 计算缩放比例
  28.             let scaleX = clientWidth / img.width;
  29.             let scaleY = clientHeight / img.height;
  30.             let scale = Math.min(scaleX, scaleY);
  31.             // 缩放背景图片
  32.             img.scaleToWidth(img.width * scale);
  33.             img.scaleToHeight(img.height * scale);
  34.           } else { // 如果背景图片宽度和高度都小于或等于画布宽度和高度
  35.             // 计算背景图片在画布中的位置
  36.             img.left = (clientWidth - img.width) / 2;
  37.             img.top = (clientHeight - img.height) / 2;
  38.           }
  39.           this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
  40.         });
  41.       },

效果如下：

三、实现画布缩放和移动

3.1画布缩放

  1. //监听画布缩放
  2.       canvasZoom() {
  3.         this.canvas.on('mouse:wheel', opt => {
  4.           const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
  5.           let zoom = this.canvas.getZoom() // 获取画布当前缩放值
  6.           zoom *= 0.999 ** delta
  7.           if (zoom > 20) zoom = 20 // 限制最大缩放级别
  8.           if (zoom < 0.01) zoom = 0.01 // 限制最小缩放级别
  9.           // 以鼠标所在位置为原点缩放
  10.           this.canvas.zoomToPoint({ // 关键点
  11.               x: opt.e.offsetX,
  12.               y: opt.e.offsetY
  13.             },
  14.             zoom // 传入修改后的缩放级别
  15.           )
  16.         })
  17.       },

3.2画布移动

  1. // 监听画布拖拽，同时也监听了右键菜单
  2.       canvasDragAndDrop() {
  3.         // 按下鼠标事件
  4.         this.canvas.on("mouse:down", opt => {
  5.           var evt = opt.e
  6.           // 判断：右键，且在元素上右键
  7.           // opt.button: 1-左键；2-中键；3-右键
  8.           // 在画布上点击：opt.target 为 null
  9.           if (opt.button === 3 && opt.target) {
  10.             this.lastMenu = opt.target
  11.             let menu = document.getElementById('menu');
  12.             // 禁止在菜单上的默认右键事件
  13.             menu.oncontextmenu = function(e) {
  14.               e.preventDefault()
  15.             }
  16.             // 显示菜单，设置右键菜单位置
  17.             // 获取菜单组件的宽高
  18.             //这个地方是我自己设置的宽和高计算的，如果你之后复制过去需要修改一下
  19.             const menuWidth = 120
  20.             const menuHeight = menu.childNodes.length * 40
  21.             // 当前鼠标位置
  22.             let pointX = opt.pointer.x
  23.             let pointY = opt.pointer.y
  24.             // 计算菜单出现的位置
  25.             // 如果鼠标靠近画布底部，菜单就出现在鼠标指针上方
  26.             if (this.canvas.height - pointY <= menuHeight) {
  27.               pointY -= menuHeight
  28.             }
  29.             menu.style = `
  30.                   visibility: visible;
  31.                   left: ${pointX}px;
  32.                   top: ${pointY}px;
  33.                   z-index: 100;
  34.                 `
  35.             // 将菜单展示
  36.             this.menuDisplay = true
  37.           } else {
  38.             // 将菜单隐藏
  39.             this.menuDisplay = false
  40.           }
  41.           //拖拽
  42.           if (evt.shiftKey === true) {
  43.             this.isDragging = true
  44.             this.canvas.selection = false;
  45.           }
  46.         });
  47.         // 移动鼠标事件
  48.         this.canvas.on("mouse:move", opt => {
  49.           if (this.isDragging && opt && opt.e) {
  50.             var delta = new fabric.Point(opt.e.movementX, opt.e.movementY);
  51.             this.canvas.relativePan(delta);
  52.           }
  53.         });
  54.         // 松开鼠标事件
  55.         this.canvas.on("mouse:up", opt => {
  56.           this.isDragging = false;
  57.           this.canvas.selection = true;
  58.         });
  59.       },

四、实现拖拽元素到画布

4.1监听拖到画布上

  1.  //监听元素是否被下放到画布上
  2.       elementPlacement() {
  3.         this.canvas.on('drop', elt => {
  4.           // 画布元素距离浏览器左侧和顶部的距离
  5.           let offset = {
  6.             left: this.canvas.getSelectionElement().getBoundingClientRect().left,
  7.             top: this.canvas.getSelectionElement().getBoundingClientRect().top
  8.           }
  9.           // 鼠标坐标转换成画布的坐标（未经过缩放和平移的坐标）
  10.           let point = {
  11.             x: elt.e.x - offset.left,
  12.             y: elt.e.y - offset.top,
  13.           }
  14.           // 转换后的坐标，restorePointerVpt 不受视窗变换的影响
  15.           let pointerVpt = this.canvas.restorePointerVpt(point)
  16.           //创建元素
  17.           this.createElement(this.imageAddress, pointerVpt)
  18.         });
  19.       },

4.2生成元素

  1.  //在画布上生成拖拽过来的元素
  2.       createElement(imageAddress, pointerVpt) {
  3.         fabric.Image.fromURL(imageAddress, oImg => {
  4.           //这个地方做了一下偏移，让鼠标位置为图标的中心，真实的位置信息要还原回去
  5.           oImg.top = pointerVpt.y - 24
  6.           oImg.left = pointerVpt.x - 24
  7.           this.canvas.add(oImg)
  8.         })
  9.       },

五、实现元素右键交互

5.2删除画布元素

  1. //删除元素
  2.       deleteElement() {
  3.         this.canvas.remove(this.lastMenu)
  4.         // 将菜单隐藏
  5.         this.menuDisplay = false
  6.       },

5.3弹窗输入编码

  1.       //设定唯一标识
  2.       bindingIdentifier() {
  3.         this.$prompt('请输入唯一编码', '编辑', {
  4.           confirmButtonText: '确定',
  5.           cancelButtonText: '取消'
  6.         }).then(({
  7.           value
  8.         }) => {
  9.           this.$message({
  10.             type: 'success',
  11.             message: '你的唯一编码是: ' + value
  12.           });
  13.         }).catch(() => {
  14.           this.$message({
  15.             type: 'info',
  16.             message: '取消输入'
  17.           });
  18.         });
  19.         // 将菜单隐藏
  20.         this.menuDisplay = false
  21.       }

完整代码：

  1. <template>
  2.   <div class="mainDiv rowflex">
  3.     <!-- 左侧元素区 -->
  4.     <div class="leftFiv columnflex" style="justify-content: start;">
  5.       <!-- 循环所有图标 -->
  6.       <div class="element columnflex" v-for="(item, index) in elementList" :key="index">
  7.         <img class="element_item" :src="item.address" @dragstart="handleDragStart(index)" />
  8.       </div>
  9.     </div>
  10.     <!-- 画布区 -->
  11.     <div id="rightDiv" class="rightDiv">
  12.       <canvas id="fabric"></canvas>
  13.     </div>
  14.     <!-- 右键菜单 -->
  15.     <div id="menu" class="menu-x" v-show="menuDisplay">
  16.       <div class="menu-li" @click="bindingIdentifier()">绑定唯一标识</div>
  17.       <div class="menu-li" @click="deleteElement()">删除</div>
  18.     </div>
  19.   </div>
  20. </template>
  21.  
  22. <script>
  23.   export default {
  24.     data() {
  25.       return {
  26.         // 图标列表
  27.         elementList: [{
  28.             key: 'ancientTrees',
  29.             address: require('@/assets/icons/fabric/ancientTrees.png')
  30.           },
  31.           {
  32.             key: 'camera',
  33.             address: require('@/assets/icons/fabric/camera.png')
  34.           },
  35.           {
  36.             key: 'factory',
  37.             address: require('@/assets/icons/fabric/factory.png')
  38.           },
  39.           {
  40.             key: 'fireFighting',
  41.             address: require('@/assets/icons/fabric/fireFighting.png')
  42.           },
  43.           {
  44.             key: 'house',
  45.             address: require('@/assets/icons/fabric/house.png')
  46.           },
  47.           {
  48.             key: 'hydrology',
  49.             address: require('@/assets/icons/fabric/hydrology.png')
  50.           },
  51.         ],
  52.         // 画布背景图片
  53.         canvasBackgroundImage: require('@/assets/icons/fabric/canvasImg.jpg'),
  54.         // 画布
  55.         canvas: null,
  56.         //最后一次拖动的图片
  57.         imageAddress: '',
  58.         //是否拖动中
  59.         isDragging: false,
  60.         //最后的x轴方向的位置
  61.         lastPosX: 0,
  62.         //最后的y轴方向的位置
  63.         lastPosY: 0,
  64.         //菜单是否显示
  65.         menuDisplay: false,
  66.         //最后一次右键选中的元素
  67.         lastMenu: null
  68.       }
  69.     },
  70.     mounted() {
  71.       this.initCanvas();
  72.     },
  73.     methods: {
  74.       //初始化画布
  75.       initCanvas() {
  76.         // 获取容器元素,得到父容器的宽和高
  77.         const container = document.getElementById('rightDiv');
  78.         // 创建一个与容器宽高一致的 canvas 对象
  79.         this.canvas = new fabric.Canvas("fabric", {
  80.           width: container.clientWidth,
  81.           height: container.clientHeight,
  82.           fireRightClick: true, // 启用右键，button的数字为3
  83.           stopContextMenu: true, // 禁止默认右键菜单
  84.         })
  85.         // 设置画布的背景图片
  86.         this.setBackground(container.clientWidth, container.clientHeight)
  87.         //监听元素是否被下放到画布上
  88.         this.elementPlacement()
  89.         //监听画布拖拽,包含三个监听事件
  90.         this.canvasDragAndDrop()
  91.         //监听画布缩放
  92.         this.canvasZoom()
  93.       },
  94.       //设置画布的背景图片
  95.       setBackground(clientWidth, clientHeight) {
  96.         fabric.Image.fromURL(this.canvasBackgroundImage, img => {
  97.           // 缩放背景图片以适应画布
  98.           // 如果背景图片宽度或高度大于画布宽度或高度
  99.           if (img.width > clientWidth || img.height > clientHeight) {
  100.             // 计算缩放比例
  101.             let scaleX = clientWidth / img.width;
  102.             let scaleY = clientHeight / img.height;
  103.             let scale = Math.min(scaleX, scaleY);
  104.             // 缩放背景图片
  105.             img.scaleToWidth(img.width * scale);
  106.             img.scaleToHeight(img.height * scale);
  107.           } else { // 如果背景图片宽度和高度都小于或等于画布宽度和高度
  108.             // 计算背景图片在画布中的位置
  109.             img.left = (clientWidth - img.width) / 2;
  110.             img.top = (clientHeight - img.height) / 2;
  111.           }
  112.           this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
  113.         });
  114.       },
  115.       //监听被拖动元素的图片
  116.       handleDragStart(event) {
  117.         this.imageAddress = this.elementList[event].address
  118.       },
  119.       //监听元素是否被下放到画布上
  120.       elementPlacement() {
  121.         this.canvas.on('drop', elt => {
  122.           // 画布元素距离浏览器左侧和顶部的距离
  123.           let offset = {
  124.             left: this.canvas.getSelectionElement().getBoundingClientRect().left,
  125.             top: this.canvas.getSelectionElement().getBoundingClientRect().top
  126.           }
  127.           // 鼠标坐标转换成画布的坐标（未经过缩放和平移的坐标）
  128.           let point = {
  129.             x: elt.e.x - offset.left,
  130.             y: elt.e.y - offset.top,
  131.           }
  132.           // 转换后的坐标，restorePointerVpt 不受视窗变换的影响
  133.           let pointerVpt = this.canvas.restorePointerVpt(point)
  134.           //创建元素
  135.           this.createElement(this.imageAddress, pointerVpt)
  136.         });
  137.       },
  138.       //在画布上生成拖拽过来的元素
  139.       createElement(imageAddress, pointerVpt) {
  140.         fabric.Image.fromURL(imageAddress, oImg => {
  141.           //这个地方做了一下偏移，让鼠标位置为图标的中心，真实的位置信息要还原回去
  142.           oImg.top = pointerVpt.y - 24
  143.           oImg.left = pointerVpt.x - 24
  144.           this.canvas.add(oImg)
  145.         })
  146.       },
  147.       //监听画布缩放
  148.       canvasZoom() {
  149.         this.canvas.on('mouse:wheel', opt => {
  150.           const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
  151.           let zoom = this.canvas.getZoom() // 获取画布当前缩放值
  152.           zoom *= 0.999 ** delta
  153.           if (zoom > 20) zoom = 20 // 限制最大缩放级别
  154.           if (zoom < 0.01) zoom = 0.01 // 限制最小缩放级别
  155.           // 以鼠标所在位置为原点缩放
  156.           this.canvas.zoomToPoint({ // 关键点
  157.               x: opt.e.offsetX,
  158.               y: opt.e.offsetY
  159.             },
  160.             zoom // 传入修改后的缩放级别
  161.           )
  162.         })
  163.       },
  164.       // 监听画布拖拽，同时也监听了右键菜单
  165.       canvasDragAndDrop() {
  166.         // 按下鼠标事件
  167.         this.canvas.on("mouse:down", opt => {
  168.           var evt = opt.e
  169.           // 判断：右键，且在元素上右键
  170.           // opt.button: 1-左键；2-中键；3-右键
  171.           // 在画布上点击：opt.target 为 null
  172.           if (opt.button === 3 && opt.target) {
  173.             this.lastMenu = opt.target
  174.             let menu = document.getElementById('menu');
  175.             // 禁止在菜单上的默认右键事件
  176.             menu.oncontextmenu = function(e) {
  177.               e.preventDefault()
  178.             }
  179.             // 显示菜单，设置右键菜单位置
  180.             // 获取菜单组件的宽高
  181.             //这个地方是我自己设置的宽和高计算的，如果你之后复制过去需要修改一下
  182.             const menuWidth = 120
  183.             const menuHeight = menu.childNodes.length * 40
  184.             // 当前鼠标位置
  185.             let pointX = opt.pointer.x
  186.             let pointY = opt.pointer.y
  187.             // 计算菜单出现的位置
  188.             // 如果鼠标靠近画布底部，菜单就出现在鼠标指针上方
  189.             if (this.canvas.height - pointY <= menuHeight) {
  190.               pointY -= menuHeight
  191.             }
  192.             menu.style = `
  193.                   visibility: visible;
  194.                   left: ${pointX}px;
  195.                   top: ${pointY}px;
  196.                   z-index: 100;
  197.                 `
  198.             // 将菜单展示
  199.             this.menuDisplay = true
  200.           } else {
  201.             // 将菜单隐藏
  202.             this.menuDisplay = false
  203.           }
  204.           //拖拽
  205.           if (evt.shiftKey === true) {
  206.             this.isDragging = true
  207.             this.canvas.selection = false;
  208.           }
  209.         });
  210.         // 移动鼠标事件
  211.         this.canvas.on("mouse:move", opt => {
  212.           if (this.isDragging && opt && opt.e) {
  213.             var delta = new fabric.Point(opt.e.movementX, opt.e.movementY);
  214.             this.canvas.relativePan(delta);
  215.           }
  216.         });
  217.         // 松开鼠标事件
  218.         this.canvas.on("mouse:up", opt => {
  219.           this.isDragging = false;
  220.           this.canvas.selection = true;
  221.         });
  222.       },
  223.       //删除元素
  224.       deleteElement() {
  225.         this.canvas.remove(this.lastMenu)
  226.         // 将菜单隐藏
  227.         this.menuDisplay = false
  228.       },
  229.       //设定唯一标识
  230.       bindingIdentifier() {
  231.         this.$prompt('请输入唯一编码', '编辑', {
  232.           confirmButtonText: '确定',
  233.           cancelButtonText: '取消'
  234.         }).then(({
  235.           value
  236.         }) => {
  237.           this.$message({
  238.             type: 'success',
  239.             message: '你的唯一编码是: ' + value
  240.           });
  241.         }).catch(() => {
  242.           this.$message({
  243.             type: 'info',
  244.             message: '取消输入'
  245.           });
  246.         });
  247.         // 将菜单隐藏
  248.         this.menuDisplay = false
  249.       }
  250.     }
  251.   }
  252. </script>
  253.  
  254. <style lang="scss">
  255.   // flex横向布局
  256.   .rowflex {
  257.     display: flex;
  258.     flex-direction: row;
  259.     align-items: center;
  260.     justify-content: center;
  261.   }
  262.  
  263.   // flex纵向布局
  264.   .columnflex {
  265.     display: flex;
  266.     flex-direction: column;
  267.     align-items: center;
  268.     justify-content: center;
  269.   }
  270.  
  271.   // 主div
  272.   .mainDiv {
  273.     height: calc(100vh - 50px) !important;
  274.     width: 100%;
  275.     min-width: 1000px;
  276.   }
  277.  
  278.   /* 左侧元素区 */
  279.   .leftFiv {
  280.     height: 100%;
  281.     width: 6%;
  282.     min-width: 60px;
  283.     border-right: solid 1px #eee;
  284.  
  285.     // 元素块
  286.     .element {
  287.       height: 6.5%;
  288.       width: 60%;
  289.       min-height: 48px;
  290.       min-width: 48px;
  291.       margin-top: 20px;
  292.  
  293.       .element_item {
  294.         height: 90%;
  295.         width: 90%;
  296.       }
  297.     }
  298.   }
  299.  
  300.   /* 右侧画布区 */
  301.   .rightDiv {
  302.     height: 100%;
  303.     width: 94%;
  304.     min-width: 940px;
  305.   }
  306.  
  307.   .menu-x {
  308.     z-index: -100;
  309.     position: absolute;
  310.     top: 0;
  311.     left: 0;
  312.     box-sizing: border-box;
  313.     border-radius: 4px;
  314.     box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  315.     background-color: #fff;
  316.   }
  317.  
  318.   /* 菜单每个选项 */
  319.   .menu-li {
  320.     box-sizing: border-box;
  321.     padding: 4px 8px;
  322.     border-bottom: 1px solid #ccc;
  323.     cursor: pointer;
  324.     line-height: 30px;
  325.     height: 40px;
  326.     width: 120px;
  327.   }
  328.  
  329.   /* 鼠标经过的选项，更改背景色 */
  330.   .menu-li:hover {
  331.     background-color: antiquewhite;
  332.   }
  333.  
  334.   /* 第一个选项，顶部两角是圆角 */
  335.   .menu-li:first-child {
  336.     border-top-left-radius: 4px;
  337.     border-top-right-radius: 4px;
  338.   }
  339.  
  340.   /* 最后一个选项，底部两角是圆角，底部不需要边框 */
  341.   .menu-li:last-child {
  342.     border-bottom: none;
  343.     border-bottom-left-radius: 4px;
  344.     border-bottom-right-radius: 4px;
  345.   }
  346. </style>

一户炊烟煮黄昏

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/566684
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号