zoukankan      html  css  js  c++  java
  • 微信小程序生成海报分享:canvas绘制文字溢出如何换行

    主要思路:

      1、先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串

      2、计算另起的行总数,比如总共3行,也就是说将原来的一个长字符串按宽度分成了3行,然后循环绘制出这3行字符串即可。

    注意事项:

      就是需要 a-- 那里,防止丢失字符的情况,假如不 a-- 的话,那么每换行时就会少一个字。

    ctx.setFontSize(11)
    ctx.fillStyle = "#000"
    offsetHeight = that.drawArticle(ctx, item.title, width - 50, 20, offsetHeight)
    
    // 绘制文字自动换行
        drawArticle(ctx, kl, width, x, y) {
          let chr = kl.split('') // 分割为字符串数组
          let temp = ''
          let row = []
          for (let a = 0; a < chr.length; a++) {
            if (ctx.measureText(temp).width < width) {
              temp += chr[a]
            } else {
              a--
              row.push(temp)
              temp = ''
            }
          }
          row.push(temp)
    
          for (var b = 0; b < row.length; b++) {
            // 控制最多显示2行
            if (b < 2) {
              ctx.fillText(row[b], x, y + b * 20);
            }
          }
          let _len = row.length > 2 ? 2 : row.length
          return y + (_len - 1) * 20
        },
  • 相关阅读:
    【js】右下角浮动窗口
    malefile
    跟我一起学习VIM
    Linux服务器开发初步
    如何学习Linux
    什么是Java序列化?如何实现序列化?
    java微信工众号开发
    史上最全最强SpringMVC详细示例实战教程
    Hibernate注解方法使用总结
    Hibernate注解
  • 原文地址:https://www.cnblogs.com/goloving/p/10765467.html
Copyright © 2011-2022 走看看