文本

参数

  • x: 文本 X 坐标,数据类型为:int,默认值为:0,必选参数。
  • y: 文本 Y 坐标,数据类型为:int,默认值为:0,必选参数。
  • text: 文本内容, 数据类型为:string,默认值为:,必选参数。
  • width: 文本宽度,决定了文本的最大显示宽度,当文字内容超过宽度,会自动换行。数据类型为:int,默认值为:0,必选参数。
  • lineHeight: 文本行高,数据类型为:int,默认值为:字体基础高度,非必选参数。
  • font: 选择文本渲染使用的字体,数据类型为:string,可选值可参考 可用字体,必选参数。
  • fontSize: 文字大小,数据类型为:int,默认值为:字体基础大小,非必选参数。
  • color: 文本颜色,数据类型为:十六进制颜色代码,默认值为:#000000,非必选参数。
  • textAlign: 文本对齐方式,可选值有:leftcenterright,默认值为 left,非必选参数。
  • zIndex: 渲染层级,会影响同一位置不同内容的覆盖情况,数据类型为 int,默认值为 0,非必选参数。

由于相同大小的不同字体,文本实际渲染效果可能与设计稿有差异,可根据渲染效果进行微调。

定位锚点

Imgrender-字体组件

字体组件属性textAlign会影响文本的定位锚点。

如上图所示,虚线框为文字展示宽与行高。文本奖品:本田-CB650RtextAlign 属性值为left,则锚点在文本的「左上角」。

文本 长按识别二维码,参与抽奖textAlign 属性值为 center,则锚点在文本「中上」位置。

文本 Davinci LitextAlign 属性值为 right,则锚点在文本「右上角」。

字体

目前暂不支持使用自定义字体。imgrender 目前提供以下可免费商用的字体:

👉 若想新增字体(该字体需可免费商用),可添加开发者公众号留言。

imgrender-开发者

示例

{
    "x": 320,
    "y": 185,
    "text": "Davinci Li",
    "font": "jiangxizhuokai",
    "fontSize": 22,
    "color": "#fff",
    "width": 320,
    "textAlign": "center"
}