ddqi
(weearc)
1
由于近一段时间还算宽裕因此打算开个坑简单描述一下如何自己手搓 FCITX5 皮肤，因为自己能力有限因此只能从比较简单的视觉层面的地方来描述如何进行绘制，因为目前仍在使用 Arch Linux ，因此部分包名可能和 openSUSE 有一定出入，另外因为对 fcitx5 是如何渲染这些皮肤的可能理解和实际还有不小差别，因此如果存在错误还请海涵以及批评指正。
为了方便的进行说明和制作，我们这里首先需要安装 kcm-fcitx5 ，接下来就可以直接在 systemsettings 中很方便的进行调整。
区域划分
这里以我作为实验品进行绘制的这个主题作为示例进行说明，根据 kcm 中的描述，一个皮肤实际分为如下区域：
- 文字区域
- 内容区域
- 翻页按钮
- 输入区域面板
这些区域划分如果你对 CSS 比较熟悉的话是很容易理解的，紧贴着这些部分的是它实际的边框，而比如图中圈 2 部分，上面看起来 “撑起来整个输入面板” 的是内容区域的 “外边框”
用 CSS 来解释就是 padding 都是 0 ，然后这里面外边框是 margin。根据多次试验，输入法输入面板实际是从左上角即输入光标位置开始绘制，因此可能在添加其他元素的时候会造成输入法面板与实际输入位置相隔过远的现象，不知道后续版本是否会进行改善，不过目前对于较为朴素的输入法主题来说是没有影响的。
这个部分所讲解的区域划分实际是为了后续添加其他元素而方便理解的。对于如上面几张图所示的主题而言，右侧的团子其实是翻页 下一页 并与之绑定，通过调节按钮触发位置造成点击图片不会触发下一页而只有点击对应按钮才会有效果的 “假象”。由于翻页按键是从候选区域外边框 右下角开始绘制的，因此为了调整该按钮位置，可以选择方案只有：绘制一个按钮，在其四周拼贴 #ffffff00 的矩形来控制其位置，通过调整 上一页 与 下一页 图案中未填充颜色矩形的位置来控制按钮之间间距。
那么我们如何来添加其他图案呢？如果你绘制过输入法 input_panel 元素的话可能会知道在输入过程中 input_panel 是会被拉长的，导致我们的图案变形，但是翻页按钮无论如何都不会发生形变，因此将独立的图案与翻页按键绑定可能是一个比较好的方案。
如图所示，实际上 1 为翻页按钮图片实际的大小，2 为下一页实际的大小。根据上面我们的描述，整个输入面板实际高度是靠着里面最高的元素撑起来的，这里面能够起到顶梁柱作用的仅仅为文本区域以及内容区域（候选字区域以及拼音区域），因此在不改变内容区域的时候，实际上我们的独立图案（翻页键）上半部分会被裁切掉，因此在插入图案时候应该拉高内容区域的外边框高度使其能够满足翻页键图片能够完整展示的程度。
2赞
ddqi
(weearc)
2
输入面板高度的计算
接下来我们以 ** 不包含候选词高亮背景图 ** 的情况来说明一下如何由已知架构的主题进行主题绘制。
首先应该先了解一下字体大小、dpi、以及字体尺寸的关系。我们常说的 dpi 其实是 像素数每英寸 ，如 X11 下默认一般为 DPI 96，所以如 fcitx5 默认下字体为 Sans 9 其实是字体大小为 9 磅，0.125 英寸，即为 12 px 。如我的示例皮肤中展示
也就是最低最低 input_panel 需要在 Inkscape 中绘制高度为 57 个 px 才不至于因为拉伸导致输入面板边缘出现不可名状的拉伸现象。这里再截取一张配置来说明为何少了俩长度（因为都是 0）
下面以实际绘制中的示例进行演示。
这里我们绘制了一个 150*20 的输入面板，并绘制了三个高度为 20 的星星位于左中右用于演示输入面板如何被拉伸（所有 margin 均设置为 0）：
输入过程如图所示：
可以非常明显的看出输入一个字符时处于压缩状态，约两个字符时为预设大小，多个字符时为伸长状态。且图案拉伸非常明显，这也是为什么我们说不要在输入面板上放独立元素，因为拉伸出来没法直视…
但是 fcitx5 提供给我们了覆盖图片这一选项，因此我们绘制如下的图片并在配置文件中写入：
（高度 20px）
重启 fcitx5 然后大概可以发现如下情况，当输入框长到一定程度时候，原本的底图显露，覆盖图片仍位于左侧，这样就可以做出一些很好玩的事情：通过控制覆盖图片和原始图片高度相同，通过不同对齐手段可以有效防止边缘由于拉伸导致的破裂
接下来我们来探讨一下高度的问题，刚刚五角星在输入单个字符时候真的是被左右压缩了么，其实不是，是上下被伸长了，而后面看起来比例正常的其实是等比放大，我们将红色框体高度调整为 24px 试一下：
可以发现的是同样是输入一个字符，但是显示比例正常，这也就说明了需要先进行结构分析设计再进行面板绘制是十分必要的，可以节约大量节约时间。
1赞
ddqi
(weearc)
3
横向距离
讨论完纵向距离以后我们接着来看一下横向距离，单底图知道如何拉伸有助于我们后续进行绘制的选择，这里所有底图尺寸均为 150*24 而不是 150*20（DPI 96）
可以发现 9 候选词 单字符输入时就已经到达了我们最初绘制的比例：
因此可以大致的得出结论：9 候选词 单字符输入时 fcitx5 渲染为
150*24px（显示，非绘制）
我们来随机的画一些竖线来看一下到底是如何进行横向拉伸的：
可以看出基本上是很均匀的横向拉伸，当然这也是预期的，因为我第一个皮肤作品就是依靠这个绘制了镂空的一圈
开始绘制面板
正如上面所描述的，面板的美观性是 苏姐的教程 主要关注的，但是正如我前面所描述，通过合理的前端设计可以：
- 提高美观度
- 减少工作负担
因此我们先来规划一下大致的大小，就像解决数学问题一样，这道 “题目” 里面包含已知和未知，已知信息为：
- X11
- DPI 96
- Sans,9
根据以上结论结合最初绘制的草图我们大致得到如下的初步设计：
注意！这里并未关注 fcitx5 中如何进行尺寸设计，只关注了面板本体如何进行设计，最终我们是需要进行一个尺寸转换的。
我们重新进行组件拆分，尺寸修正如下：
由于圆角部分实际为贝塞尔曲线，再结合拉伸，实际伸长了是非常恶心的，所以我们控制圆角大小约为 1.5 到 2 px 即可，这里不讲解 Inkscape 具体操作，Inkscape 内修正后效果如下：
（方了许多啊）
然后导出图片，并设置边距分别为 (5,2,5,0) 和 (5,0,5,2)（CSS 格式），可以得到如下效果：
1赞
ddqi
(weearc)
5
覆盖图片及其作用
正如我们前面所说，单一的面板在拉伸过程中会表现的非常难以令人接受，毕竟输入法我们每天都要用所以调整一下是很有必要的。因此老 K 设计的覆盖图片功能在此处就可以发光发热了。首先我们复制一份原来的面板出来，并使用路径将其裁剪为左侧 和 面板主体 两部分：
然后分别进行导出，面板主体我选择导出 dpi 为 1000，由于渲染方式略有区别，覆盖图片大小应当为屏幕 DPI 的两倍，因此选择导出左侧 DPI 为192，然后再 kcm 中倒入图片，主体为input_panel.png 覆盖部分为 input_panel_s.png，重新加载配置文件，可以明显的看出在优化后的显示效果是非常不错的，至少左侧不会因为拉伸而发生过度变形：
那右侧正好如了我们的愿，直接使用独立图案遮盖即可。
1赞
ddqi
(weearc)
6
分页图片插入和最终大小调整
这里直接沿用了我的 另外一个皮肤 的素材，插入右侧的团子，效果如图：
可以看到和我之前描述的一样，顶上的团子被裁切掉了一部分，我们直接用内容区域顶上去即可：
但是这样的代价是直接将面板也一同拉伸了，并不是我们期望的。这里要用到另外一个技巧（前面也提到过）：使用空白元素
这里我们先绘制两个绿色框代表我们希望填充的空白位置：
然后加载一下配置文件，效果如图
基本可以看出两个问题：
- 覆盖图片尺寸略有问题（因为绿色框没按照尺寸变更）
- 右侧加的距离有点多，应当稍微缩减
然后我们来做一下加减法：
我们内容区域的 margin-top 为 58
顶部绿色区域高度约为 21
面板本体约为 29
因此我们需要的左侧覆盖图片实际高度应为 最多 68 px。导出，并修正覆盖图片位置，效果如下：
这样我们就可以放心大胆的把绿色区域的颜色消去了：
嗯，现在的样子好看多了吧。
1赞
ddqi
(weearc)
7
但是！输入法切换指示器会变成这个鬼样子！
显然不是喜闻乐见的，简单阅读代码以后发现其实现就是用到整个的 panel…所以要是前面切的窄了一点就会变成那样，目前解决方法是切稍微宽一点，具体多宽需要看一下情况，目前暂时只能这么解决，其他等待修正以及功能更新后会继续进行优化
简单的成功过展示：
1赞
最近一年很经常看到 “从入门到放弃” 这个关键词，自己以前学 flash 制作学 Photoshop 图片编辑就是应验了 “从入门到放弃”
而学五笔打字，学 Linux 系统，学开车，学 gimp 图片编辑就是 “从入门到——现在还在使用”
皮肤绘制，不是天天制作的，估计很快就——“从入门到放弃”？
ddqi
(weearc)
11
hhh，这个是否是 “从入门到放弃” 其实算是一个调侃。整个过程对于初学者就算不包含 Inkscape 的使用教程都算是又臭又长还涉及不少前端知识，如果是 Inkscape 初学者的话就更不用说了。大部分人可能只关心 ** 怎么用 ** ，而非 ** 怎么来的 ** 。但是毕竟网上现在还没有个像样的针对 fcitx5 主题绘制的教程，都是靠各个作者自己瞎摸索的，自己也摸索了两年多觉得还是应该留点东西下来，顺带探索一下以前没用过的选项
1赞
