|
|
@@ -6,12 +6,9 @@ class DrawCanvas {
|
|
|
this._executionArr = []
|
|
|
this._pathArr = []
|
|
|
this._style = null
|
|
|
- this.baseMapUrl = null
|
|
|
- this.baseWidth = null
|
|
|
- this.baseHeight = null
|
|
|
}
|
|
|
|
|
|
- _init({ width, height, canvas, baseMapUrl = '' }) {
|
|
|
+ _init({ width, height, canvas, dicTypePath = '' }) {
|
|
|
if (!width || !height || !canvas) return
|
|
|
const ctx = canvas.getContext('2d')
|
|
|
const dpr = wx.getSystemInfoSync().pixelRatio
|
|
|
@@ -22,10 +19,12 @@ class DrawCanvas {
|
|
|
this._ctx = ctx
|
|
|
this._executionArr = [] //每移动一笔的数据
|
|
|
this._pathArr = [] //抬起落下为一笔
|
|
|
- this.baseHeight = height
|
|
|
- this.baseWidth = width
|
|
|
- this.baseMapUrl = baseMapUrl
|
|
|
- if (baseMapUrl) this.addBaseMap()
|
|
|
+ if (dicTypePath) {
|
|
|
+ // 添加路径底图
|
|
|
+ const path = this.sPath2cPath(dicTypePath)
|
|
|
+ this._ctx.stroke(path)
|
|
|
+ this._ctx.clip(path)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
mouseStart() {
|
|
|
@@ -50,34 +49,18 @@ class DrawCanvas {
|
|
|
mouseBack() {
|
|
|
// 删除每个移动数据
|
|
|
if (this._pathArr.length) {
|
|
|
- this._ctx.globalCompositeOperation = "source-over" //覆盖
|
|
|
// 清空画布
|
|
|
this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
|
|
|
this._pathArr.pop()
|
|
|
- // 画上底图
|
|
|
- this.addBaseMap(() => {
|
|
|
- // 画上路径
|
|
|
- for (let k = 0; k < this._pathArr.length; k++) {
|
|
|
- const el = this._pathArr[k];
|
|
|
- for (let j = 0; j < el.path.length; j++) {
|
|
|
- const es = el.path[j];
|
|
|
- this._ctx.fillStyle = el.fillStyle
|
|
|
- this._ctx.fillRect(es[0] - 5, es[1] - 5, 10, 10)
|
|
|
- }
|
|
|
+ for (let k = 0; k < this._pathArr.length; k++) {
|
|
|
+ const el = this._pathArr[k];
|
|
|
+ for (let j = 0; j < el.path.length; j++) {
|
|
|
+ const es = el.path[j];
|
|
|
+ this._ctx.fillStyle = el.fillStyle
|
|
|
+ this._ctx.fillRect(es[0] - 5, es[1] - 5, 10, 10)
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 添加底图
|
|
|
- addBaseMap(callback) {
|
|
|
- const img = this._canvas.createImage()
|
|
|
- img.onload = () => {
|
|
|
- this._ctx.drawImage(img, 0, 0, this.baseWidth, this.baseHeight)
|
|
|
- this._ctx.globalCompositeOperation = "source-atop" //画笔重叠部分覆盖
|
|
|
- if (callback) callback()
|
|
|
+ }
|
|
|
}
|
|
|
- img.src = this.baseMapUrl
|
|
|
}
|
|
|
|
|
|
// 切换画笔
|
|
|
@@ -90,18 +73,46 @@ class DrawCanvas {
|
|
|
img.src = url
|
|
|
}
|
|
|
|
|
|
+ // svg 路径转 canvas 路径
|
|
|
+ sPath2cPath(path = '') {
|
|
|
+ if (!path || !this._canvas) return
|
|
|
+ const arr = path.split(/(^|\s+)(?=[A-Z])/).filter(el => el !== ' ')
|
|
|
+ const PATH = this._canvas.createPath2D();
|
|
|
+ for (let k = 0; k < arr.length; k++) {
|
|
|
+ const el = arr[k].replace(/\s+/g, ',');
|
|
|
+ const key = el.replace(/[^A-Z]/g, '')
|
|
|
+ const value = el.replace(/[A-Z]/g, '').split(',')
|
|
|
+ console.log(77, key, value);
|
|
|
+ if (key === 'M') {
|
|
|
+ PATH.moveTo(value[0], value[1]);
|
|
|
+ } else if (key === 'C') {
|
|
|
+ PATH.bezierCurveTo(value[0], value[1], value[2], value[3], value[4], value[5]);
|
|
|
+ } else if (key === 'L') {
|
|
|
+ PATH.lineTo(value[0], value[1]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return PATH
|
|
|
+ }
|
|
|
+
|
|
|
// 清除画布
|
|
|
- destory() {
|
|
|
+ clear() {
|
|
|
// 清空画布
|
|
|
this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
|
|
|
- this._ctx.globalCompositeOperation = "source-over" //覆盖
|
|
|
- // 画上底图
|
|
|
- this.addBaseMap()
|
|
|
+ // this._ctx.globalCompositeOperation = "source-over" //覆盖
|
|
|
// 清除路径数据
|
|
|
this._pathArr = []
|
|
|
this._executionArr = []
|
|
|
}
|
|
|
|
|
|
+ // 销毁
|
|
|
+ destory() {
|
|
|
+ this._ctx = null
|
|
|
+ this._canvas = null
|
|
|
+ this._executionArr = []
|
|
|
+ this._pathArr = []
|
|
|
+ this._style = null
|
|
|
+ }
|
|
|
+
|
|
|
// 保存
|
|
|
save() {
|
|
|
wx.canvasToTempFilePath({
|
