吃辣条的大妖怪
吃辣条的大妖怪
  • 发布:2019-12-24 11:34
  • 更新:2023-04-03 16:47
  • 阅读:2395

【报Bug】uni canvas 在IOS系统下 ,高度超过1000px 不显示绘制内容

分类:uni-app

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]
多次测试后,发现uniapp 的canvas内,在IOS系统下 ,高度设置大于1000px,绘制的内容,不在画布上显示;
MuMu下测试可绘制;

重现步骤

可绘制

<canvas canvas-id="firstCanvas" style="width: 2000px;height: 1000px;" ></canvas>

不可绘制

<canvas canvas-id="firstCanvas" style="width: 2000px;height: 1100px;" ></canvas>

js代码

var context = uni.createCanvasContext('firstCanvas');  
				  
				context.setStrokeStyle("#00ff00")  
				context.setLineWidth(5)  
				context.rect(0, 0, 200, 200)  
				context.stroke()  
				context.setStrokeStyle("#ff0000")  
				context.setLineWidth(2)  
				context.moveTo(160, 100)  
				context.arc(100, 100, 60, 0, 2 * Math.PI, true)  
				context.moveTo(140, 100)  
				context.arc(100, 100, 40, 0, Math.PI, false)  
				context.moveTo(85, 80)  
				context.arc(80, 80, 5, 0, 2 * Math.PI, true)  
				context.moveTo(125, 80)  
				context.arc(120, 80, 5, 0, 2 * Math.PI, true)  
				context.stroke()  
				context.draw()

[步骤]

[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明] HBuilderX2.4.6

[IDE版本号]

[windows版本号]win10

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]

App运行环境说明

[Android版本号]

[iOS版本号]13.3

[手机型号] iphone11

[模拟器型号] MuMu

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2019-12-24 11:34 负责人:无 分享
已邀请:
DCloud_uniCloud_WYQ

DCloud_uniCloud_WYQ

uni-app canvas 内部有高清处理。浏览器canvas大小有限制,超过将无法绘制。举个例子:以iPhone6/7/8 plus为例 ,canvas高度1000对应的实际height属性应为 1000 * 3(dpr) = 3000

  • long198

    请问是否有方法修改这个内部高清处理呢?谢谢。


    2021-06-27 12:32

biubiuo

biubiuo

canvas现在有个hidpi属性,设置为false就不高清化处理了,我也是遇到了这个问题,才知道是高清化引起的......,在哪个有朋友遇到就知道怎么处理了

  • biubiuo

    hidpi设置为false以后,又发现了一个新问题,用uni.canvasToTempFilePath生成的图片只有四分之一的区域有内容,其他四分之三是空白的,hidpi设置为true生成的图片就没有这个问题,应该是个bug吧,我们的业务没多大影响,使用的时候把图片放大了2倍也能凑合用


    2023-04-03 23:27

  • biubiuo

    回复 biubiuo: pixelRatio的问题,测试的时候pixelRatio正好是2,所以是四分之一区域有内容,需要设置图片宽高*pixelRatio


    2023-04-03 23:43

  • m***@163.com

    我也是 hidpi=false dpi=3 就只有九分之一了 文档也没说清楚 找了我一天


    2023-07-31 16:51

  • m***@163.com

    回复 biubiuo: 图片宽高怎么设置呢 我设置导出destWidth*3也没用


    2023-07-31 16:53

  • 9***@qq.com

    回复 biubiuo: 大佬看到你的方法,能显示了,就是图片很模糊,基本看不清楚了


    2023-08-29 14:03

要回复问题请先登录注册