Puzzles APIs

1. 图文拼接工具 Puzzles 介绍
2. Puzzles APIs

2.1 构造函数
2.2 渲染函数 render()
2.3 绘制背景 drawBackground()
2.4 绘制图片 drawImage()
2.5 绘制文本 drawText()
2.6 绘制矩形 drawRectangle()
2.7 绘制圆形 drawCircle()
2.8 绘制椭圆 drawEllipse()
2.9 绘制多边形 drawPolygon()
2.10 绘制线条 drawLine()

3. Puzzles 中的文本和字体
4. 随机验证码生成

Github地址: https://github.com/Alalabu/puzzles

前言

我们可以认为拼图的过程，就好像在 Photoshop 中做图的过程。或者回忆一下我们在幼儿园去做的贴图画。

贴图画

作画的过程是这样的：

1. 准备画布（背景）
2. 准备素材
3. 将素材定位在画布（背景）上相应的位置
4. 重复 2-3 步...
5. 结束（完成）

Puzzles 做图的过程也是这样的。

2.1 构造函数 constructor({dataType})

dataType [string] 描述响应时接收的数据类型，可选值为：base64、buffer。

• buffer：当访问者是服务器端，有文件处理能力。则可以将响应的 buffer 作为缓存处理或者写入文件等；
• base64：主要面向纯H5前端访问者，通过浏览器自带的 标签，将 base64 格式数据直接赋值于 src 属性即可被渲染为显示图片。

const Puzz = require('puzzles');
// 实例化一个 Puzz 对象
const puzz = new Puzz({dataType: 'buffer'});

2.2 渲染函数 render()

渲染函数(仅服务器端) render()

对拼接过程进行组合并进行渲染，返回值是一个 Promise。返回的 res 对象的数据结构为: {err, msg, data}

const {err, msg, data} = await puzz.render();

渲染函数(仅前端) render([callback])

对拼接过程进行组合并进行渲染，返回数据将传递给回调函数 callback。返回的 res 对象的数据结构为: {err, msg, data}。

puzz.render((err, res) => {
    const imgData = res.data;
    // 页面调用过程中返回数据为base64数据格式,可直接赋值于 img 标签的 src 属性
    document.getElementById('example').src = imgData;
});

2.3 绘制背景 drawBackground({ width, height, bgcolor, isZoom=false, imgurl })

绘制背景(纯色背景或图片背景，二选一)

• 若 imgurl 有值，则为图片背景；
• 上述条件满足时，若 isZoom=true 则会根据 width 和 height的值对图片进行宽高缩放。
• 若 imgurl 为空，且 bgcolor 有值，则会根据 width 和 height的值生成纯色背景。
• 若 bgcolor 与 imgurl 都为空，则抛出异常。
• 注意：当前版本中所有的图片都必须是 weburl 地址，不支持本地图片直接上传拼接。

纯色或图片.jpg

参数描述:
width [number] 整体背景(画布)的宽度，单位 px.
height [number] 整体背景(画布)的高度，单位 px.
bgcolor [string] 背景颜色，仅支持16进制的RGB色值，如 #000000 代表黑色；transparent表示透明色。
isZoom [boolean] 是否缩放背景图, 仅当背景是图片时有效。
imgurl [string] 图片的 url 地址,与 bgcolor 属性至少二选一。

2.4 绘制图片 drawImage({width, height, left, top, imgurl})

除 drawBackground() 之外，所有其他的绘制API，都是以背景底图为主要画布来绘制图层。同时，后绘制的图层会覆盖靠前的图层。
参数描述:
width [number] 图片的宽度，单位 px.
height [number] 图片的高度，单位 px.
left [number] 图片的 x 轴坐标，单位 px.
top [number] 图片的 y 轴坐标，单位 px.
imgurl [string] 图片的 url 地址。

2.5 绘制文本 drawText({top, left, text, color, fontsize, family, borderColor, borderSize, gravity})

