响应卡片绘制

部分功能场景下，Bot的回答包含较多文字和插图（如"每日新闻"，"功能列表"），为避免发送大量文字的风控风险、美化回复信息的展示形式，可以将这些内容转化为一张图片发送。Little-UNIkeEN-Bot 基于 pillow 封装了 responseImage 库，方便开发者快速构建此类图片，以下是两个示例。

导入 responseImage 库

responseImage 库位于 ./utils/ 目录下。在插件代码中使用如下代码导入此库：

from utils.responseImage import *

提示

在使用本库前，请确保 ./resources/fonts/ 目录下 汉仪文黑.ttf 和 SourceHanSansCN-Medium.otf 字体文件存放完整，否则您将无法使用默认字体。 如要更换默认字体或字体存放地址，请修改库中全局常量代码。

创建图片

本库的所有操作均基于 ResponseImage 类完成，新建一个 ResponseImage 类的实例以创建一张图片。

示例代码：

img = ResponseImage(
    theme = 'unicorn',
    title = '帮助列表', 
    titleColor = (165, 255, 255, 255), 
    primaryColor = PALETTE_SJTU_RED, 
    footer = '更新日期 2022/08/30',
    layout = 'two-column')

可选的参数如下：

属性名称	描述	取值	取值说明	备注
theme	主题	unicorn	表示使用默认主题	可选，默认为'unicorn'
autoSize	自动调整大小	bool型变量	表示是否根据信息内容调整大小	可选默认为True
layout	布局方式	normal	表示单栏布局	可选，默认为单栏
		two-column	表示双栏布局
height	图片高度	int型变量	表示图片高度	可选，默认为800，autoSize为True时无效
width	图片宽度	int型变量	表示图片宽度	可选，默认为880，autoSize为True时，将固定width自动调整高度
title	标题	str型变量	表示显示在图片顶部的标题	可选，不支持换行，默认为'响应卡片'
titleColor	标题框颜色	tuple型变量	表示标题框颜色的RGBA值	可选，若缺省，则与primaryColor一致
primaryColor	主题色	tuple型变量	表示主题色的RGBA值，将应用于前景卡片关键句颜色	可选，默认为蓝色
backColor	背景色	tuple型变量	表示图片背景颜色的RGBA值	可选，默认为(240,240,240,255)
footer	页脚	str型变量	表示显示在图片底部的页脚	可选，不支持换行，默认为空
cardTitleFont	前景卡片标题字体	ImageFont.FreeTypeFont型变量	表示前景卡片标题使用的字体及大小	可选
cardSubtitleFont	前景卡片副标题字体	ImageFont.FreeTypeFont型变量	表示前景卡片副标题和关键句使用的字体及大小	可选
cardBodyFont	前景卡片正文字体	ImageFont.FreeTypeFont型变量	表示前景卡片正文使用的字体及大小	可选

添加前景卡片

ResponseImage 实例相当于一个容器。如要让图片展示各类信息，你需要向实例添加一个或多个"前景卡片"。

"前景卡片"机制可以帮助你将各类信息分组展示。

addCard() 添加卡片

使用 ResponseImage.addCard() 函数，向 ResponseImage 实例添加单个前景卡片。卡片在图片中按添加卡片的顺序显示。

示例代码：

img.addCard(
    ResponseImage.NormalCard(
        title ='原神2.1版本',
        subtitle = '「韶光抚月，天下人间」PV台词',
        body = """风雨犹祝，山海同欢，是承天地之佑；
星移斗转，沧海桑田，烟火人间依旧；
功名在我，百岁千秋，毋忘秉烛夜游；
古今诸事，激荡中流，宏图待看新秀。""",
        icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAA...',
        subtitleFontColor=PALETTE_GREEN,
        backColor=PALETTE_LIGHTGREEN
    )
)

库预设了多种卡片类型可供添加：

NormalCard

标准类型前景卡片，内容左对齐。

可供编辑的参数如下：

属性名称	描述	取值	取值说明	备注
title	标题	str型变量	表示前景卡片显示的标题	可选
subtitle	副标题	str型变量	表示前景卡片显示的副标题	可选
keyword	关键句	str型变量	表示前景卡片显示的关键句	可选，关键句字体同副标题，颜色同图片主题色
body	正文	str型变量	表示前景卡片显示的正文	可选
icon	图标	str型变量或Image对象	表示前景卡片靠左显示的图标	可选，支持本地图片/网络图片地址，base64编码串或PIL.Image对象。将自动缩放为90x90大小显示
titleFontColor	标题字体颜色	tuple型变量	表示前景卡片标题字体颜色的RGBA值	可选，默认为黑色
subtitleFontColor	副标题字体颜色	tuple型变量	表示前景卡片副标题字体颜色的RGBA值	可选，默认为深灰
bodyFontColor	正文字体颜色	tuple型变量	表示前景卡片正文部分字体颜色的RGBA值	可选，默认为浅灰
backColor	卡片背景颜色	tuple型变量	表示前景卡片背景颜色的RGBA值	可选，默认为白色

提示：空行

在同一项中试图添加空行时，请尽量确保空行至少含有一个空格

