渐变字生成器

Cat_A***

我花了一些时间，让 AI 帮我写了一个渐变字 BBCode 生成器。

---

/ / / / / / / / / / / / / / / / / /

---

---

---

/ / / / / / / / / / / / / / / / / /

---

为什么要做渐变字生成器？首先，请看我在 Vol.158 中使用的进度条。

　▁▁▁▁▁　
▕█　　　　▏
　▔▔▔▔▔　

最初我想为每个方法做一个评分，就像我在 Vol.83 中做的那样。

名称	值
迷惑程度	★★☆☆☆
神秘程度	★★☆☆☆

虽然我们有 ☆ 和 ★，但是这不是无缝的，不适合做进度条。于是我找到了 Unicode 中的方块元素，它们适合这种多个字符无缝组成的进度条。

U+2588: FULL BLOCK █

除了这个完整方块以外，我们还有 2581: LOWER ONE EIGHTH BLOCK258F: LEFT ONE EIGHTH BLOCK2594:UPPER ONE EIGHTH BLOCK2595:RIGHT ONE EIGHTH BLOCK 这四个用作边框的字符。

现在，看起来我们可以用这些字符组成一个进度条了，但是我们还需要“空位”。首先，绝对不能用最普通最常见的空格。这个字符的宽度在部分字体上是 1/4 个汉字宽，然而也有一些字体将它的宽度定为 1/2 个汉字宽。

我们可以用 3000: IDEOGRAPHIC SPACE，它的宽度在不同字体中都是一个汉字宽。

现在，我们可以随意创建任意长度的进度条了，比如这个只有一格的“进度”条。

　▁　
▕　▏
　▔　

---

等等，它看起来并不像真正的框，中间还有缝隙。这是因为行高的默认值并不是一个汉字高，如果那样，文字看起来会非常拥挤。为了强行使用一个汉字高的行高，我们可以使用 p 标签，并把行高设为 16 像素，这是汉字的默认高度。

我们创建一个非常长的进度条吧。

　▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁　
▕█████　　　　　　　　　　　　▏
　▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔　

好了，不能再长了，再长就要折行了。它看起来有些单调，也许可以给它加点颜色。

为了给进度条加上渐变色，我创建了一个网页程序，用来生成渐变文本。

---

　▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁　
▕█████████████████▏
　▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔　

如果渐变看起来不够平滑，我们可以缩小文字。

　▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁　
▕██████████████████████████████████▏
　▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔　

其实这个网页最初是这样的。

而且它还有个非常高级的颜色选择器。

因为 AI 经常调用原生的颜色选择器，而它不能精准控制颜色值，不是我想要的，我就特别提醒它自己实现一个颜色选择器。结果它的第一版网页卡死了，渲染效率非常低，我只好让它改一改。之后倒是没什么大问题了，但是就是不能输入数值。到了后面，甚至出现了只有 HSV 能编辑，而 RGB CMYK Hex 都不能编辑的情况。我看这事情越来越邪门，干脆砍了颜色选择器，只留一个输入 Hex 的地方。

渐变生成器的 V1 有个非常奇怪的问题，那就是无法拖动颜色节点。网页提示“拖拽圆点”，但是我哪里都拖了，一点反应也没有。不得已之下，我要求加入了在节点上输入数值的功能。

为了解决拖拽难题，V2 出现了。

网页的长截屏有点问题，会重复拼接最后一段内容，无须在意。

而且 V2 还修好了文字背景色的问题，在上个版本中，背景色填充是有非预期的 padding（也就是间距）的，V2 移除了这个 padding。V2 还加入了一些预设颜色，可以看到下方一行最左边有两个非常难看清的颜色。第二个是黑色，第一个是纯透明。

其实是白色。因为暗色模式的适配问题，有时候浏览器会将网页颜色反转。

---

事情到这里应该结束了，V2 已经够用了。但是后来，我还是打算开发 V3，加入更多功能。最后我加入了一整个样式面板，不仅可以设置字体，还能设置 b i u s 四个基本样式和文字大小。我还加入了“段落”选项，一个对字符艺术极其有用的选项。最重要的是，以上这些都支持实时预览。手机屏幕太小了，还要滑动才能看到效果；在电脑端，在右侧调了样式之后，左边真的会实时更新预览。

还有一点工作，那就是暗色模式的适配。我当然可以直接适配暗色模式，但是这里并不适配暗色模式，导致蓝色文字在暗色模式下变成了紫色。为了预览真实的效果，我还加入了一个控制是否兼容暗色模式的按钮。等我需要控制显示效果的时候，我就会关掉适配，然后避开那些突变的地方。

这时候，距离 V3 发布还有最后一点工作——调整风格。现在 AI 生成的网页里各种圆角，一点都不好看。于是我让 AI 重写了网页风格，网页的辨识度瞬间高了一大截。

---

有一天，我偶然在论他中某个帖子的底部看到了一串渐变的英文。这着实让我眼前一亮，也促成了今天这个工具。现在我们可以方便地制作相同的渐变文字了。

Explore.Dream.Discover.

---

coolsk***

帮你部署 一下，可直接访问https://ytl.rth1.xyz/jianbianzi/