安卓 canvas組件draw函數(shù)的回調(diào)不執(zhí)行
canvas遮擋了底部按鈕哨免，canvas在組件的組件內(nèi)茎活，按鈕在頁面
方法一：
cover-view包裹頁面按鈕，ios沒問題琢唾，安卓還是被canvas遮擋载荔；又把按鈕放到組件內(nèi)，嵌套在canvas內(nèi)還是被遮擋采桃；
方法二：
2懒熙、canvas轉(zhuǎn)圖片，ios沒問題普办，安卓draw()的回調(diào)不執(zhí)行煌珊，下面的代碼只能打印到‘開始畫’，然后就是fail了泌豆。
很多人碰到canvas的draw()回調(diào)不執(zhí)行的問題
setTimeout(() => {
console.log('開始畫');
ctx.draw(true, () => {
console.log('開始轉(zhuǎn)換');
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 690,
height: 552,
canvasId: canvasId,
success: res => {
console.log('success', res.tempFilePath)
},
fail: err => {
// eslint-disable-next-line
console.log('fail', err, err.stack);
}
}, this);
});
}, 4000);
解決方案：
- canvas放在組件內(nèi) draw() 回調(diào)不執(zhí)行定庵，放在 page內(nèi)可以執(zhí)行
- 出現(xiàn)這個問題，放在page里draw回調(diào)可以執(zhí)行，放在組件里就不行
轉(zhuǎn)載來自微信開放社區(qū)
Canvas 第二次draw回調(diào)失效蔬浙，圖片不顯示
想要多次保存文件猪落，但是圖不是相同的，實際場景是要畫3張不同的圖畴博，實際場景是根據(jù)接口返回的數(shù)據(jù) canvas生成三張不同樣式的名片 用戶選擇喜歡的樣式保存圖片到相冊笨忌。
ctx.draw(false, () => {
drawed.call(this);
});
ctx.draw(true, () => {
drawed.call(this);
});
畫圖的API用起來感覺一次操作沒完的時候，進行第二次操作有會問題俱病。之前我碰見的是 canvas 轉(zhuǎn)數(shù)組的API官疲，不能連續(xù)調(diào)用。亮隙。也是必須一次轉(zhuǎn)換完成之后途凫，才能進行第二次。如果有必要的話溢吻，你也可以考慮用多個canvas試試维费，看能不能同時進行
解決方案：
- 遞歸
<image wx:for="{{imgList}}" src="{{item}}" style="width:200rpx;height:200rpx;"></image>
<canvas canvas-id='canvas' style="width:200px;height:200px;position:absolute;left:800rpx"></canvas>
const app = getApp()
Page({
data: {
imgList:[]
},
onReady: function() {
this.ctx = wx.createCanvasContext("canvas")
this.list = ["red","yellow","blue"]
this.index = 0
this.drawFn()
},
drawFn: function(){
if(this.index<this.list.length){
let color = this.list[this.index]
this.ctx.setFillStyle(color)
this.ctx.fillRect(0, 0, 200, 200)
this.ctx.draw(false,()=>{
wx.canvasToTempFilePath({
canvasId: 'canvas',
success:res=>{
console.log(res)
this.data.imgList.push(res.tempFilePath)
this.setData({
imgList: this.data.imgList
})
this.index++
this.drawFn()
}
}, this)
})
}
}
})
轉(zhuǎn)載自 微信開放社區(qū)
畫布canvas.draw方法callback真機下不執(zhí)行的問題解決
CanvasContext.draw(boolean reserve, function callback) 一些場景中部分真機 callback 回調(diào)未觸發(fā)的問題分析與解決
ctx.setFillStyle('#F83');
ctx.fillRect(0, 0, 400, 800);
ctx.draw(true,()=>{//第一次調(diào)用draw方法
if (hasImage) {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
const tempFilePaths = res.tempFilePaths
ctx.drawImage(tempFilePaths[0], 10, 10, 300, 300); //做了一個畫圖動作
ctx.draw(true, drawAfterToTempFile); //第二次調(diào)用draw方法，真機下drawAfterToTempFile方法會被執(zhí)行
}
})
} else { //完成最后繪制
//部分真機下drawAfterToTempFile回調(diào)不會被執(zhí)行
ctx.draw(true, drawAfterToTempFile);//第二次調(diào)用draw方法
//猜測由于第二次調(diào)用draw方法與第一次調(diào)用之間畫布沒有任何其它動作促王，所以第二次draw方法并沒有實際執(zhí)行到觸發(fā)callback回調(diào)的地方犀盟，導(dǎo)致callback看似失效。
//修改方法一：在第二次調(diào)用draw方法之前執(zhí)行一些動作蝇狼，例如：ctx.moveTo(0,0);ctx.fill();
//修改方法二：既然第二次調(diào)用draw方法沒有任何繪制動作阅畴，那就直接調(diào)用執(zhí)行drawAfterToTempFile()就行了，沒必要包一個draw方法迅耘。
}
});
var drawAfterToTempFile = function() {
wx.canvasToTempFilePath({
canvasId: "myCanvasId",
success(res) {
console.log('繪制圖片存為臨時文件：', res.tempFilePath)
},
fail(err) {
console.log('繪制圖片存為臨時文件失敿妗：', err);
}
}, _this)
}
轉(zhuǎn)載自微信開放社區(qū)
最終解決問題的是，最后的這個方法豹障，使canvasContext發(fā)生需要draw的變更。特此記錄
2019-08-23
于上海
