Imgrender - 动态图片渲染

蓝图

蓝图

蓝图,表明了图片中的内容、以及对应的样式。

字段名必需类型默认值解释
widthYesInt0图片宽度
heightYesInt0图片高度
backgroundColorYesHexColor""图片背景颜色
textsNoArray[Text]文本组件
imagesNoArray[Image]图片组件
qrcodesNoArray[Qrcode]二维码组件
blocksNoArray[Block]矩形组件
linesNoArray[Line]直线组件

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

坐标系

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

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

Imgrender-坐标系示意

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

注意事项

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

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

示例

{
"width": 640,
"height": 1034,
"backgroundColor": "#d04c44",
"blocks": [],
"texts": [],
"images": [],
"qrcodes": [],
"lines": []
}
Edit this page on GitHub