tt-simple-canvas-posters

tt-simple-canvas-posters

Fork from simple-canvas-posters

扩展了一部分能力，对字节平台也做了部分兼容

一款用 canvas 绘制朋友圈分享海报的简单工具，优点支持相对位置布局，无需计算绝对位置，会根据相对图层的位置改变布局。

目前仅支持字节小程序，可在 mpvue, nui-app 中使用。

安装

npm install tt-simple-canvas-posters --save

使用

import SimpleCanvas from 'tt-simple-canvas-posters';
 
const canvas = new SimpleCanvas({
  scale: 1,
  canvasId: 'canvas'
}); // 实例化对象
 
canvas
  // 创建画板
  .createArtboard({
    id: 'share',
    backgroundColor: '#ffffff',
    width: 375,
    height: 600
  })
 
  // 创建avatar图片
  .drawCircleImage({
    id: 'avatar',
    path:
      'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqML1IepKLibmc8XmO9pUKRh41ghjMZ8Kl3aQgmxwibC9PTRngUicicthczHGO6icyWgCYKPztcKa1NsOA/132',
    left: 10,
    top: 10,
    d: 60
  })
  // 创建文字
  .drawWrapText({
    id: 'nickname',
    fontSize: 16,
    text: `超级大魔王~`,
    // 位置参照
    referLayer: {
      id: 'avatar',
      left: 12,
      top: -(canvas.avatar.height / 2 + 8)
    }
  })
 
  .draw();

API

构造函数

参数

{
  scale: 1, // 缩放比例
  canvasId: 'canvas' // canvas组件的ID，必须与视图层相同
}

实例成员

instance.ctx CanvasContext 对象，当 API 不满足需求时，可以使用 ctx，直接调用小程序 Canvas API 进行绘制。

instance.layers 保存着所有图层

静态方法

SimpleCanvas.textHeight({text='', width=200, lineHeight=1, fontSize=12, scale=1})

获取文本高度

SimpleCanvas.textWidth({text='', fontSize=12, scale=1})

获取文本宽度

实例方法

instance.getAutoCanvasHeight():number

自动计算 canvas 的高度

instance.createArtboard({backgroundColor, width, height}):instance

指定颜色，大小，创建画板

instance.createRectangle({left, top, width, height, radius=0, path?, borderColor?, borderWidth?, backgroundColor?}):instance

创建矩形，可以填充图片颜色边框，可以指定圆角

instance.drawImage({left, top, path, width, height, mode?, sWidth?, sHeight?}):instance

绘制图片，mode 目前只支持'center'

instance.drawCircleImage(left, top, path, d):instance

绘制圆形图片

instance.drawWrapText({left, top, text='', fontSize=12, fontStyle?, width=200, lineHeight=1, color=''#333333'', fontFamily='Arial', maxLine?}):instance

绘制文字，可控制最大宽度自动换行，最大行数

instance.draw(callback):instance

绘图，绘制完成会执行 callback 回调

参数说明

参数	描述	类型
id	图层 ID	string
scale	缩放比	number
height	高度	number
width	宽度	number
left	x 轴坐标	number
top	y 轴坐标	number
d	半径	number
path	图片路径	string
fontSize	字体大小	number
fontStyle	字体风格，字节只支持['italic', 'small-caps', 'bold']	string
fontFamily	字体	string
text	文字内容	string
lineHeight	行高比例	number
maxLine	文字最大行数	number
backgroundColor	背景颜色	[string, CanvasGradient color]
color	字体颜色	string
borderWidth	边框宽度	number
borderColor	边框颜色	string
radius	边框弧度	number
mode	绘制图像的模式，只支持'center'	string
sWidth	图片宽度	number
sHeight	图片高度	number
referLayer	相对某个图层定位{id, left, top}	object

在原生小程序中使用

npm run build 之后将 dist/index.js copy 到原生小程序项目中