欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

ios微信小程序canvas动态给宽高的bug

程序员文章站 2022-07-01 15:10:39
最近在用小程序新版canvas写分享海报的时候,发现ios有bug。刚开始把canvas的宽高直接写死,测试是没问题的。后来新增了个页面,也要用到分享海报,并且图片尺寸的比例不一样了,我就尝试将之前的分享海报封装成组件。内部就不展示了,宽度改成动态传入,高度也跟随改动。

最近在用小程序新版canvas写分享海报的时候,发现ios有bug。
刚开始把canvas的宽高直接写死,测试是没问题的。

<canvas 
  type="2d" 
  id="shareImg" 
  style="width: 530rpx; height: 943rpx;"
></canvas>

后来新增了个页面,也要用到分享海报,并且图片尺寸的比例不一样了,我就尝试将之前的分享海报封装成组件。内部就不展示了,宽度改成动态传入,高度也跟随改动。

<canvas 
  type="2d" 
  id="shareImg" 
  style="width: {{width}}rpx; height: {{width * canvasHeight / canvasWidth}}rpx;"
></canvas>

安卓没有问题,但是同事的iPhone就不行了,canvas的比例不对,宽度比预想的小了很多。百度没找到解决方案,最后十分无奈,只能把宽高改回去,完全写死,如下。这样的结果就是,对图片的比例要求一致,不能自适应了。

<canvas 
  type="2d" 
  id="shareImg" 
  style="width: 530rpx; height: 943rpx;"
></canvas>

PS:宽高写死后,我发现比例不符合要求的图片在ios不会被拉伸,正常应该是拉伸适应我给定的宽高的,安卓也是拉伸的。

本文地址:https://blog.csdn.net/qq_39730030/article/details/107103284