获取字体宽度#30

我的目标是测量名称的宽度，从而相应地设置名称标签背景的宽度，以使得标签能容纳对应名称，但是发现测出来的结果不符合预期，文本进行了换行，标签背景的宽度也不正确。另外，在不同dpr机型的上效果也不一致。请教一下是哪里出了问题。 ``` const { WxCanvas2d, Debugger, SaveToAlbum, Image, Text, Rect, Line, Qrcode } = requirePlugin('wx-canvas-2d') WxCanvas2d.use(Debugger) WxCanvas2d.use(SaveToAlbum) const canvas = new WxCanvas2d() console.log({ canvas }) Component({ /** * 组件的属性列表 */ properties: { show: { type: Boolean, default: false }, item: { type: Object, default: {} } }, /** * 组件的初始数据 */ data: { }, lifetimes: { attached () { setTimeout(() => { // 创建 canvas.create({ query: '.poster-canvas', // 必传，canvas元素的查询条件 rootWidth: 750, // 参考设备宽度 (即开发时UI设计稿的宽度，默认375，可改为750) bgColor: '#fff', // 背景色，默认透明 component: this, // 自定义组件内需要传 this radius: 16 // 海报图圆角，如果不需要可不填 }).then(() => { console.log('画布创建成功') }).catch(err => { console.log('画布创建失败: ', err) }) }, 500) }, detached () { // 在组件实例被从页面节点树移除时执行 } }, /** * 组件的方法列表 */ methods: { onClose () { // canvas.clear() this.triggerEvent('close') }, onAfterEnter () { if (!this.properties.item) return const { item } = this.properties const name = 22; // 名称字体大小 const type = 12; // 类别字体大小 const padding = 6; // 文字左右边距 // 文字宽度 const nameWidth = canvas.xDpr(canvas.ctx.measureText(item.name).width); const typeWidth = canvas.xDpr(canvas.ctx.measureText(item.type).width); // 绘制 canvas.draw({ series: [ { type: Rect, x: 30, y: 620, bgColor: '#f22', width: nameWidth + padding, height: name + 20, radius: 24 },{ type: Text, text: item.name, x: 30, y: 620, color: '#222', fontSize: name, lineHeight: name + 20, width: nameWidth + padding, align: 'center', }, { type: Rect, x: 150, y: 672, bgColor: '#222', width: typeWidth + padding, height: type + 20, radius: 24 },{ type: Text, text: item.type, x: 150, y: 672, color: '#fff', fontSize: type, lineHeight: type + 20, width: nameWidth + padding, align: 'center', }, // 其他绘制元素 ] }).then(() => { console.log('绘制成功！') }).catch(err => { console.log('绘制失败！', err) }) } } }) ``` - dpr = 3 iPhone15 ProMax  - dpr = 2 iPhoneXR