7***@qq.com
7***@qq.com
  • 发布:2019-06-18 19:17
  • 更新:2020-09-28 11:16
  • 阅读:1516

【报Bug】APP端ctx.measureText 获取文本的宽度总是0

分类:uni-app

详细问题描述

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

[内容] uniapp,APP端ctx.measureText获取文本的宽度一直都是0,但是小程序端获取又是正常的

重现步骤

[步骤]

[结果]

[期望]

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

IDE运行环境说明

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

[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

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

[运行端版本号]

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

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

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

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

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

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2019-06-18 19:17 负责人:无 分享
已邀请:
s***@gmail.com

s***@gmail.com

这个问题没得到官方沟通么兄弟?

jones2000

jones2000 - https://github.com/jones2000/HQChart

function JSUniAppCanvasHelper() { }  
  
JSUniAppCanvasHelper.MeasureText=function(text, canvas)   
{  
    var font = canvas.font;  
	var fontSize = 12;  
    var pos=font.search('px');  
    if (pos>0)   
    {  
        var strSize = font.substring(0,pos);  
        fontSize = parseInt(strSize);  
    }  
	text = String(text);  
	var text = text.split('');  
	var width = 0;  
	for (let i = 0; i < text.length; i++)   
	{  
		let item = text[i];  
		if (/[a-zA-Z]/.test(item))   
		{  
			width += 7;  
		} else if (/[0-9]/.test(item))   
		{  
			width += 5.5;  
		} else if (/\./.test(item))   
		{  
			width += 2.7;  
		} else if (/-/.test(item))   
		{  
			width += 3.25;  
		} else if (/[\u4e00-\u9fa5]/.test(item))   
		{  
			width += 10;  
		} else if (/\(|\)/.test(item))   
		{  
			width += 3.73;  
		} else if (/\s/.test(item))   
		{  
			width += 2.5;  
		} else if (/%/.test(item))   
		{  
			width += 8;  
		} else   
		{  
			width += 10;  
		}  
	}  
	return width * fontSize / 10;  
}

创建画布的时候覆盖下它自己的方法

var canvas=wx.createCanvasContext(this.ID);  
        if (this.IsUniApp)  
        {  
            console.log('[JSCanvasElement::GetContext] measureText() => JSUniAppCanvasHelper.MeasureText()');  
            canvas.measureText = function (text) //uniapp 计算宽度需要自己计算  
            {  
                var width = JSCommonUniApp.JSUniAppCanvasHelper.MeasureText(text, canvas);  
                return { width: width };  
            }  
      }  

DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX alpha 2.9.0+ 已修复

该问题目前已经被锁定, 无法添加新回复