4233关注13965浏览
该性能问题仅仅会在iphone7plus(ios11.2.6)上表现非常明显,通过拖动图片(尺寸是762x979)不断调用context.drawImage()和context.draw()重绘canvas,会导致界面卡顿,体验非常不流畅!
PS:如上图,canvas性能差不是在微信6.6.2版本中已经解决,不知道是不是没有解决彻底,在iphone7plus还存在?把图片尺寸缩小一半问题同样存在。
const app = getApp()
Page({
data: {
userInfo: {},
hasUserInfo: false,
DOCATTRIBUTES: { PAGEWIDTH: 396.938, PAGEHEIGHT: 510.349},
PAGEITEMS: [{ XPOS: 0, YPOS: 0, WIDTH: 396.938, HEIGHT: 510.211, file: './1.jpg' }, { XPOS: 99.5944, YPOS: 55.6769, WIDTH: 198.949, HEIGHT: 396.218, file: './2.jpg' }, { XPOS: 0, YPOS: 0, WIDTH: 396.938, HEIGHT: 510.211, file: './3.png'}],
width: 0,
height: 0,
editorWidth: 690, //rpx
editorHeight: 960, //rpx
canvasWidth: 0,
canvasHeight: 0,
},
bindViewTap: function() {
},
bindtouchstart:function(e){
console.log(e);
},
bindtouchmove: function (e) {
console.log(e);
var touch0 = { x: e.touches[0].x, y: e.touches[0].y };
var item = this.items[1];
item.x = touch0.x;
item.y = touch0.y;
this.updateDraw();
},
bindtouchend:function(){
},
bindtap:function(e){
console.log(e);
},
bindlongpress:function(e){
console.log(e);
},
updateDraw: function () {
var context = wx.createCanvasContext('circle')
this.items.forEach(function (item) {
context.drawImage(item.file, item.x - item.w / 2, item.y - item.h / 2, item.w, item.h);
}, this);
context.draw();
},
loadPageItems: function () {
var PAGEITEMS = this.data.PAGEITEMS;
for (var i = 0; i < PAGEITEMS.length; i++) {
var item = PAGEITEMS[i];
let x = (item.XPOS + item.WIDTH / 2) * this.templateRatio
let y = (item.YPOS + item.HEIGHT / 2) * this.templateRatio
let w = item.WIDTH * this.templateRatio
let h = item.HEIGHT * this.templateRatio
let file = item.file;
this.items.push({ x: x, y: y, w: w, h: h, file: file });
}
},
onLoad: function () {
var DOCATTRIBUTES = this.data.DOCATTRIBUTES
var ratio1 = this.data.editorWidth / DOCATTRIBUTES.PAGEWIDTH;
var ratio2 = this.data.editorHeight / DOCATTRIBUTES.PAGEHEIGHT;
var ratio = ratio1 > ratio2 ? ratio2 : ratio1;
var canvasWidth = DOCATTRIBUTES.PAGEWIDTH * ratio; //rp
-
至过去的我
2044人对此回答表示赞同
我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多> -
Jose
17人对此回答表示赞同
我也遇到这个问题。Android上可以60fps,iOS上只有7~9fps。
展开170回复分享发布于 6年前评论(0)
收起评论
-
话梅
16人对此回答表示赞同
我也发现这个问题了,你解决了么?
展开160回复分享发布于 6年前评论(0)
收起评论