收藏
回答

android 页面高度发生变化后,canvas显示异常

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 微信安卓客户端 7.0.8 2.9.4


<view style="height:{{mHeight||0}}px;"> </view>
<canvas id="mCanvas" type="2d" style="height:100px;width:100px"></canvas>
const {
  pixelRatio
} = wx.getSystemInfoSync();
 
wx.createSelectorQuery().select("#mCanvas").fields({
  node: true,
  size: true
}).exec(([{
  node,
  width,
  height
}]) => {
  const ctx = node.getContext("2d");
  node.width = width * pixelRatio;
  node.height = height * pixelRatio;
  ctx.scale(pixelRatio, pixelRatio);
 
 
  ctx.beginPath();
  ctx.arc(50, 50, 50, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.stroke();
 
  this.setData({ mHeight: 20 });
});

模拟器显示效果:


真机实际结果:


只能在Android真机上复现,测试机型:魅族16th flyme8.0.0.0A,华为 honor 8 lite PRA-AL00 8.0.0.348。

规避办法:

每次setData后重绘canvas。



最后一次编辑于  11-27
回答关注问题邀请回答
收藏

1 个回答

问题标签