vue-fabric-module

vue-fabric-module :【基于vue2.0 fabric.js开发的画布组件画布编辑器，支持业务以下：创建圆形，矩形，文本，条码，二维码，图片，表格等等，画布的图册移动，隐藏，删除，画布的撤销、还原、缩放、对齐、居中、预览和保存等】The canvas component developed based on vue2.0 fabric.js.This canvas-edit supports the following businesses: creating circles, rectangles, texts, barcodes, QR codes, pictures, tables, etc., moving, hiding, deleting, and canceling canvases. Restore, zoom, align, center, preview and save, etc.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

# use
npm install vuefabricmoudle --save

更新淘宝镜像

cnpm sync vuefabricmodule

自己发布了NPM包，有小伙伴反应，如果是TB源，CNPM上无法获取，不是最新等问题。 排查了下，原来是 CNPM有时候 不能及时同步。 所以需要自己去手工拉取下。 cnpm镜像.

依赖

下载到本地 static/js/文件下 customiseControls.js. fabric5.js. datamatrix.js. polyfill.min.js. browser.min.js.

在index.html引入

<script type="text/javascript" src="./static/js/polyfill.min.js"></script>
<script type="text/javascript" src="./static/js/browser.min.js"></script>

<script type="text/javascript" src="./static/js/fabric5.js"></script>
<script type="text/javascript" src="./static/js/customiseControls.js"></script>
<script type="text/javascript" src="./static/js/datamatrix.js"></script>

在main.js中引入

import 'vuefabricmodule/dist/vue-fabric-module.css'; //这个如果没有引入，则元素上鼠标右键不显示
import vuefabricmodule from 'vuefabricmodule'
...
Vue.use(vuefabricmodule)

如果需要动态生成条码和二维码

import JsBarcode from 'jsbarcode'
import jrQrcode from 'jr-qrcode'
...
new Vue({
  el: '#app',
  ...
  JsBarcode,  
  jrQrcode,
  ...
  })

组件使用

使用格式

<vuefabricmodule ref="canvas" :width="parseInt(width)" :height="parseInt(height)" :boxWidth="1200" :boxHeight="800" :zoom="parseFloat(zoom)" showRule="ALL" :backgroundColor="background" @changeZoomTo="changeZoomTo"></vuefabricmodule>

默认参数

| Name | Type | Default | Description | | --------------- | ------ | ---------------------------------- | ------------- | | width | Number | 300 | 画布宽 | | height | Number | 200 | 画布高 | | backgroundColor | String | #fff | 画布颜色 | | boxWidth | Number | 1200 | 窗口宽 | | boxHeight | Number | 800 | 窗口高 | | BgColor | String | #f1f1f1 | 窗口背景颜色 | | zoom | Number | 1 | 缩放比 | | showRule | String | NONE(ALL,NONE,HORIZONTAL,VERTICAL) | 标尺 |

回调函数

| Function | Params | Description | | ----------- | ------ | ------------ | |changeZoomTo | zoom | 缩放大小回调 | |deleteidsdata| [id] | 回调删除的元素id| |canvasToData | name, obj | 键盘移动回调|

事件

使用格式

 <vuefabricmodule ref="canvas" @mouse:down="mouseDown" ></vuefabricmodule>

鼠标事件

| name | Type | Description | | -------------- | ----- | -------------- | | mouse:down | event | mouse down | | mouse:up | event | mouse up | | mouse:move | event | mouse move | | mouse:dblclick | event | mouse dblclick | | mouse:over | event | mouse over | | mouse:out | event | mouse out |

其它事件

| name | Type | Description | | ------------------------ | ----- | ---------------------------------------------- | | selection:created | event | 选中 canvas 元素对象，单选和多选都会触发此事件 | | selection:updated | event | selection updated | | selection:cleared | event | selection cleared | | before:selection:cleared | event | before selection cleared | | object:added | event | 当有元素被添加进来时候触发 | | object:removed | event | object removed | | object:modified | event | object modified | | object:rotating | event | object rotating | | object:scaling | event | object scaling | | object:moving | event | object moving | | object:rotated | event | object rotated | | object:scaled | event | object scaled | | object:moved | event | object moved |

方法调用

调用格式：

this.$refs.canvas.方法名(params)

changeWH(options) 改变宽高，并且居中适配显示

options:{}

