|
@@ -28,10 +28,12 @@ class DrawCanvas {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
mouseStart() {
|
|
mouseStart() {
|
|
|
|
|
+ console.log('开始移动');
|
|
|
this._executionArr = []
|
|
this._executionArr = []
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
mouseMove({ x = 0, y = 0 }) {
|
|
mouseMove({ x = 0, y = 0 }) {
|
|
|
|
|
+ console.log('移动中');
|
|
|
if (!this._style) return
|
|
if (!this._style) return
|
|
|
this._executionArr.push([x, y])
|
|
this._executionArr.push([x, y])
|
|
|
this._ctx.fillStyle = this._style.fillStyle
|
|
this._ctx.fillStyle = this._style.fillStyle
|
|
@@ -41,6 +43,7 @@ class DrawCanvas {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
mouseEnd() {
|
|
mouseEnd() {
|
|
|
|
|
+ console.log('移动结束');
|
|
|
this._pathArr.push({
|
|
this._pathArr.push({
|
|
|
fillStyle: this._style,
|
|
fillStyle: this._style,
|
|
|
path: this._executionArr
|
|
path: this._executionArr
|
|
@@ -68,10 +71,13 @@ class DrawCanvas {
|
|
|
|
|
|
|
|
// 切换画笔
|
|
// 切换画笔
|
|
|
changeBrush({ url = '', w = 10, h = 10, angle = 0 }) {
|
|
changeBrush({ url = '', w = 10, h = 10, angle = 0 }) {
|
|
|
|
|
+ console.log('切换画笔');
|
|
|
if (!url) return
|
|
if (!url) return
|
|
|
const img = this._canvas.createImage()
|
|
const img = this._canvas.createImage()
|
|
|
|
|
+ img.src = url
|
|
|
img.onload = () => {
|
|
img.onload = () => {
|
|
|
const fillStyle = this._ctx.createPattern(img, 'repeat')
|
|
const fillStyle = this._ctx.createPattern(img, 'repeat')
|
|
|
|
|
+ console.log('画笔样式',fillStyle);
|
|
|
// 旋转 + 矩阵变化
|
|
// 旋转 + 矩阵变化
|
|
|
if (angle && this._matrix) {
|
|
if (angle && this._matrix) {
|
|
|
this._matrix.rotateSelf(angle)
|
|
this._matrix.rotateSelf(angle)
|
|
@@ -80,7 +86,6 @@ class DrawCanvas {
|
|
|
|
|
|
|
|
this._style = { fillStyle, w, h }
|
|
this._style = { fillStyle, w, h }
|
|
|
}
|
|
}
|
|
|
- img.src = url
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// svg 路径转 canvas 路径
|
|
// svg 路径转 canvas 路径
|
