直接使用canvas绘制图像,颜色, android手机上效率低下, ios效率还不错
如图 android才2帧,这如何是好???
调试找到原因 是绘制文字比较耗时 方法如下:
drawTextLeft(pcText, x, y, rect, color, flag, font) { if (pcText == null || pcText.length == 0) { return; } let scale = scaleWidth; let fontSize = textSize; let mapScale = MAP_SCALE; if (SM.IS_PAINT_MAP) { scale = mapScale; fontSize = textHZK12 * mapScale; } this.ctx.save(); if (rect != null && rect.w > 0 && rect.h > 0) { this.setClipMap(rect.x, rect.y, rect.w, rect.h, scale); } else { this.setClip(0, 0, WIDTH, HEIGHT); } //console.log("-=drawTextLeft=- pcText:", pcText, " x=", x ," y=",y ); this.ctx.fillStyle = int2color(color); this.ctx.font = fontSize + "px Arial"; this.ctx.textBaseline = "top"; //top/bottom/middle/normal //需要折行显示 if ((flag & ENUM.DRAW_TEXT_EX_IS_AUTO_NEWLINE) == ENUM.DRAW_TEXT_EX_IS_AUTO_NEWLINE) { let chr = pcText.split(""); let temp = ""; let row = []; for (let i = 0; i < chr.length; i++) { if (chr[i] === '\n') { row.push(temp); temp = ""; continue; } if (this.ctx.measureText(temp + chr[i]).width < rect.w * scale) { temp += chr[i]; } else { row.push(temp); temp = ""; i--; } } row.push(temp); for (let i = 0; i < row.length; i++) { this.ctx.fillText(row[i], x * scale, (y * scale + i * fontSize)); } } else { this.ctx.fillText(pcText, x * scale, y * scale); } this.setClip(0, 0, WIDTH, HEIGHT); this.ctx.restore(); } |
仅绘制2个文字 9遍时 非常耗时!
帮忙看看 具体是哪里的问题,多谢啦!
您好，能否提供出现问题的详细代码片段或者demo，我们需要进一步确认卡顿瓶颈。
是因为在绘制文字时用了一下这些方法
this.ctx.save();this.setClip(x, y, 100, 16);this.ctx.fillText(pcText, x, y);this.setClip(0, 0, WIDTH, HEIGHT);this.ctx.restore();
所以导致性能下降, 如此的话 可能要考虑用离屏canvas了!
请问你最后是怎么解决的呢。我现在是在画图片，想用手指触控控制显示图片的大小，其他逻辑都ok就是每一次一拖动重新绘制就要很久，打log算了下时间有时候能到一秒，这完全没法玩
还没解决!
额，我也放弃了。如果没有什么复杂操作只是显示图片和文字，可以尝试用view来，我现在就在用这个方法。canvas效率确实很低。
使用的是 微信v7.0.3 物理分辨率,,
安卓要是换成逻辑分辨率 效率还可以,但太模糊了!