• 在小程序Canvas中使用measureText


    有时候我们在使用Canvas绘制一段文本时,会需要通过measureText()方法获取文本的宽度,例如:

    创建canvas标签

    <canvas id="canvas"></canvas>

    获取一段文本的宽度

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    var text = ctx.measureText('foo'); // TextMetrics object
    text.width; // 16;

    如上所示,measureText返回的其实是一个TextMetrics对象,它包含了文本的宽度,MDN上的解释如下:

    The CanvasRenderingContext2D.measureText() method returns a TextMetrics object that contains information about the measured text (such as its width for example).

    在微信小程序现在的版本(v2.13.7)中,小程序的canvas还不支持measureText,所以我自己写了个类似于measureText方法,通过canvas获取文本的宽度,方法如下:

    function measureText (text, fontSize=10) {
        text = String(text);
        var text = text.split('');
        var width = 0;
        text.forEach(function(item) {
            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;
    }
  • 相关阅读:
    C++中的异常
    Hadoop YARN介绍
    js处理层级数据结构的一些总结
    Python数据结构
    Python的编码风格
    Python流程控制
    java中面试可能会问的问题
    深度学习
    Pescal Triangle Two
    Pascal Triangle
  • 原文地址:https://www.cnblogs.com/10manongit/p/12696295.html
Copyright © 2020-2023  润新知