微信小程序开发：canvas 多行文字换行

最新推荐文章于 2024-01-16 20:42:39 发布

weixin_33806300

最新推荐文章于 2024-01-16 20:42:39 发布

阅读量439

点赞数

原文链接：https://yq.aliyun.com/articles/674049

版权

本文分享了在微信小程序中使用Canvas绘制文章的实用方法，针对不同长度的句子进行自动换行，确保文本美观呈现。通过自定义函数findBreakPoint和breakLinesForCanvas实现了根据屏幕宽度智能调整文本布局。

摘要由CSDN通过智能技术生成

微信小程序开发中，canvas画出一篇文章，由于句子长短不一，画起来确实是费劲，查了不少资料，总结一下：

html部分：

<canvas id='secondCanvas' canvas-id='secondCanvas' style='width:{{414}}px;height:{{750}}px;'></canvas>

js部分：

function findBreakPoint(text, width, context) {

 var min = 0;

 var max = text.length - 1;

 while (min <= max) {

 var middle = Math.floor((min + max) / 2);

 var middleWidth = context.measureText(text.substr(0, middle)).width;

 var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;

 if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {

 return middle;

    }

 if (middleWidth < width) {

      min = middle + 1;

    } else {

      max = middle - 1;

    }

  }

 return -1;

}

function breakLinesForCanvas(context, text, width, font) {

 var result = [];

 if (font) {

    context.font = font;

  }

 var textArray = text.split('\r\n');

 for (let i = 0; i < textArray.length; i++) {

 let item = textArray[i];

 var breakPoint = 0;

 while ((breakPoint = findBreakPoint(item, width, context)) !== -1) {

      result.push(item.substr(0, breakPoint));

      item = item.substr(breakPoint);

    }

 if (item) {

      result.push(item);

    }

  }

 return result;

}

Page({

 /**

   * 页面的初始数据

   */

  data: {

    id: 0,

    info: {}

  },

 /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

 var that = this

 let info = {

 "0": "标题标题标题标题标题标题标题标题",

 "1": "内容内容内容内容内容内容内容内容内容内容内容",

 "2": "我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是",

    };

    that.drawInit(info);

  },

  canvasIdErrorCallback: function (e) {

    console.error(e.detail.errMsg)

  },

 /**

  * 生命周期函数--监听页面初次渲染完成

  */

  onReady: function (e) {},

 /**

   * 绘制图片

   */

  drawInit(info){

 var that = this

 var res = wx.getSystemInfoSync()

 var canvasWidth = res.windowWidth

 // 获取canvas的的宽  自适应宽（设备宽/750) px

 var Rpx = (canvasWidth / 375).toFixed(2)

 //画布高度 -底部按钮高度

 var canvasHeight = res.windowHeight - Rpx * 59

 // 使用 wx.createContext 获取绘图上下文 context

 var context = wx.createCanvasContext('secondCanvas')

 //设置行高

 var lineHeight = Rpx * 30

 //左边距

 var paddingLeft = Rpx * 20

 //右边距

 var paddingRight = Rpx * 20

 //当前行高

 var currentLineHeight = Rpx * 20

 var result

 for (var i in info){

      result = breakLinesForCanvas(context, info[i] || '无内容', canvasWidth - paddingLeft - paddingRight, `${(Rpx * 16).toFixed(0)}px PingFangSC-Regular`)

 //字体颜色

      context.fillStyle = '#000000'

      result.forEach(function (line, index) {

        currentLineHeight += Rpx * 30

        context.fillText(line, paddingLeft, currentLineHeight)  // currentLineHeight 表示文字在整个页面的位置：currentLineHeight + 300 表示整体下移 300px

      });

    }

    context.draw()

  }

})

先这样吧。。。