示例代码及效果：

img.addCard(
    ResponseImage.NormalCard(
        title ='[title 标题] 可选，支持自动换行/多行文本',
        subtitle = '[subtitle 副标题] 可选，支持自动换行/多行文本',
        keyword = '[keyword 关键句] 可选，支持自动换行/多行文本，字体同副标题，颜色同关键色',
        body = '[body 正文] 可选，支持自动换行/多行文本，\n左对齐显示',
        icon = '...',
    )
)

NoticeCard

通知类型前景卡片，内容居中显示。

可供编辑的参数如下：

属性名称	描述	取值	取值说明	备注
title	标题	str型变量	表示前景卡片显示的标题	可选
subtitle	副标题	str型变量	表示前景卡片显示的副标题	可选
keyword	关键句	str型变量	表示前景卡片显示的关键句	可选，关键句字体同副标题，颜色同图片主题色
body	正文	str型变量	表示前景卡片显示的正文	可选
illustration	配图	str型变量或Image对象	表示前景卡片底部显示的配图	可选，支持本地图片/网络图片地址，base64编码串或PIL.Image对象。若图片过大，将自动缩放以适配卡片宽度
titleFontColor	标题字体颜色	tuple型变量	表示前景卡片标题字体颜色的RGBA值	可选，默认为黑色
subtitleFontColor	副标题字体颜色	tuple型变量	表示前景卡片副标题字体颜色的RGBA值	可选，默认为深灰
bodyFontColor	正文字体颜色	tuple型变量	表示前景卡片正文部分字体颜色的RGBA值	可选，默认为浅灰
backColor	卡片背景颜色	tuple型变量	表示前景卡片背景颜色的RGBA值	可选，默认为白色

示例代码及效果：

img.addCard(
    ResponseImage.NoticeCard(
        title ='NoticeCard\n[title 标题] 可选，支持自动换行/多行文本',
        subtitle = '[subtitle 副标题] 可选，支持自动换行/多行文本',
        keyword = '[keyword 关键句] 可选，支持自动换行/多行文本，字体同副标题，颜色同关键色',
        body = '[body 正文] 可选，支持自动换行/多行文本，\n居中显示',
        icon = 'https://picx.zhimg.com/v2-7d1069f8beeeae09f0d26812941cebe0_1440w.jpg?source=172ae18b',
    )
)

RichContentCard

富内容复合类型卡片，可以在一个前景卡片中显示复合格式的多行文本。

属性名称	描述	取值	取值说明	备注
raw_content	内容	list型变量	表示前景卡片显示的内容	可选，以列表嵌套元组形式输入，元组示例：（格式，内容）
icon	图标	str型变量或Image对象	表示前景卡片靠左显示的图标	可选，支持本地图片/网络图片地址，base64编码串或PIL.Image对象。将自动缩放为90x90大小显示
titleFontColor	标题字体颜色	tuple型变量	表示前景卡片标题字体颜色的RGBA值	可选，默认为黑色
subtitleFontColor	副标题字体颜色	tuple型变量	表示前景卡片副标题字体颜色的RGBA值	可选，默认为深灰
bodyFontColor	正文字体颜色	tuple型变量	表示前景卡片正文部分字体颜色的RGBA值	可选，默认为浅灰
backColor	卡片背景颜色	tuple型变量	表示前景卡片背景颜色的RGBA值	可选，默认为白色

内容以列表的形式输入'raw_content'参数，列表中每项为一个形如 (类型，内容) 的元组，其中可选项如下。

类型名称	描述	内容类型	备注
title	标题	str型变量
keyword	关键句	str型变量
subtitle	副标题	str型变量
body	正文	str型变量
separator	分割线		分割线类型无需提供内容项
progressBar	进度条	float型变量(0-1)	内容项第一项即进度条进度，如在进度项后加'auto'项，则会自动根据进度更改颜色；如在进度项后加两项颜色变量，则可分别指定进度条前景色和背景色

示例代码及效果：

img.addCard(
    ResponseImage.RichContentCard(
        raw_content=[
            ('title', 'RichContentCard'),
            ('keyword', '弦月舞步'),
            ('body', '普通攻击：可以进行至多三段的连续剑击；重击消耗一定体力进行一次旋转斩击；下落攻击，从空中下坠冲击地面，攻击下落路径上的敌人，并在落地时造成范围伤害。'),
            ('separator',),
            ('keyword', '七域舞步'),
            ('subtitle', 'E技能'),
            ('body', '展开”翩转”状态，基于妮露的生命值上限对身边的敌人造成水元素伤害。'),
            ('separator',),
            ('keyword', '浮莲舞步 远梦聆泉'),
            ('subtitle', 'Q技能'),
            ('body', '基于妮露的生命值上限，造成水元素范围伤害，并为命中的敌人施加“水世流沔”状态，短暂间隔后，处于“永世注沔”状态下的敌人将受到水元素伤害。'),
        ],
        icon = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgo.hackhome.com%2Fimg2022%2F7%2F5%2F11%2F23040603.jpg&refer=http%3A%2F%2Fimgo.hackhome.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667132746&t=a133591be6a3a16de33e20c8989f424c'
    )
)