| options | Type | Default | Description | | -------------- | ------ | ------------------- | ------------- | |width | Number | this.width | 重置宽 | |height | Number | this.height | 重置高 | |backgroundColor | String | this.backgroundColor| 重置画布颜色 |

使用：

 this.$refs.canvas.changeWH({width: 1000, height: 800, backgroundColor: '#ff0'})

changeBackgroundColor(color) 仅改变画布颜色

参数：

| options | Type | Default | Description | | -------------- | ------ | ------------------- | -------------------------------------------- | | color | String | '#fff' | 画布颜色 |

使用：

 this.$refs.canvas.changeBackgroundColor('#ff0')

changemoveing(bol) 改变画布操作状态是 抓手：可以移动、缩放，不可选择， 箭头：不可移动缩放，可选择

参数：

| options | Type | Default | Description | | -------------- | ------ | ------------------- | -------------------------------------------- | | bol | Boolean | false | true:可以移动缩放抓手，false:不可移动缩放箭头 |

使用：

 this.$refs.canvas.changemoveing(true)

changeLeftTop() 按当前比例左上对齐窗口

参数：无

使用：

 this.$refs.canvas.changemoveing()

changeOrigin() 按当前比例居中对齐窗口

参数：无

使用：

  this.$refs.canvas.changeOrigin()

changeBigZoom() 画布适配当前窗口

参数：无

使用：

  this.$refs.canvas.changeBigZoom()

changeOneZoom() 画布1:1居中显示

参数：无

使用：

  this.$refs.canvas.changeOneZoom()

getEditObj() 获取当前活跃的元素

参数：无

使用：

  this.$refs.canvas.getEditObj()

removeEditObj() 删除当前活跃的元素（右键调用此）

参数：无

使用：

  this.$refs.canvas.removeEditObj()

setActiveObject(obj) 设置元素为活跃元素

参数： obj

使用：

  this.$refs.canvas.setActiveObject(obj)

copypaste() 复制粘贴活跃元素，坐标往右下偏移10像素（右键调用此）

参数：无

使用：

  this.$refs.canvas.copypaste()

getObjectsNew() 获取画布所有元素

参数：无

使用：

  this.$refs.canvas.getObjectsNew()

discardActive() 画布所有元素取消活跃状态

参数：无

使用：

  this.$refs.canvas.discardActive()

createElement(name, options) 画布创建元素

参数：

| name | options| default | Description | | ------------ | ------ | ------------------- | ------------- | |Rect | width,height, | {width:xx,height:xx,} | 矩形 | |Rectangle | width,height, | {width:xx,height:xx,} | 圆角矩形 | |Parallelogram | width,height, | {width:xx,height:xx,} | 平行四边形 | |Circle | width,height, | {width:xx,height:xx,} | 椭圆形 | |EqualCircle | width,height, | {width:xx,height:xx,} | 正圆 | |Dottedline | width,height, | {width:xx,height:xx,} | 线段 | |EqualTriangle | width,height, | {width:xx,height:xx,} | 等边三角形 | |star | width,height, | {width:xx,height:xx,} | 五角星 | |Hexagon | width,height, | {width:xx,height:xx,} | 正六边形 | |Image | width,height, | {width:xx,height:xx,} | 图片 | |Icon | width,height, | {width:xx,height:xx,} | 静态图片 | |equalImage | width,height, | {width:xx,height:xx,} | 保持居中的图片| |Barcode | width,height, | {width:xx,height:xx,} | 条码 | |Qrcode | width,height, | {width:xx,height:xx,} | 二维码 | |Time | width,height, | {width:xx,height:xx,} | 时间文字 | |Itext | width,height, | {width:xx,height:xx,} | 当行编辑文本 | |Textbox | width,height, | {width:xx,height:xx,} | 文本域 | |TextRect | width,height, | {width:xx,height:xx,} | 限制宽高的文本| |Html | width,height, | {width:xx,height:xx,} | html | |table | width,height, | {width:xx,height:xx,} | 表格 |

使用：

this.$refs.canvas.createElement(name, options)

toHorizontalCenterDistribution() 水平居中分布

参数：无

对象：画布中的活跃对象

使用：

  this.$refs.canvas.toHorizontalCenterDistribution()

toVerticalCenterDistribution() 垂直居中分布

参数：无

对象：画布中的活跃对象

使用：

  this.$refs.canvas.toVerticalCenterDistribution()

toLeftAlign() 左对齐

参数：无

