<canvas type="2d" id="myCanvass" class="canvas-div"
style="height:{{canvasInfo.height}}px; position: relative; width:{{canvasInfo.width}}px;transform: scale({{ canvasInfo.scale }});top:{{canvasInfo.top}}px; left:{{canvasInfo.left}}px;"
catchtouchstart="touchstart"
catchtouchmove="touchmove"
catchtouchend="touchend">
</canvas>
这里的canvasInfo是通过下面js回调的值。
其中,js部分如下,其中有针对子组件创建画布,还是当前组件创建画布的判断。
const query = opts.obj && opts.obj.$wx ? wx.createSelectorQuery().in(opts.obj.$wx) : wx.createSelectorQuery()
query.select('#' + this.id)
.fields({ node: true, size: true },(sizeValue)=>{
this.canvasNodewh["_left"] = sizeValue.node._left
this.canvasNodewh["_top"] = sizeValue.node._top
})
.exec((res) => {
this.canvas = res[0].node
this.ctx = this.canvas.getContext('2d')
const sysInfo = wx.getSystemInfoSync();
const dpr = sysInfo.pixelRatio
const winWidth = sysInfo.windowWidth, winHeight = sysInfo.windowHeight;
//--begin
this.scaleNum = 1
if (opts && opts.height && opts.width) {
if(opts.width > winWidth || opts.height > winHeight){
let n = Number(opts.width) / Number(opts.height),
t = Number(winWidth) / Number(winHeight);
if (n > t) {
this.scaleNum = Number(winWidth) / Number(opts.width)
} else {
this.scaleNum = Number(winHeight) / Number(opts.height)
}
}
}
//--end
if(opts.obj && opts.obj.$wx){
this.canvas.width = res[0].width * dpr
this.canvas.height = res[0].height * dpr
this.ctx.scale(dpr, dpr)
//绘画中,获取到的坐标值,超过canvas范围,则放弃处理
this.canvasNodewh["height"] = res[0].height
this.canvasNodewh["width"] = res[0].width
} else {
this.canvas.width = opts.width
this.canvas.height = opts.height
this.canvasNodewh["height"] = opts.height
this.canvasNodewh["width"] = opts.width
}
this.canvasNodewh["top"] = top
绘画使用:
drawStroke(stroke) {
if (stroke.points == null) return;
this.ctx.beginPath();
for (let i = 0; i < stroke.points.length - 1; i++) {
const start = this.normalizePoint(stroke.points[i]);
const end = this.normalizePoint(stroke.points[i + 1]);
this.ctx.moveTo(start.x, start.y);
this.ctx.lineTo(end.x, end.y);
}
this.ctx.closePath();
if (stroke.color) {
this.ctx.strokeStyle = stroke.color;
}
if (stroke.width) {
this.ctx.lineWidth = this.normalizeLineWidth(stroke.width);
}
if (stroke.join) {
this.ctx.lineJoin = stroke.join;
}
if (stroke.cap) {
this.ctx.lineCap = stroke.cap;
}
if (stroke.miterLimit) {
this.ctx.miterLimit = stroke.miterLimit;
}
this.ctx.stroke();
}
使用的主要内容是这些。哪里可能引起在Android手机微信小程序,在开启展示画布一段时间后导致卡死呢?
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
最好能提供能复现问题的代码片段,这样大家才能快速帮你解决
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html