- 在某些Android设备上(比例比较高)canvas绘制数字文本间距有问题,会挤在一起
管理员,您好,请问有没有解决的可能?或者有什么办法可以绕过? =========================== 半个月前 管理员,您好,我是 LeaferJS 的作者,最近收到很多用户的反馈,说在某些Android设备上(比例比较高)canvas绘制数字文本间距有问题,会挤在一起,挺影响使用体验的,以下是截图: [图片] 我问了一下AI,反馈的结果如下,不知官方是否能考虑修复一下: 微信小程序canvas绘制文字间距有问题的bug是存在的吗? 是的,文字间距有问题的bug是真实存在的,这是小程序Canvas在不同Android设备上的一个已知问题。 问题确认官方已知问题根据微信官方文档和社区反馈,这个问题确实存在: 微信官方文档在Canvas相关说明中会提示字体渲染可能存在差异开发者社区有大量相关反馈和讨论不同Android厂商的设备表现不一致具体表现症状javascript // 同样的代码在不同设备上表现不同 ctx.setFontSize(16) ctx.fillText('Hello World', 50, 50) 问题设备表现: 字符间距过大或过小文字重叠或间隔不均匀换行位置不一致文本宽度测量不准确技术原因分析1. 字体渲染引擎差异Android系统碎片化:不同厂商使用不同的字体渲染引擎Skia vs DirectWrite:不同图形后端对字体度量的计算方式不同字体替换机制:当指定字体不存在时,不同系统的替换策略不同2. 字体度量计算不一致javascript // 在不同设备上measureText结果可能不同 const width1 = ctx.measureText('文本').width const width2 = ctx.measureText('文').width + ctx.measureText('本').width // 在某些设备上 width1 ≠ width2 3. 实际案例证据开发者社区反馈示例: text "华为P40上文字间距正常,小米10上间距过大" "OPPO设备文字重叠,三星设备间距正常" "Android 10系统正常,Android 11系统间距异常" 解决方案验证我提供的解决方案都是基于实际项目经验和社区验证的: 已验证有效的方法明确指定字体族 - 减少系统字体替换的不确定性手动控制字间距 - 绕过系统自动排版使用measureText精确计算 - 避免依赖自动换行实际项目中的应对策略javascript // 生产环境中常用的兼容性写法 function safeDrawText(ctx, text, x, y) { // 1. 明确字体 ctx.font = '14px "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' // 2. 设备检测和适配 const systemInfo = wx.getSystemInfoSync() let spacing = 0 if (systemInfo.platform === 'android') { spacing = 0.3 // Android设备额外间距 } // 3. 手动绘制每个字符 for (let i = 0; i < text.length; i++) { ctx.fillText(text[i], x, y) x += ctx.measureText(text[i]).width + spacing } } 建议的验证方式如果你怀疑这个问题是否存在,可以: 多设备测试:在华为、小米、OPPO、vivo等不同品牌Android设备上测试对比验证:同样的Canvas代码在iOS和Android上的表现差异社区搜索:在微信开放社区搜索"canvas 字体间距"、"文字渲染差异"等关键词结论:这个问题是真实存在的,不是理论推测。在实际的小程序开发中,处理Canvas文字渲染的跨设备兼容性是必须考虑的事项。 =========================== 目前使用LeaferJS的用户挺多的,我们上层框架比较难搞定这个问题,期待官方能修复~: LeaferJS 是一款开源、好用的 Canvas 引擎,革新的开发体验,可用于高效绘图 、UI 交互(小游戏、互动应用、组态)、图形编辑。 提供了丰富的 UI 绘图元素,和开箱即用的功能,如自动布局、图形编辑、SVG 导出等,方便与 PS、 Figma、Sketch 等产品进行对接。并为跨平台开发提供了统一的交互事件,如拖拽、旋转、缩放手势等。 https://www.leaferjs.com ===========================
09-29 - 小程序的Canvas组件在3.0.0之后,drawImage无法使用离屏画布
管理员好,期待你们的开发团队能修复这个问题~ 如果支持上了,小程序的图形编辑能力将得到很大的增强,可以用来做专业的原生图形编辑工具。 可以看一下我们正在做的引擎:https://www.leaferjs.com LeaferJS 是一款好用的 Canvas 引擎,革新的开发体验,可用于高效绘图 、UI 交互(小游戏、互动应用、组态)、图形编辑。 提供了丰富的 UI 绘图元素,和开箱即用的功能,如自动布局、图形编辑、SVG 导出等,方便与 PS、 Figma、Sketch 等产品进行对接。并为跨平台开发提供了统一的交互事件,如拖拽、旋转、缩放手势等。 期待回复~ --------------------1年前 您好,我是 LeaferJS 的创始人,我们正在开发一款可以支持微信小程序的轻量化Canvas 2D图形渲染引擎,比较依赖Canvas组件与离屏画布的交互能力,3.0.0之前的几个版本,我们的用户使用基本都没问题,3.0.0之后Canvas组件drawImage就突然不能绘制离屏画布了。用户通过我们提供的API能够很方便的绘制海报、开发图形编辑工具,在一定程度上可以增强小程序的画布能力,希望官方能够开启这个支持,谢谢~ 在index.wxml中创建Canvas组件,然后在index.js文件中通过drawImage将离屏画布绘制到Canvas中会报错~ 代码片段: https://developers.weixin.qq.com/s/jgljvxmB7CLH 报错内容: [图片]
2023-09-27