该性能问题仅仅会在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

展开全部
收起
2回答
提交回答
  • 至过去的我

    2044人对此回答表示赞同

    我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多>
    发布于
  • Jose

    17人对此回答表示赞同

    我也遇到这个问题。Android上可以60fps,iOS上只有7~9fps。

    展开
    17
    0回复
    发布于 6年前

    评论(0)

    收起评论

  • 话梅

    16人对此回答表示赞同

    我也发现这个问题了,你解决了么?

    展开
    16
    0回复
    发布于 6年前

    评论(0)

    收起评论

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
咨询热线

13312967497

扫码添加业务即可随时咨询 还可领取小程序推广攻略

业务咨询: 13312967497
扫码咨询

扫码咨询套餐

回到顶部