|
@@ -56,6 +56,7 @@ class DrawCanvas {
|
|
|
// 清空画布
|
|
// 清空画布
|
|
|
this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
|
|
this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
|
|
|
this._pathArr.pop()
|
|
this._pathArr.pop()
|
|
|
|
|
+ // 重画
|
|
|
for (let k = 0; k < this._pathArr.length; k++) {
|
|
for (let k = 0; k < this._pathArr.length; k++) {
|
|
|
const el = this._pathArr[k];
|
|
const el = this._pathArr[k];
|
|
|
for (let j = 0; j < el.path.length; j++) {
|
|
for (let j = 0; j < el.path.length; j++) {
|
|
@@ -76,15 +77,17 @@ class DrawCanvas {
|
|
|
const img = this._canvas.createImage()
|
|
const img = this._canvas.createImage()
|
|
|
img.src = url
|
|
img.src = url
|
|
|
img.onload = () => {
|
|
img.onload = () => {
|
|
|
- const fillStyle = this._ctx.createPattern(img, 'repeat')
|
|
|
|
|
- console.log('画笔样式',fillStyle);
|
|
|
|
|
- // 旋转 + 矩阵变化
|
|
|
|
|
- if (angle && this._matrix) {
|
|
|
|
|
- this._matrix.rotateSelf(angle)
|
|
|
|
|
- fillStyle.setTransform(this._matrix)
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ const fillStyle = this._ctx.createPattern(img, 'repeat')
|
|
|
|
|
+ console.log('画笔样式', fillStyle);
|
|
|
|
|
+ // 旋转 + 矩阵变化
|
|
|
|
|
+ if (angle && this._matrix) {
|
|
|
|
|
+ this._matrix.rotateSelf(angle)
|
|
|
|
|
+ fillStyle.setTransform(this._matrix)
|
|
|
|
|
+ }
|
|
|
|
|
+ this._style = { fillStyle, w, h }
|
|
|
|
|
+ }, 500);
|
|
|
|
|
|
|
|
- this._style = { fillStyle, w, h }
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|