蓝图

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

参数

  • width: 图片宽度,内容不能超过此宽度,数据类型为 int,必选参数。
  • height: 图片高度,内容不能超过此高度,数据类型为 int,必选参数。
  • backgroundColor: 图片背景颜色,数据类型为 十六进制颜色,必选参数。

  • borderColor: 四条边框颜色,数据类型为 Hex Color Code,默认值为 #000,非必选参数。
  • borderWidth:四条边框宽度,注意边框宽度一半在内部,一半在外部。其数据类型为 int,默认值为 0,非必选参数。
  • borderTopColor: 上边框边框颜色,优先级高于 borderColor,数据类型为 Hex Color Code,默认值为 #000,非必选参数。
  • borderTopWidth: 上边框边框宽度,优先级高于 borderWidth,数据类型为 int,默认值为 0,非必选参数。
  • borderBottomColor: 下边框边框颜色,优先级高于 borderColor,数据类型为 Hex Color Code,默认值为 #000,非必选参数。
  • borderBottomWidth: 下边框边框宽度,优先级高于 borderWidth,数据类型为 int,默认值为 0,非必选参数。
  • borderLeftColor: 左边框边框颜色,优先级高于 borderColor,数据类型为 Hex Color Code,默认值为 #000,非必选参数。
  • borderLeftWidth: 左边框边框宽度,优先级高于 borderWidth,数据类型为 int,默认值为 0,非必选参数。
  • borderRightColor: 右边框边框颜色,优先级高于 borderColor,数据类型为 Hex Color Code,默认值为 #000,非必选参数。
  • borderRightWidth: 右边框边框宽度,优先级高于 borderWidth,数据类型为 int,默认值为 0,非必选参数。
  • borderRadius: 边框四个顶点圆角半径,数据类型为 int,默认值为 0,非必选参数。
  • borderTopLeftRadius: 边框左上角顶点圆角半径,优先级高于 borderRadius,数据类型为 int,默认值为 0,非必选参数。
  • borderTopRightRadius: 边框右上角顶点圆角半径,优先级高于 borderRadius,数据类型为 int,默认值为 0,非必选参数。
  • borderBottomLeftRadius: 边框左下角顶点圆角半径,优先级高于 borderRadius,数据类型为 int,默认值为 0,非必选参数。
  • borderBottomRightRadius: 边框右下角顶点圆角半径,优先级高于 borderRadius,数据类型为 int,默认值为 0,非必选参数。

  • 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": []
}