1. 程式人生 > >微信小程式canvas的撤銷功能

微信小程式canvas的撤銷功能

小程式越來越簡單,提供給開發者的api也越來越多,微信這個平臺真的很厲害~~

-------------------

canvas畫板在塗鴉的時候,一不小心畫錯了一步,想撤銷上一步,還是在微信小程式中去實現這個功能,頓時卡住了,還是去翻百度,翻csdn、簡書,總結了幾個文件按照自己的思路想了一個簡單的方案;

在微信小程式的api支援下是這麼做的:一個動作start->move->end(cancel)就結束了,小程式有個api

saveCurrentDrawWorks: function () {
   wx.canvasToTempFilePath({
      x: 0,
y: 0,
width
: 0, height: 0, destWidth: 0, destHeight: 0, canvasId: self.data.Id, success: function (res) { var imgPath = res.tempFilePath; var allDrawWorksPath = self.data.allDrawWorksPath; allDrawWorksPath.push(imgPath); self.setData({ allDrawWorksPath: allDrawWorksPath, }) }, fail: res => { console
.log('獲取畫布圖片失敗', res); } }) },

在每次start的時候呼叫儲存圖片的這個方法,將當前畫布的圖片儲存在本地的陣列中;

點選撤銷的時候:

drawRevoke: function () {
   var allDrawWorksPath = self.data.allDrawWorksPath;
if (allDrawWorksPath == null || allDrawWorksPath.length == 0 || allDrawWorksPath == undefined) {
return;
}

   var privWorksPath = allDrawWorksPath.
pop(); self.setData({ allDrawWorksPath: allDrawWorksPath, }) drawPath.pop(); self.setPaintSize(self.data.LineWidth); self.setPaintColor(self.data.StrokeStyle); drawContext.drawImage(privWorksPath, 0, 0, screenWidth, screenHeight); drawContext.draw(); if (allDrawWorksPath.length == 0) { } },

刪除儲存陣列中的最後一個圖片地址,並重畫這個地址的圖片(drawImage);

大功告成~雖然簡單,但確實想了很久,,如果有幫到你,我會很開心