收藏
回答

canvas的drawImage在iphone7plus上性能很差,拖图卡顿明显

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug drawImage/canvas 客户端 iOS 6.6.5 1.9.96

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

var canvasHeight = DOCATTRIBUTES.PAGEHEIGHT * ratio; //rpx

var rpx2px = app.globalData.windowWidth / 750


this.templateRatio = canvasWidth * rpx2px / DOCATTRIBUTES.PAGEWIDTH

this.setData({

width: app.globalData.windowWidth,

height: app.globalData.windowHeight,

canvasWidth: canvasWidth,

canvasHeight: canvasHeight

})

this.items = [];

this.loadPageItems();

this.updateDraw();

}

})


最后一次编辑于  2018-03-30
回答关注问题邀请回答
收藏

2 个回答

  • Haishan
    Haishan
    2018-04-30

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

    2018-04-30
    赞同
    回复
  • 陈川波
    陈川波
    2018-04-25

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

    2018-04-25
    赞同
    回复