蓝图

蓝图就是渲染配置,服务根据传入的蓝图进行渲染。蓝图除了配置图片的基础信息,还包含了由各种组件组成的图片内容。

参数

  • width: 图片宽度,数据类型为int,默认值为 0,必选参数。
  • height: 图片高度,数据类型为 int,默认值为 0,必选参数。
  • backgroundColor: 图片背景颜色,数据类型为 十六进制颜色,无默认值,必选参数。
  • texts: 图片中的文字内容,由 文本组件 进行组成,数据类型为 文本组件数组,默认值为 空数组,非必选参数。
  • images: 图片中的图像内容,可以将外部图片渲染到新图片上,由 图片组件 组成,数据类型为 图像组件数组,默认值为 空数组,非必选参数。
  • qrcodes: 图片中的二维码内容,可以在图片上渲染二维码内容,由 二维码组件 组成,数据类型为 二维码组件数组,默认值为 空数组,非必选参数。
  • blocks: 图片中的纯色矩形,由 矩形组件 组成,数据类型为 矩形组件数组,默认值为 空数组,非必选参数。
  • lines: 图片中的线段,可用于渲染一些分界线,由 线段组件 组成,数据类型为 线段组件数组, 默认值为 空数组,非必选参数。

在配置蓝图时,推荐按文字、图片、矩形、直线、二维码等元素对图片内容进行拆解,先做出设计稿,再进行参数化,根据实际渲染结果进行微调。

坐标系

坐标系规则为:从左至右为 X 轴,从上至下为 Y 轴,单位为像素(px)。

蓝图的左上角为全局坐标原点(0,0)

imgrender-坐标系示意

在默认情况下,组件的定位锚点在左上角,均以全局坐标原点为参照。例如上图中,二维码图片的(x, y)参数为:(220, 100)。

注意事项

目前暂未限制蓝图的尺寸,但推荐尺寸:宽度 < 640, 高度 < 1100。尺寸过大,会导致渲染速度下降。

减少不必要的外部图片元素,避免引擎下载图片失败,而导致渲染失败。

示例

{
    "width": 640,
    "height": 1034,
    "backgroundColor": "#d04c44",
    "blocks": [],
    "texts": [],
    "images": [],
    "qrcodes": [],
    "lines": []
}