From 473bee345ba01e03cab1055df4fab0b7cf25eb8c Mon Sep 17 00:00:00 2001 From: simmzl Date: Fri, 3 Aug 2018 10:02:16 +0800 Subject: [PATCH 1/4] add wepy_canvas_drawer --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index bcf8f5a..9458628 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ 新增 [mpvue_canvas_drawer](https://github.com/kuckboy1994/mpvue_canvas_drawer)。之后同步更新。 +新增由[simmzl](https://github.com/simmzl)开发移植的[wepy_canvas_drawer](https://github.com/simmzl/wepy_canvas_drawer)。之后同步更新。 + 做微信小程序中最好用的 `canvas` 绘图组件之一。 当前环境下，大家都非常需要分享到朋友圈这个功能，但是实现起来各有心酸（坑比较多），所以才有了如下的 `canvas` 绘图工具。 From d1ee15d3a3084f6fc72d7c38426e864a7287ffb5 Mon Sep 17 00:00:00 2001 From: cxa Date: Mon, 10 Sep 2018 14:08:34 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=97=8B=E8=BD=AC?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/canvasdrawer/canvasdrawer.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/components/canvasdrawer/canvasdrawer.js b/components/canvasdrawer/canvasdrawer.js index d7962a8..f01becc 100644 --- a/components/canvasdrawer/canvasdrawer.js +++ b/components/canvasdrawer/canvasdrawer.js @@ -118,14 +118,20 @@ Component({ }, drawImage (params) { this.ctx.save() - const { url, top = 0, left = 0, width = 0, height = 0, borderRadius = 0 } = params + const { url, top = 0, left = 0, width = 0, height = 0, borderRadius = 0, deg = 0 } = params // if (borderRadius) { // this.ctx.beginPath() // this.ctx.arc(left + borderRadius, top + borderRadius, borderRadius, 0, 2 * Math.PI) // this.ctx.clip() // this.ctx.drawImage(url, left, top, width, height) // } else { - this.ctx.drawImage(url, left, top, width, height) + if (deg !== 0) { + this.ctx.translate(left + width/2, top + height/2) + this.ctx.rotate(deg * Math.PI / 180) + this.ctx.drawImage(url, -width/2, -height/2, width, height) + } else { + this.ctx.drawImage(url, left, top, width, height) + } // } this.ctx.restore() }, From 2c75a6e48e58cba2b4453c23dd909b845c2d291d Mon Sep 17 00:00:00 2001 From: qizf Date: Sat, 15 Dec 2018 20:33:00 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=89=E5=8D=93?= =?UTF-8?q?=E7=94=9F=E6=88=90=E5=9B=BE=E7=89=87=E9=94=99=E4=BD=8Dbug=20(#2?= =?UTF-8?q?6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 修复安卓生成图片错位bug * Update canvasdrawer.js --- components/canvasdrawer/canvasdrawer.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/components/canvasdrawer/canvasdrawer.js b/components/canvasdrawer/canvasdrawer.js index f01becc..cf0b472 100644 --- a/components/canvasdrawer/canvasdrawer.js +++ b/components/canvasdrawer/canvasdrawer.js @@ -113,7 +113,15 @@ Component({ } this.ctx.draw(false, () => { wx.setStorageSync('canvasdrawer_pic_cache', this.cache) - this.saveImageToLocal() + const system = wx.getSystemInfoSync().system + if (/ios/i.test(system)) { + this.saveImageToLocal() + } else { + // 延迟保存图片，解决安卓生成图片错位bug。 + setTimeout(() => { + this.saveImageToLocal() + }, 800); + } }) }, drawImage (params) { From 18e2274a058b57bd962fd199a0b06d2628dcfa1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B1=B1=E8=B6=85?= Date: Sat, 15 Dec 2018 21:00:31 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat:=208=E5=9B=BE=E5=B9=B6=E8=A1=8C?= =?UTF-8?q?=E4=B8=8B=E8=BD=BD=EF=BC=8C=E5=8A=A0=E5=BF=AB=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E9=80=9F=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/canvasdrawer/canvasdrawer.js | 46 ++++++++++++------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/components/canvasdrawer/canvasdrawer.js b/components/canvasdrawer/canvasdrawer.js index cf0b472..80149e3 100644 --- a/components/canvasdrawer/canvasdrawer.js +++ b/components/canvasdrawer/canvasdrawer.js @@ -30,8 +30,6 @@ Component({ width: 100, height: 100, - index: 0, - imageList: [], tempFileList: [], isPainting: false @@ -56,39 +54,42 @@ Component({ clearInterval(inter) this.ctx.clearActions() this.ctx.save() - this.getImageList(views) - this.downLoadImages(0) + this.getImagesInfo(views) } }, 100) }, - getImageList (views) { + getImagesInfo (views) { const imageList = [] for (let i = 0; i < views.length; i++) { if (views[i].type === 'image') { - imageList.push(views[i].url) + imageList.push(this.getImageInfo(views[i].url)) } } - this.setData({ - imageList - }) - }, - downLoadImages (index) { - const { imageList, tempFileList } = this.data - if (index < imageList.length) { - // console.log(imageList[index]) - this.getImageInfo(imageList[index]).then(file => { - tempFileList.push(file) - this.setData({ - tempFileList + + const loadTask = [] + for (let i = 0; i < Math.ceil(imageList.length / 8); i++) { + loadTask.push(new Promise((resolve, reject) => { + Promise.all(imageList.splice(i * 8, 8)).then(res => { + resolve(res) + }).catch(res => { + reject(res) }) - this.downLoadImages(index + 1) + })) + } + Promise.all(loadTask).then(res => { + let tempFileList = [] + for (let i = 0; i < res.length; i++) { + tempFileList = tempFileList.concat(res[i]) + } + this.setData({ + tempFileList }) - } else { this.startPainting() - } + }) }, startPainting () { const { tempFileList, painting: { views } } = this.data + console.log(tempFileList) for (let i = 0, imageIndex = 0; i < views.length; i++) { if (views[i].type === 'image') { this.drawImage({ @@ -120,7 +121,7 @@ Component({ // 延迟保存图片，解决安卓生成图片错位bug。 setTimeout(() => { this.saveImageToLocal() - }, 800); + }, 800) } }) }, @@ -273,7 +274,6 @@ Component({ this.setData({ showCanvas: false, isPainting: false, - imageList: [], tempFileList: [] }) this.triggerEvent('getImage', {tempFilePath: res.tempFilePath, errMsg: 'canvasdrawer:ok'})