对象：画布中的活跃对象

使用：

  this.$refs.canvas.toLeftAlign()

toHorizontalCenterAlign() 水平居中对齐

参数：无

对象：画布中的活跃对象

使用：

  this.$refs.canvas.toHorizontalCenterAlign()

toRightAlign() 右对齐

参数：无

对象：画布中的活跃对象

使用：

  this.$refs.canvas.toRightAlign()

toTopAlign() 顶对齐

参数：无

对象：画布中的活跃对象

使用：

  this.$refs.canvas.toTopAlign()

toVerticalCenterAlign() 垂直居中对齐

参数：无

对象：画布中的活跃对象

使用：

  this.$refs.canvas.toVerticalCenterAlign()

toBottomAlign() 底对齐

参数：无

对象：画布中的活跃对象

使用：

  this.$refs.canvas.toBottomAlign()

moveToshow(object, index) 移动层级

参数：object, index

使用：

  this.$refs.canvas.moveToshow(object, index)

toCutObject(object) 画布单个元素预览

参数：object

使用：

  this.$refs.canvas.toCutObject(object)

toDataUrlImg 画布预览

参数：无

使用：

  this.$refs.canvas.toDataUrlImg()

对象新增参数 2023.02.02

| name | Description | default | | ------------------- | ----------------------------------------- | -------------------------- | | strokeWidth | 边框粗细 | 0 | | stroke | 边框颜色 | '' | | borderType | 边框类型 | 1 | | strokeDashArray | 边框类型设定 1:直线[0,0] ; 2:虚线 [5,1] | 直线[0,0] | | fillinColor | 文本组件填充背景颜色 | 'rgba(0,0,0,0)' |

上线发包流程

1.改pagckage.json版本号；
2.填写版本记录发布内容；
3.npm run build 生成js生成环境文件；
4.git add . 
  git commit -m 'vxx.xx.xx'
  git push origin master
5.npm publish --otp=xxxxxx;

Changelog

2022.05.16

v0.0.1 * 项目初始化

2022.05.17

v0.0.2 * 项目可引用

2022.05.18

v0.0.3 * 画布初始化，新增API和接口文档

• 新增api 改变画布宽高和颜色

2022.05.18

v0.0.4 v0.0.5* 新增API和接口文档,导出画布组件

• 新增api 改变画布操作状态是 抓手：可以移动、缩放，不可选择， 箭头：不可移动缩放，可选择
• 新增api 按当前比例左上对齐窗口
• 新增api 按当前比例居中对齐窗口
• 新增api 画布适配当前窗口
• 新增api 画布1:1居中显示

2022.05.19

v0.0.6 * 新增API和接口文档,新增组件，组件右键操作，部分键盘快捷键

• 新增api 仅改变画布颜色
• 新增api 获取当前活跃的元素
• 新增api 删除当前活跃的元素（右键调用此）
• 新增api 设置元素为活跃元素
• 新增api 复制粘贴活跃元素，坐标往右下偏移10像素（右键调用此）
• 新增api 获取画布所有元素
• 新增api 画布所有元素取消活跃状态
• 新增api 画布创建元素
• 新增回调函数 删除回调ids,键盘移动回调
• 新增功能 全局键盘事件（window.event.keyCode===46：delete删除所有活跃元素；37：左移1像素；38：上移1像素；39：右移1像素；40：下移1像素）
• 新增功能 元素右键事件（图层：上移一层，下移一层，置顶，置底；复制；删除）

2022.05.23

v0.0.7 * 新增API和接口文档,新增组件，验证复制和组团复制

• 新增的组件验证是否可以复制
• 条码和二维码的缩放图片重绘
• 鼠标感应元素，出现虚线框；移动元素，元素透明度降到0.8可以看到下面的图层
• 新增二维码创建的方法
• 新增条码创建的方法
• 新增表格创建的方法
• 示例中，监听窗口大小改变画布大小

2022.05.25

v0.0.8 * 修复画布的点击感应透明的问题,修复条码不能旋转的问题

2022.05.26

v0.0.9 * 新增API接口

• 新增api 水平居中分布
• 新增api 垂直居中分布
• 新增api 左对齐
• 新增api 水平居中对齐
• 新增api 右对齐
• 新增api 顶对齐
• 新增api 垂直居中对齐
• 新增api 底对齐
• 新增api 移动层级

2022.05.27

v0.0.11 * 新增API接口

