小程序Canvas文字自动换行

系统管理员 2021-10-01 10:22 455阅读 0赞

不废话了，在网上找轮子，找到的都是缺胳膊少腿的，干脆自己写了。以下是demo

function text (msg, fontSize, maxWidht, textTop, lineHeight) {
        /*
            msg: 文本内容
            fontSize: 文字宽度
            maxWidht: Canvas宽度
            textTop: 文本的高度
            lineHeight: 行高
        */
        ctx.setFontSize(fontSize);
        let str = msg
        let list = [[]]
        let ind = 0
        for (var i = 0;i < str.length;i++) {
            if (fontSize * i >= maxWidht - fontSize) {
                ind = i
                break
            }
        }
        let Nub = 0
        let Storage = 0
        for (var i = 0;i < str.length;i++) {
            if (Nub === ind) {
                Nub = 0
                ctx.fillText(list[Storage].join(''), 5, textTop + (Storage * lineHeight))
                Storage++
                list.push([])
            }
            Nub++
            list[Storage].push(str[i])
        }
        if (list[Storage]) {
            ctx.fillText(list[Storage].join(''), 5, textTop + (Storage * lineHeight))
        }
    }
    text('这是一段文字用于文本自动换行文本长度自行设置欢迎大家指出缺陷', 20, 143, 40, 30)

换行原理比较笨比

1.  循环需要换行的字符串
2.  然后进行判断，判断条件是：**单个字体的宽度（乘以）循环索引 >= Canvas的宽度（减）一个字体的宽度。**
3.  如果条件成立，则记录改索引，并且终止循环。**注：该索引就是一行能书写多少个子的个数。（为了方便下文，我们假设var ind = 3）**  
    **以下是笨比操作，有一行的字体个数各位就可以尽情操作了。**
4.  继续循环字体个数，每次循环的索引 === ind的时候，则push一个数组，push完之后，最终：会得到每一行的字数和行数
5.  然后，每次push的时候，进行画布操作。

![18749935-23eb1bf45f9f8049.png][]

微信截图\_20191015181029.png

[18749935-23eb1bf45f9f8049.png]: /images/20210825/fa059d8b5e7240c5a2bc47b93f898d50.png

发表评论取消回复

表情：

评论列表（有 0 条评论，455人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序自动换行

*word-break: break-all; ** **在需要换行的view上添加这个样式即可** ![watermark_type_ZmFuZ3poZW5naG...

Love The Way You Lie/ 2024年04月17日 17:26/ 0 赞/ 75 阅读

相关微信小程序view文字内容无法自动换行

加上以下代码可以自动换行 display: block; text-overflow: ellipsis; word-wrap: break-word

比眉伴天荒/ 2023年10月03日 14:56/ 0 赞/ 30 阅读

相关 canvas合成文字以及对文字进行换行处理

代码已上传至github github代码地址：https://github.com/Miofly/mio.git <!DOCTYPE html> <h

桃扇骨/ 2023年03月13日 03:22/ 0 赞/ 40 阅读

相关 vue 创建canvas画板制作图片和文字，支持文字自动换行

canvas文档：https://www.runoob.com/jsref/dom-obj-canvas.html 创建画板、图片、文字、自动换行都是分开方法，可以灵活调用

落日映苍穹つ/ 2023年03月12日 07:13/ 0 赞/ 7 阅读

相关小程序换行

通过`\n` 和 `css` 属性 `white-space: pre-wrap;` 实现换行 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

我不是女神ヾ/ 2022年12月28日 12:52/ 0 赞/ 161 阅读

相关 html+canvas+输入文字换行,HTML5 canvas 绘制的文字如何换行？

HTML5 里的 canvas 元素是一个图形容器，我们可以通过 JavaScript 来控制它绘制各种文本和图像。在使用 canvas 绘制某字符串的时候，我们可能想要让

川长思鸟来/ 2022年10月06日 11:44/ 0 赞/ 340 阅读

相关移动端canvas合成图片，填充文字自动换行

今天用canvas合成带有微信公众号二维码和祝福语的春节贺卡 ![这里写图片描述][70] 由于代码都是原生的没有引入其他库，所以直接将对应部分贴出来吧。 html

骑猪看日落/ 2022年05月31日 07:45/ 0 赞/ 345 阅读

相关小程序实现canvas中文字换行

实现canvas中文字换行 const ctx = wx.createCanvasContext('shareImg'); ctx.setFontSize(1

野性酷女/ 2022年05月09日 18:28/ 0 赞/ 274 阅读

相关 18.微信小程序之canvas绘制多行文本自动换行，支持换行符换行

canvas中的文本由用户输入，因此需要把一堆文字进行换行。当用户按下回车键进行换行时，也得将换行信息绘制出来。 drawText:function(ctx,item

心已赠人/ 2022年03月30日 16:12/ 0 赞/ 1010 阅读

相关小程序Canvas文字自动换行

不废话了，在网上找轮子，找到的都是缺胳膊少腿的，干脆自己写了。以下是demo function text (msg, fontSize, maxWidht, text

系统管理员/ 2021年10月01日 10:22/ 0 赞/ 456 阅读