@retailwe/ui-canvas-poster v0.0.4

canvas-poster 海报分享组件

canvas-poster是一个生成二维码海报的组件，通过非常简单的配置就可以生成精美的海报

1 引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-canvas-poster": "@retailwe/ui-canvas-poster/index"
}

2 代码演示

2.1 基础用法

  <wr-canvas-poster id="wr-canvas-poster" width="750" height="800"></wr-canvas-poster>

import { DEFAULT_CONFIG } from './type';

Page({
  posterContext: null,

  handleGeneratePoster() {
    (this.getPosterContext() as any).showPoster(DEFAULT_CONFIG).then(res => {
      console.log('生成海报返回的临时路径', res);
    });
  },

  // 获取canvas-poster组件实例
  getPosterContext() {
    if (!this.posterContext) {
      (this.posterContext as any) = this.selectComponent('#wr-canvas-poster');
    }
    return this.posterContext;
  },
});

3 API说明

3.1 Props

3.2 实例可调用方法

showPoster用法如下，其中，DEFAULT_CONFIG是类型为ViewItem[]的海报配置信息，3.3将重点讲解。该函数返回promise回调，可以通过then方法获取canvas海报生成的图片的临时路径，用于保存到本地。

    (this.getPosterContext() as any).showPoster(DEFAULT_CONFIG).then(res => {
      console.log('生成海报返回的临时路径', res);
    });

3.3 海报配置信息

海报配置信息的格式为ViewItem[]，其中，ViewItem的定义如下：

type ViewItem =
  | {
      type: EnumViewType.LINE;
      start: Point;
      end: Point;
      css: LineStyle;
    }
  | {
      type: EnumViewType.VIEW;
      css: ViewStyle;
    }
  | {
      type: EnumViewType.IMAGE;
      url: string;
      css: ImageStyle;
    }
  | {
      type: EnumViewType.TEXT;
      text: string;
      css: TextStyle;
    }
  | {
      type: EnumViewType.QRCODE;
      content: string;
      css: QRcodeStyle;
    };

enum EnumViewType {
  LINE = 'line',
  VIEW = 'view',
  IMAGE = 'image',
  TEXT = 'text',
  QRCODE = 'qrcode',
}

下面将详细解释每种类别可传入的配置信息

3.3.1 Line 配置

• Point类型：

• LineStyle类型：

其中，线性渐变的颜色可用函数传入，传入的格式为：

(
  ctx: WechatMiniprogram.CanvasContext,
  start: Point,
  end: Point,
  width: number,
) => WechatMiniprogram.CanvasGradient;

3.3.2 View 配置

• ViewStyle类型：

其中，background字段的类型如下所示：

type Background =
  | number
  | string
  | GetBackgroundGradient
  | WechatMiniprogram.CanvasGradient;

3.3.3 Image 配置

• ImageStyle类型：

3.3.4 Text 配置

• TextStyle类型：

其中，background字段的类型如下所示：

type Background =
  | number
  | string
  | GetBackgroundGradient
  | WechatMiniprogram.CanvasGradient;

• 新功能

为满足同一行字体大小不一致的情况，比如价格标签，新功能支持基于前一个文本右下角进行定位。

使用方法参考如下：

// 自定义的id
const PRICE = 'price';

// 配置如下：
  {
    type: 'text',
    text: '98.',
    positionId: PRICE, // 定义一个positionId
    css: {
      left: '32rpx',
      top: '644rpx',
      fontSize: '28rpx',
      color: '#ff0000',
      fontWeight: 600,
      lineHeight: '28rpx',
    },
  },
  {
    type: 'text',
    text: '00',
    relativePositionId: PRICE,  // 相对前一个 positionId 为 PRICE 的文本右下脚进行定位
    css: {
      left: 0,
      top: '-20rpx',
      fontSize: '20rpx',
      color: '#ff0000',
      fontWeight: 600,
      lineHeight: '20rpx',
    },
  },

3.3.5 QRcode 配置

• QRcodeStyle类型

其中，background字段的类型如下所示：

type Background =
  | number
  | string
  | GetBackgroundGradient
  | WechatMiniprogram.CanvasGradient;