Skip to main content

文本

参数#

字段名数据类型默认值必需描述
xintyes文本 X 坐标
yintyes文本 Y 坐标
textstringyes文本内容
widthintyes文本宽度,决定了文本的最大显示宽度,当文字内容超过宽度,会自动换行
fontstringSourceHanSansSC-Normal选择文本渲染使用的字体,请参考 可用字体
fontSizeint18文字大小,单位为pt
lineHeightint字体基础高度文本行高,不能小于fontSize
lineSpacingfloat1行距倍数,lineSpacing * fontSize = lineHeight
colorArray#000000文本颜色
textAlignstringleft文本水平对齐方式,可选值有:leftcenterright
zIndexint0渲染层级,会影响同一位置不同内容的覆盖情况
note

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

定位锚点#

Imgrender-字体组件

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

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

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

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

字体#

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

tip

👉 若想新增更多可免费商用的字体,请添加开发者公众号留言。

imgrender开发者

字体名中文名
jiangxizhuokai江西拙楷
slideyouran演示悠然小楷]
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": "SourceHanSansSC-Normal",    "fontSize": 22,    "color": "#fff",    "width": 320,    "textAlign": "center"}