BlankCard

空白卡片，参数如下：

属性名称	描述	取值	取值说明	备注
size	高度	int型变量	表示前景卡片的高度 (不含边框和间距)	可选，默认为0
backColor	卡片背景颜色	tuple型变量	表示前景卡片背景颜色的RGBA值	可选，默认为白色

addCardList() 添加卡片列表

使用 ResponseImage.addCardList() 函数，可以以列表形式一次添加多个前景卡片，卡片类型同上。

使用字典类型添加卡片

除使用形如 NormalCard 等类外，你也可以使用字典形式添加卡片数据，字典的 style 键值必选，表示卡片类型。以下两段代码的效果相同：

img.addCard(
    ResponseImage.NormalCard(
        title ='[title 标题] 可选，支持自动换行/多行文本',
        subtitle = '[subtitle 副标题] 可选，支持自动换行/多行文本',
        keyword = '[keyword 关键句] 可选，支持自动换行/多行文本，字体同副标题，颜色同关键色',
        body = '[body 正文] 可选，支持自动换行/多行文本，\n左对齐显示',
        icon = '...',
    )
)

img.addCard(
    {
        'style':'normal',
        'title': '[title 标题] 可选，支持自动换行/多行文本',
        'subtitle': '[subtitle 副标题] 可选，支持自动换行/多行文本',
        'keyword': '[keyword 关键句] 可选，支持自动换行/多行文本，字体同副标题，颜色同关键色',
        'body': '''[body 正文] 可选，支持自动换行/多行文本，
左对齐显示''',
        'icon': '...'
    }
)

注意

使用字典类型作为参数添加卡片，好处是方便修改卡片类型，缺点是没有代码提示、容易打错字段名称，所以，请小心检查字典中的键！

generateImage() 生成并保存

使用 ResponseImage.generateImage(savePath) 函数生成图片并保存图片到硬盘。

函数返回值是一个 PIL.Image 对象，你可以对此对象使用 pillow 库继续编辑。

函数参数如下：

参数名称	描述	取值	取值说明	备注
savePath	保存地址	str型变量	表示图片的保存地址	可选，默认为空 (不保存)

getBlankCoord() 获取空白卡片坐标

使用 ResponseImage.getBlankCoord() 获得 BlankCard 类型卡片的位置。

函数返回值是一个列表，列表每项是一 BlankCard 类型卡片四角的坐标。使用此坐标，你可以在添加的空白卡片处绘制。

常量列表

库中预设了一些颜色常量，方便开发者统一颜色

标准颜色常量

常量名称	描述	取值	示例
PALETTE_BLACK	黑色	(0, 0, 0, 255)	示例文字
PALETTE_WHITE	白色	(255, 255, 255, 255)	示例文字
PALETTE_GERY	灰色	(158, 158, 158, 255)	示例文字
PALETTE_GREY_SUBTITLE	灰色(副标题)	(95, 95, 95, 255)	示例文字
PALETTE_GREY_CONTENT	灰色(正文)	(125, 125, 125, 255)	示例文字
PALETTE_GERY_BORDER	灰色(边框)	(213, 213, 213, 255)	示例文字
PALETTE_GERY_BACK	灰色(背景)	(240, 240, 240, 255)	示例文字
PALETTE_RED	红色	(221, 0, 38, 255)	示例文字
PALETTE_LIGHTRED	浅红色	(255, 232, 236, 255)	示例文字
PALETTE_GREEN	绿色	(0, 191, 48, 255)	示例文字
PALETTE_LIGHTGREEN	浅绿色	(219, 255, 228, 255)	示例文字
PALETTE_ORANGE	橙色	(244, 149, 4, 255)	示例文字
PALETTE_LIGHTORANGE	浅橙色	(254, 232, 199, 255)	示例文字
PALETTE_BLUE	蓝色	(32, 131, 197, 255)	示例文字
PALETTE_LIGHTBLUE	浅蓝色	(9, 188, 211, 255)	示例文字
PALETTE_CYAN	青色	(0, 150, 136, 255)	示例文字
PALETTE_INDIGO	靛蓝色	(69, 84, 164, 255)	示例文字

SJTU 视觉标准色常量

以下颜色满足上海交通大学视觉识别系统的颜色标准

常量名称	描述	取值	示例
PALETTE_SJTU_RED	交大红	(200, 22, 30, 255)	示例文字
PALETTE_SJTU_DARKRED	交大暗红	(167, 32, 56, 255)	示例文字
PALETTE_SJTU_ORANGE	交大橙	(240, 131, 0, 255)	示例文字
PALETTE_SJTU_YELLOW	交大黄	(253, 208, 0, 255)	示例文字
PALETTE_SJTU_BLUE	交大蓝	(0, 134, 209, 255)	示例文字
PALETTE_SJTU_DARKBLUE	交大暗蓝	(0, 64, 152, 255)	示例文字
PALETTE_SJTU_GREEN	交大绿	(51, 141, 39, 255)	示例文字
PALETTE_SJTU_CYAN	交大青	(0, 81, 78, 255)	示例文字