• 新增api 回调选择的id集合
• 新增api 新增根据ids id删除元素的接口
• 新增api 新增根据ids id设置元素活跃的接口
• 修复 宽高颜色设置的bug
• 背景颜色允许不填透明色，但是加边框
• 修复文本TextRect组件多选选择移动的bug

v0.0.12 * 修复bug

• 修复组合shift选择没有返回id
• 新增选择的id回调selectId
• 根据id删除新增动画效果

2022.05.30

v0.0.13 * 新增几个事件的回调 v0.0.14 * 页面渲染的方法和布局回调改变 v0.0.15 * getZoom获取当前缩放 v0.0.16 * canvasToData横纵对齐回调

2022.05.31

v0.0.17 * 新增api 画布预览和画布内组件切割生成图片

• Image元素换方法解决预览跨域报错

2022.06.02

v0.0.18 *新增api 文本自适应的类型改变和文字改变

• 修复二维码缩放图层置顶问题，文本条码图片新增图层参数

v0.0.19 * 新增api 文本退出编辑的 v0.0.20

• 退出编辑修复取消选中文本的bug

v0.0.21

• 多个文本编辑组件的退出编辑

2022.06.03

v0.0.22

• 修复文本的图层问题

v0.0.23

• 修复图层排序问题

v0.0.24

• 修复图层排序置顶置底问题

v0.0.25

• 修复图层排序置顶置底问题

2022.06.10

v0.0.26

• 表格相关的入参调整

v0.0.27

• 表格图层和坐标

v0.0.28

• 表格重写方法修改

v0.0.29

• 表格图层问题
• 表格重置的id和layer
• 拖拽元素的透明度与设置的冲突
• 表格组件的封装

2022.07.26

v0.0.30

• 二维码和条形码支持背景颜色和内容颜色同时变化

2022.07.27

v0.0.31

• 文本编辑时回调

2022.08.02

v0.0.32

• 条码默认背景区域透明颜色

v0.0.33

• 忘记编译了

2022.08.16

v0.0.34

• 图片透明度添加

2022.08.25

v0.0.35

• 默认页面用仿PS的页面

2022.08.29

v0.0.36

• 文本事件监听（text:changed， text:editing:entered， text:editing:exited）

2022.09.08

v0.0.37

• 文本组件优化，编辑和退出编辑模式

2022.09.08

v0.0.38

• 文本组件优化，刷新时宽高缩小有问题

2022.09.13

v0.0.39

• 文本组件优化，拖拽宽高修改
• 文本英文省略4个字，汉字省略2个字

v0.0.40

• 文本组件退出编辑的方法添加退出编辑选择当前文本的逻辑

2023.02.02

v0.1.0

• 文本组件新增边框，边框参数（border，borderWidth，borderType，strokeDashArray，fillinColor）；
• 矩形、椭圆形、圆角矩形 形状新增边框。

2023.02.03

v0.1.1

• 文本组件新增边框，边框参数（strokeWidth，stroke，borderType，strokeDashArray，fillinColor）；
• 矩形、椭圆形、圆角矩形 形状新增边框。

2023.02.07

v0.1.2

• 文本的具体属性修改

2023.02.09

v0.1.3

• 文本组件拖拽选择框较大问题修复

2023.02.10

v0.1.5

• 文本组件的层级问题，文本组件要被边框包围逻辑修改，文本组件改变边框样式的逻辑修改，文本的自适应和不使用切换对样式的继承

2023.02.13

v0.1.6

• 文本组件的内嵌，需要在所有算法逻辑中引入textPadding用于去掉边框的宽度，修改如：缩放，缩放结束，文本新增、文本进入编辑、文本改变、文本退出编辑等函数；
• 兼容vuefabric2020的旧文本组件的文本框功能；
• 文本组件中文本新增和缩放时添加文本裁切功能；

2023.03.01

v0.1.7

• 修复文本重绘时丢失加粗，斜体下划线等属性值

2023.04.13

v0.1.8

• 新增价格组件

2023.04.13

v0.1.9

• 按id显示隐藏

2023.04.13

v0.1.10

• 数字组件的细节优化
• 透明背景支持

2023.04.17

v0.1.11

• 复制粘贴新增快捷方式
• 整数错误处理

2023.04.18

v0.1.12

• 修复全局左右上下移动和input框中事件冲突
• 修复数字组件的文字重影

v0.1.13