参数描述:
left [number] 文本的 x 轴坐标，单位 px.
top [number] 文本的 y 轴坐标，单位 px.
text [string] 文本内容
color [string] 文本颜色，仅支持16进制的RGB色值，如 #000000 代表黑色
fontsize [number] 文本字体大小，单位 px.
family [string] (可选) 文本字体，默认 "msyh" (微软雅黑)。
borderColor [string] (可选) 文本边框颜色，仅支持16进制的RGB色值
borderSize [number] (可选) 文本边框宽度，单位 px.
gravity [string] (可选) 文本位置重心，可选值有：NorthWest、North、NorthEast、West、Center、East、SouthWest、South、SouthEast

2.6 绘制矩形 drawRectangle({width, height, x, y, widthCorner, heightCorner, fillColor, borderSize, borderColor})

参数描述:
width [number] 矩形的宽度，单位 px
height [number] 矩形的高度，单位 px
x [number] 矩形位置的 x 轴坐标，单位 px
y [number] 矩形位置的 y 轴坐标，单位 px
widthCorner [number] 矩形的圆角，单位 px
heightCorner [number] 矩形的圆角，单位 px
fillColor [string] 形状填充颜色，仅支持16进制的RGB色值；transparent表示透明色。
borderSize [number] (可选) 边框宽度，单位 px
borderColor [string] (可选) 形状边框颜色，仅支持16进制的RGB色值

2.7 绘制圆形 drawCircle({x, y, r, fillColor, borderSize, borderColor})

注意：圆形的 x 和 y 表示中心点坐标, 而非左上角坐标。

参数描述:
x [number] 圆形中心位置的 x 轴坐标，单位 px
y [number] 圆形中心位置的 y 轴坐标，单位 px
r [number] 圆形的半径，单位 px
fillColor [string] 形状填充颜色，仅支持16进制的RGB色值；transparent表示透明色。
borderSize [number] (可选) 边框宽度，单位 px
borderColor [string] (可选) 形状边框颜色，仅支持16进制的RGB色值

2.8 绘制椭圆 drawEllipse({x0, y0, rx, ry, a0, a1, fillColor, borderSize, borderColor})

注意：圆形的 x 和 y 表示中心点坐标, 而非左上角坐标。

参数描述:
x0 [number] 圆形中心位置的 x0 轴坐标，单位 px
y0 [number] 圆形中心位置的 y0 轴坐标，单位 px
rx [number] x 轴的半径，单位 px
ry [number] y 轴的半径，单位 px
a0 [number] 绘制的开始角度，单位 px
a1 [number] 绘制的结束角度，单位 px
fillColor [string] 形状填充颜色，仅支持16进制的RGB色值；transparent表示透明色。
borderSize [number] (可选) 边框宽度，单位 px
borderColor [string] (可选) 形状边框颜色，仅支持16进制的RGB色值

2.9 绘制多边形 drawPolygon({points, fillColor, borderSize, borderColor})

参数描述:
points [Array<{x,y}>] points是一个坐标点的集合，集合中每一个对象都由 x 和 y 属性来描述点坐标。集合中，末尾的坐标会与数组首位的坐标自动闭合。
fillColor [string] 形状填充颜色，仅支持16进制的RGB色值；transparent表示透明色。
borderSize [number] (可选) 边框宽度，单位 px
borderColor [string] (可选) 形状边框颜色，仅支持16进制的RGB色值

2.10 绘制线条 drawLine({x0, y0, x1, y1, fillColor, borderSize, borderColor})

参数描述:
x0 [number] 线条开始位置的 x 轴坐标，单位 px
y0 [number] 线条开始位置的 y 轴坐标，单位 px
x1 [number] 线条结束位置的 x 轴坐标，单位 px
y1 [number] 线条结束位置的 y 轴坐标，单位 px
fillColor [string] 形状填充颜色，仅支持16进制的RGB色值；transparent表示透明色。
borderSize [number] (可选) 边框宽度，单位 px
borderColor [string] (可选) 形状边框颜色，仅支持16进制的RGB色值