文本

参数

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

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

定位锚点

Imgrender-字体组件

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

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

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

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

字体

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

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

imgrender-开发者

  • SourceHanSansSC-Heavy: 思源黑体-特粗,思源黑体支持简体中文/英文
  • SourceHanSansSC-Bold: 思源黑体-粗
  • SourceHanSansSC-Medium: 思源黑体-中等
  • SourceHanSansSC-Regular: 思源黑体-常规
  • SourceHanSansSC-Normal: 思源黑体-标准
  • SourceHanSansSC-Light: 思源黑体-细
  • SourceHanSansSC-ExtraLight: 思源黑体-特细

  • SourceHanSerifCN-Heavy: 思源宋体-特粗,思源宋体支持简体中文/英文
  • SourceHanSerifCN-Bold: 思源宋体-粗
  • SourceHanSerifCN-SemiBold: 思源宋体-半粗
  • SourceHanSerifCN-Medium: 思源宋体-中等
  • SourceHanSerifCN-Regular: 思源宋体-常规
  • SourceHanSerifCN-Light: 思源宋体-细
  • SourceHanSerifCN-ExtraLight: 思源宋体-特细

  • Alibaba-PuHuiTi-Heavy: 阿里巴巴普惠体-特粗,阿里巴巴普惠体支持简体中文/英文
  • Alibaba-PuHuiTi-Bold: 阿里巴巴普惠体-粗
  • Alibaba-PuHuiTi-Medium: 阿里巴巴普惠体-中等
  • Alibaba-PuHuiTi-Regular: 阿里巴巴普惠体-常规
  • Alibaba-PuHuiTi-Light: 阿里巴巴普惠体-细

示例

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

更新时间: 2021-08-17 00:26:00