小程序实现canvas中文字换行

野性酷女 2022-05-09 18:28 264阅读 0赞

实现canvas中文字换行

const ctx = wx.createCanvasContext('shareImg');
    ctx.setFontSize(15);
    ctx.setFillStyle('#333333');
    let str = 'RumbaTime时尚手表潮流时装女表电子钢带石英表美国正品进口表';
    that.drawText(ctx, str, 45, ImgHeight + 70, 30, 265);// 调用行文本换行函数
    
    /**
     * 绘制多行文本
     * @param ctx canvas对象
     * @param str 文本
     * @param leftWidth 距离左侧的距离
     * @param initHeight 距离顶部的距离
     * @param titleHeight 文本的高度
     * @param canvasWidth 文本的宽度
     * @returns {*}
     */
    drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
        let lineWidth = 0;
        let lastSubStrIndex = 0; //每次开始截取的字符串的索引
        for (let i = 0; i < str.length; i++) {
            lineWidth += ctx.measureText(str[i]).width;
            if (lineWidth > canvasWidth) {
                ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
                initHeight += 22; //22为 文字大小20 + 2
                lineWidth = 0;
                lastSubStrIndex = i;
                titleHeight += 22;
            }
            if (i == str.length - 1) { //绘制剩余部分
                ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
            }
        }
        // 标题border-bottom 线距顶部距离
        titleHeight = titleHeight + 10;
        return titleHeight;
    },

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

相关 Taro 小程序 Canvas文字居中

重点就是textAlign必须写在fillText之前, 文字的x轴必须设置为你的canvas宽度的一半 // 绘制文本 ctx.font = `norm

拼搏现实的明天。/ 2023年03月06日 05:04/ 0 赞/ 9 阅读

相关小程序换行

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

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

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

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

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

相关 staruml文字换行

有两种方法开启分词支持第一种在编辑文本的时候在Format菜单中选择“Word Wrap” 在这个组件的属性中找到Format，找到“Word Wrap”选项，

喜欢ヅ旅行/ 2022年06月15日 04:10/ 0 赞/ 990 阅读

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

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

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

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

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

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

相关小程序View内的文字不换行（cover-view）

今天发现View内的文字一行过去直接被屏幕右边吃掉，没有预期的换行，设置width也不管用，最后用它解决了 1. white-space:pre-line（不会保留空白和ta

矫情吗；*/ 2021年11月23日 02:42/ 0 赞/ 521 阅读

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

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

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