前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >figlet_chalk

figlet_chalk

作者头像
赤蓝紫
发布2023-03-16 15:31:22
4230
发布2023-03-16 15:31:22
举报
文章被收录于专栏:clz

figlet和chalk实现多彩文字

前言

最近,在搞一个小工具。用脚本架那套工具来实现批量修改文件(夹)、删除文件(夹)的操作。大体功能实现后,决定再加一下figlet来炫一下,但是后面发现不太支持配合chalk来实线多彩文字,百度大法也没起作用,所以就小试了一下源码大法。(暂时只看懂个大概,但是已经够我的需求了)

figlet用法:figlet

chalk用法:chalk

实现单色文字

代码语言:javascript
复制
import figlet from 'figlet';
import chalk from 'chalk';

figlet.text('CLZ', {
  font: 'Isometric2'
}, function(err, data) {
  if (err) {
      console.log('Something went wrong...');
      console.dir(err);
      return;
  }

  console.log(chalk.red(data));
});

从上面的例子中,就能发现,输出的文字是由很多小字符组成的。而如果想要实现多彩文字,应该是类似红C+蓝L+紫Z的形式才对。

小调试源码

既然,不能直接实现,那就先调试一下源码,看下能不能偷学点东西。

先打一个断点,准备进去看下源码:

然后,就能发现,调用了一个loadFont方法,还贴心的注释了“加载字体,如果加载了,它的数据将被保存再figFonts对象中”。

进到loadFont方法中,就能够知道是怎么加载字体的了。

好家伙,难怪不支持中文,原来是提前写好的。

然后,看一下,加载完之后,拿加载的东西干嘛用

\color{red}{注意:这里需要打个断点,直接单步调试会直接结束,因为readFile是异步的}

进去,parseFont方法后,可以看到很多很多操作,但是可以先别管,直接跳到函数执行完那里,在那时再看看上面的一些内容变成什么样了,来猜猜干了啥。

就是把加载的字符串变成数组形式,并且字母还是按照ASCII码作为索引来存储的。

并且,figFontfigFonts[fontName]还是指向同一块堆内存,所以在其他地方访问就能直接通过figFonts[fontName]来访问了。

既然如此,那么我们直接通过figFonts[fontName][ASCII码]来拿到我们想要的文字,然后一行一行遍历。以行为单位进行字符串拼接不就行了。事实上,figlethorizontalSmush方法就是这样干的。(详情可以自己调试着“玩”)

实现多彩文字

既然figlet都加载好了字体了,并且还存好在数组里了,那么我们直接在回调里使用就好了。

代码语言:javascript
复制
import figlet from 'figlet';
import chalk from 'chalk';

const fontName = 'Isometric2';
const str = 'CLZ';

figlet.text('', {
  font: fontName
}, function(err, data) {
  if (err) {
      console.log('Something went wrong...');
      console.dir(err);
      return;
  }

  console.log(figlet.figFonts[fontName][str.charCodeAt(0)]);
});

接下来就来拼接大法:

代码语言:javascript
复制
import figlet from 'figlet';
import chalk from 'chalk';

const fontName = 'Isometric2';
const str = 'CLZ';

figlet.text('', {
  font: fontName
}, function (err, data) {
  if (err) {
    console.log('Something went wrong...');
    console.dir(err);
    return;
  }


  const figFont = figlet.figFonts[fontName];

  const fig1 = figFont[str.charCodeAt(0)];
  const fig2 = figFont[str.charCodeAt(1)];
  const fig3 = figFont[str.charCodeAt(2)];

  let result = [];

  for (let i = 0; i < fig1.length; i++) {
    result[i] = (chalk.red(fig1[i]) + chalk.blue(fig2[i]) + chalk.magenta(fig3[i]));
  }

  console.log(result.join('\n'));   // 拼接结束后,将元素以换行分隔开
});

因为本人并不需要很强的自定义功能,就实现到这了。包括字符串都不是用的循环遍历得到,而是直接枚举法。

顺带分享一下:自己写的小工具(还在优化中,不喜勿喷):https://github.com/13535944743/tool

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-03-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • figlet和chalk实现多彩文字
    • 前言
      • 实现单色文字
        • 小调试源码
          • 实现多彩文字
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档