关于图片附加的文本域
基础要求
| 先尝试回答下面的问题：什么是文本域、文本光标？什么是窗口字符、底层字符？窗口字符分为哪些类型？窗口字符、底层字符有哪些固定格式？ |  需要先了解基础知识哦！ |
如果你对上述问题有疑问，那么说明你还不了解 窗口字符。
需要去看看：”23.窗口字符 > 关于窗口字符.docx”。
相关插件
核心插件：
◆Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心
插件本体：
◆Drill_PictureAdditionalTextArea 图片 - 图片附加的文本域
该插件能够在图片贴图中，开辟出一个文本域，并能在上面绘制文本。
附加的文本域
1）原理
文本域：是指绘制窗口字符的区域，文本域具有高度和宽度。
字符或字符效果如果越出了边界，则会被遮挡。
（文本域详细原理介绍，可以看看“23.窗口字符 > 关于窗口字符.docx”的绘制原理）
图片的文本域： 指在图片中建立的文本域。
图片的文本域大小就是 图片资源 的高宽。
如果文本过长，会超出边界范围，如下图。
2）逐个绘制
插件在设置文本前，可以开启逐个绘制：
默认是一次性绘制（不支持消息输入字符），
开启后变为逐个绘制（支持消息输入字符），
逐个绘制会在一个时间段内持续绘制每个字符，但消耗的插件性能也更多。
| 并不是所有的文本域都用 逐个绘制 就好看哦。大部分情况下，用户都想立即看到全部文本内容，不喜欢慢慢显示文字的磨叽。 |
从零开始设计（DIY）
设计一张简单的卡片
1. 设置一个目标
2024年10月6日，上个月大改了窗口字符底层，这个月终于能在图片上绘制文本了。
所以这里我先介绍最基本的用法。
2. 结构规划/流程梳理
首先，需要图片文本域插件：
◆Drill_PictureAdditionalTextArea 图片 - 图片附加的文本域
然后，文本域中要添加许多窗口字符，这里先用几个基础的窗口字符插件：
◆Drill_CoreOfCharDraw 系统 - 字符绘制核心
◆Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心
◆Drill_DialogTextAlign 窗口字符 - 文本居中
就可以开始绘制了。
（你可以单独开一个新工程，然后自己试一下效果）
3. 图片设置
首先，创建一张图片。
就用示例里的蓝卡片资源图片“卡片-透明(大)-青”。
然后，添加插件指令，添加一个临时的文本。
其它可用的插件指令如下。
测试游戏，就能看见图片的左上角有文本了。
卡片太小，写文本的空间就不够，所以用大的卡片。但作为游戏卡片时，卡片太大了也不好看，具体要看你如何设计。可以去了解下文档：“16.图片 > 卡片设计-单图的卡片.docx”。 |
4. 添加窗口字符
前面的步骤，只是添加了一串临时文本。
但卡片里面还需要更多文字。
这时候，就可以在插件配置中写小文章。
前面提到了，用 文本居中 插件，可以让文本居中。
这里可以空几行，然后写一行居中的文本，然后再写一段描述。
由图可知，描述文字太长了，要换行。
这里可以使用自动换行<wordwrap>，在任意位置加就行。
加了之后会发现文字自动换行了，但是全挤在一起。
这是因为自动换行开启后，会排除所有普通换行符。
即图中”文本内容-1”的换行效果，全部被去除了。
你需要加 手动强制换行符
，才能在自动换行生效的情况下，继续换行。
（加在每行的末尾即可）
接下来，可以加一些其它自定义的窗口字符作为装饰了。
（里面修改了字体大小\fs[]、\{、\}，并且加了文本颜色\c[]）
（窗口字符核心自带这些基本字符设置）
5. 定时重绘设置
上述操作能实现一张基本的卡片制作。
但是在游戏中，还有一种常见情况，就是卡片描述中的 文本、数字（指代字符）会变。
以卡片中的“分数”为例，如果显示分数，写成下面的样子即可。
但是，这个分数，绘制一次后，就不会再改变了，后面如果分数更新了值。
该卡片上的文本，也不会变化。
这时候，可以使用文本域插件提供 定时重绘 的功能，
该功能每隔几帧重新绘制一次，这样就能实时变化了。
设计一张完整含文本域的卡片（指向）
主要用到了下列插件：
Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心
Drill_DialogTextAlign 窗口字符 - 文本居中
Drill_PictureAdditionalTextArea 图片 - 图片附加的文本域
使用 窗口字符+图片，可以设计一张完整的精致的卡牌。
（注意，只是设计卡面，不含点击与功能效果）
你可以去看看文档 ”16.图片 > 卡片设计-含文本域的卡片.docx” 。
