Zwibbler绘图插件使用以及api整理

zwibbler插件是国外的个人写的作品，很好用，可是不开源（定制收费），不过源码可以找到。
官网：http://zwibbler.com
官方API：http://zwibbler.com/docs
zwibbler作者邮箱：steve.hanov@gmail.com
无纸化翻译，可以作为翻译参考文献
https://blog.csdn.net/weixin_50601484/article/details/120748499

这里以vue.js项目为按理，整理相关的相关写法如下
如果是下载的zwibbler.js，需要在index.html引入

// 写入对应需要展示的画布

// 初始化绘图工具，这里是可以进行控制的对应api
this.zwibbler = window.Zwibbler.create(‘#zwibbler-div’, {
scrollbars: false, // 是否显示滚动条
defaultBrushWidth: 5, // 默认画笔宽度（以像素为单位）
showCopyPaste: false, // 确定是否在内置工具栏上显示复制/粘贴按钮
showArrowTool: false, // 确定是否在内置工具栏中显示箭头工具
showTextTool: true, // 确定是否在内置工具栏中显示文本工具
showShapeBrushTool: false, // 确定是否在内置工具栏中显示魔术形状画笔工具
showLineTool: false, // 确定是否在内置工具栏中显示线条工具
showSquareTool: false, // 是否显示方形
showCircleTool: false, // 是否显示圆形
showToolbar: false,//是否显示工具栏
showColourPanel: false,//是否显示颜色画板
defaultFontSize: 22,//文本字体大小
multilineText: true,//文本工具是否允许设置换行
showPickTool: false,//是否在内置工具栏中显示选择工具(箭头选择工具)
sloppy: false,
allowTextInShape: false,//禁止用户在封闭形状内写入字
autoPickTool: false,//绘制形状后，是否允许用户绘制相同类型的形状。
defaultStrokeStyle: “#ff0000”,//默认为#000000（默认图形颜色）
defaultBrushColour: “#ff0000”,//默认为#000000（默认刷子颜色）
defaultBrushWidth:2,//画笔的宽度
//defaultArrowSize:15,//控制箭头工具中箭头的大小
//defaultArrowStyle: ‘solid’,//箭头样式 simple solid
defaultLineWidth: 3,//图形的边框宽度
//defaultStrokeStyle: ‘blue’,//图形的边框颜色
defaultTextFillStyle:‘red’,//文本的颜色
backgroundImage: “http://localhost:64435/Content/img/top_bg.jpg”,
//defaultZoom: “width”,//缩放背景适应整个画板（测试没反应） width page
allowResize: true, // 允许调整大小设置，如果设置为false就可以无限放大缩小
maximumZoom: 3, // 最大放大倍数
minimumZoom: 0.3 // 最小搜小倍数
})

// 橡皮檫功能
onXiangPi () {
  this.zwibbler.useBrushTool('erase', 20)
},
// 清空画布方法
onClear () {
  this.zwibbler.newDocument()
},
// 保存图片返回值为base64
onSave () {
  this.dataUrl = this.zwibbler.save('png')
  console.log(this.dataUrl)
},

// 清除dome水印
该绘图组件会一直存在一个dome字样无法处理，根据初步估计这里属于源码中进行了加密水印处理，可以再源码中全局搜索
a.strokeStyle = “rgba(128, 128, 128, 0.1)”; 这里把0.1改为0，设置为a.strokeStyle = “rgba(128, 128, 128, 0.0)”;即可