画布高度一定要先设置吗？

[kwen94]

看了好些项目，文本长度不固定，需要自动换行的支持的很少，有些还不支持2d。。。

[kiccer]

你的实现需求是什么样的？是什么情况下需要动态设置高度，按理说微信的 'rpx' 单位基本上能自动适应各种机型了

[kwen94]

需求就是 上半部分一段长度不固定的文字，下半部分是二维码。 上半部分的文字要能自动换行，我现在还是粗略的用文字总宽度 / 屏幕宽度 * 行高 = 文本高度， 得到文本高度再初始化画布高度 然后再画每一行文本。

您这个项目开始的时候就需要给这个画布高度么？

.canvas-container { width: 600rpx; height: 900rpx; }

还是说有啥更好的用法？

[kiccer]

高度也可以改变的，你只需要在绘制之前重新初始化一次画布就可以了, https://github.com/kiccer/wx-canvas-2d/blob/0c77c8e040441f3711be5addb36ac6a0ac3f58b5/miniprogram/components/post/index.js#L60-L70 canvas 的高度需要你自己去计算了，我没法根据你的文本高度和二维码高度帮你自动调整 canvas 高度。 但我个人的建议是给文本固定一个最大行数。 如果你不需要做保存成图片的功能的话，上面的文本完全可以用原生标签实现，下面的二维码用 canvas 实现。

[kiccer]

如果你要自己计算高度的话我可以给你提供一个思路

import {
    WxCanvas2d,
    Text
} from 'wx-canvas-2d'

const canvas = new WxCanvas2d()

canvas.create({
    query: '.poster-canvas', // 必传，canvas元素的查询条件
    rootWidth: 750, // 参考设备宽度 (即开发时UI设计稿的宽度，默认375，可改为750)
    bgColor: '#fff', // 背景色，默认透明
    component: this, // 自定义组件内需要传 this
    radius: 16 // 海报图圆角，如果不需要可不填
})

let text = 'Hello World'
let width = 600
let fontSize = 30

canvas.draw({
    series: [
        {
            type: Text,
            text: text,
            flag: 'article',
            fontSize: fontSize,
            width: width
        }
    ]
})

canvas.on('afterDraw', e => {
    if (e.config.flag === 'article') {
        const rowLen = Math.ceil(canvas.ctx.measureText(text).width / canvas.xDpr(width)) // 文本换行行数
        const canvasHeight = rowLen * fontSize

        if (canvasHeight !== this.data.canvasHeight) {
            this.setData({
                canvasHeight: canvasHeight // 如果高度发生变化就重新设置高度 (rpx)
            })

            // 设置完高度后重新调用 canvas.create canvas.draw 绘制
        }
    }
})

具体细节你可以摸索着完善一下。

[kwen94]

好的，感谢，回去我试下！

[kwen94]

在测试文本换行的时候，最后一行刚好多出一个字的话，好像这个字就不显示了

// pages/test3/index.js
import {
  WxCanvas2d,
  Text
} from 'wx-canvas-2d'

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

    // 实例化对象
    const canvas = new WxCanvas2d()

    // 创建画布
    canvas.create({
        query: '.poster-canvas', // 必传，canvas元素的查询条件
        rootWidth: 750, // 参考设备宽度 (即开发时UI设计稿的宽度，默认375，可改为750)
        bgColor: '#fff', // 背景色，默认透明
        component: this, // 自定义组件内需要传 this
        radius: 16 // 海报图圆角，如果不需要可不填
    })

    canvas.draw({
      series: [
          {
              type: Text,
              text: '即：在这里😄😄哈哈要根据表1中的followList，查出列表中每个item对应的表2的数据(对应的字段是Reporter_name和unit)，并且放在一个数组中，应该如何实现呢哈一二三',
              fontSize: 30,
              width: 750
          }
      ]
  })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

[kiccer]

我排查一下

[kiccer]

在 #6 修复了，安装一下最新的 v2.4.3 版本。