3. 绘制扩展 API

drawPoster在创建时，会自动的向ctx(画笔)添加/覆盖扩展方法，以便构建海报矩形。

dp.draw(async (ctx) => {
  // ctx.drawImage | ctx.drawRoundImage | ctx.fillWarpText | ....
})

绘制图片(ctx.drawImage | DrawFunction)

ctx.drawImage(url, x, y, w, h)

drawPoster绘制图片与原生绘制不相同，ctx.drawImage内部已经内置了downloadFile，只需要传入本地/网络地址即可。支持2d与非2d绘制，绘制方式一致。需要await等待绘制。

注意：当绘制环境为H5时，uniapp使用本地图片绘画时不要用尺寸较大的图片，不然会在创建图片时生成失败。

dp.draw(async (ctx)=>{
    const url = "/static/logo.png"
    // const url = "https://...."
    await ctx.drawImage(url, 88, 174.94, 198.98, 36);
})

参数	描述
url	网络图片地址，或本地/static中图片路径。
x，y	图片的左上角的坐标。
width，height	图片的大小。

换行字体(ctx.fillWarpText | DrawFunction)

ctx.fillWarpText(options)

传入配置对象，绘制换行字体，以下为可配置项。

interface FillWarpTextOpts {
  // 绘制字符串, 必传项
  text: string;
  // 绘制最长高度, 默认100px
  maxWidth?: number;
  // 绘制行高, 默认取当前字体的默认宽度
  lineHeight?: number;
  // 绘制行数量, 默认限制为2层
  layer?: number;
  // 绘制x轴, 默认0
  x?: number;
  // 绘制y轴, 默认0
  y?: number;
  // 设置换行字符, 默认为空, 如设置, maxWidth|layer 将会失效
  splitText?: string;
  // 是否不马上进行绘制
  notFillText?: boolean;
}
// 当 `notFillText` 为 `true` 时，则不进行绘制，该函数将返回一个绘制信息队列
// 用于代表每行字体所对应的绘制信息, 以下是返回的结构信息，你可以用于计算该
// 换行字体的宽度，也你可以使用array.forEach与ctx.fillText进行绘制。
[
  { text: string, y: number, x: number}
  // ....
]

圆角矩形(ctx.fillRoundRect | DrawFunction)

ctx.fillWarpText(x, y, w, h, r)

dp.draw(async (ctx)=>{
   // 设置矩形颜色
   ctx.fillStyle = "#fff";
   // 进行绘制
   ctx.fillRoundRect(15, 179, 345, 365.5, 10);
})

参数	描述
x，y	矩形的左上角的坐标。
width，height	矩形的大小。
r	矩形的弧度半径。

圆角图片(ctx.drawRoundImage | DrawFunction)

ctx.drawRoundImage(url, x, y, w, h, r)

dp.draw(async (ctx) => {
  const url = "static/logo.png"
  // const url = "https://...."
  await ctx.drawRoundImage(url, 0, 0, 100, 100, 50);
});

参数	描述
url	网络图片地址，或本地/static中图片路径。
x，y	图片的左上角的坐标。
width，height	图片的大小。
r	图片的弧度半径。