• 微调缩放效果

v0.1.14

• 重绘后方位重调

v0.1.15

• 修改小数点字体bug

v0.1.16

• 字体改变重绘
• 数字组件的选择坐标定位

2023.04.19

v0.1.17

• 向上取整默认值计算错误
• 数字组件整体旋转问题修复
• 延迟时间修改

2023.04.21

v0.1.18

• 小数字号对齐整数
• 应用新增逻辑

2023.04.23

v0.1.19

• 改变小数字号，后缀位置调整

2023.05.11

v0.1.20

• 图片适应和拉伸变换

2023.05.24

v0.1.21

• 图片默认值

v0.1.22

• 图片支持适应和拉伸时计算图片宽高

v0.1.23

• 二维码缩放影响图片显示
• 新增修改9个控制角的图片

2023.06.26

v0.1.24

• 优化价格组件

v0.1.25

• 优化价格组件(某个参数)

v0.1.26

• 新增一个价格组件的参数
• 条码类型改变条码图片修改

2023.07.13

v0.1.27

• 修复图片旋转功能

v0.1.28

• 修复图片加载失败时默认图片
• 修复条码加载失败时显示
• 部分文本组件的重构

v0.1.29

• 图片组件加载失败后判断

2023.07.17

v0.1.30

• 文本组合组件重构NewText

2023.08.07

v0.1.31

• 新增标尺和辅助线的开关设置

v0.1.32

• 图片旋转角度没有返回

v0.1.33

• 画布改变宽高颜色

v0.1.34

• 画布标尺和辅助线做成开关

v0.1.35

• 默认画布撑满
• 画布表框1像素去掉

2023.08.08

v0.1.36

• 数字价格组件初始化右边有空格
• 数字组件没有隐藏

2023.08.18

v0.1.37

• 画布新增组件坐标展示

2023.12.11

v0.1.38

• 画布文本组件重构
• 画布添加删除按钮
• 键盘事件和组件坐标、选择框等附属样式联动
• 浏览器缩放画布大小1:1缩放

2023.12.11

v0.1.39

• 新版本提交试试

2023.12.12

v0.2.0

• 标尺bug修复,缩放坐标数值计算修复；
• 业务中准备引入富文本组件、标尺功能、坐标功能、对齐线功能；
• 业务中需考虑浏览器缩放->画布缩放
• 业务中考虑新增删除图片，画布中可删除组件；

2024.01.10

v0.2.1

• 新增钢笔划线工具；

  this.$refs.canvas.showPenAction(true)
  this.$refs.canvas.changePenStyle('#00ff00', 2)
  this.$refs.canvas.setCursor(6)

2024.01.12

v0.2.2

• 修复数字价格组件宽高多1像素问题

2024.01.18

v0.2.3

• 标尺新增主题颜色；
• 标尺的锁定和解锁；
• 标尺蓝色对象刻度粗细放大时不好看；
• 钢笔多边形封装，新增对齐线和id;
• 画布中部分组件优化，允许loadjson;

2024.01.24

v0.2.4

• 新增shelf图片功能；
• 新增ap图片功能；
• 画布画框的功能；
• 画多边形的功能；
• 完善加载json的功能；
• 完善复制和8角控制功能；

2024.01.29

v0.2.5

• setMapComponetsWeight(obj, width)函数改变宽
• setMapComponetsHeight(obj, height)函数改变高
• 修复新增锁背景，和报错

2024.01.31

v0.2.6

• 修复部分bug
• 撑满缩放返回缩放比

2024.01.31

v0.2.7

• 修复部分bug

2024.04.19

v0.2.9

• 新增比例尺、新增折现测量工具

2024.04.26

v0.2.11

• 禁止默认ctrl+滚轮的缩放，支持画布缩放；

2024.04.28

v0.2.12

• 允许替换堆头的背景图片
• ctrl+缩放单独出函数

2024.05.09

v0.2.13

• 解决货架图片尺寸显示问题
• 解决测距工具移动偏移问题

2024.05.09

v0.2.14

• 新增alt快捷方式+拖拽 平移画布
• 原ctl+滚轮 中心缩放画布

2024.07.15

v0.2.15

• 新增条码中PDF417类型的处理

2024.07.18

v0.2.16

• 条码切换

2024.08.01

v0.2.17

• 表格重绘需要带标志组件，重绘图层

2024.09.19

v0.2.18

• 修复一个报错异常