长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

我心飞翔 分类:vue
长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

十二时辰望楼表情生成程序
最近《长安十二时辰》电视剧火了,其中望楼传递信息在技术圈也掀起了一阵算法浪潮。该项目就是踩着这个热点,再结合VUE、html2canvas、gif.js等技术,开发的可定制化生成个人偏好的望楼表情程序。
喜欢的请微信搜索`技术记号`,随时分享好玩的技术
作者 | 罗学勇
监制 | 向日葵
Github地址:https://github.com/miukoo/mark-watchtower-expression

此程序支持哪些人玩

  • 不会前端的你,也可以玩
  • 会前端的,希望你玩出B格

支持的功能

  • 输入的字符自动转成望楼编码
  • 依据输入字符长度,自动调节动画时长
  • 生成的动画可直接右键保存为gif图片
  • 支持非程序员修改表情文字

效果演示

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)
长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

A. 你不会程序,可以这样玩

  • 第一步:下载a文件夹
  • 第二步:把a文件夹放在一个没有中文路径的地方
  • 第三步:双击a文件夹下的nginx.exe
  • 第四步:在chrome或firefox浏览器中访问http://localhost:9898
// ============================
// 如果你想修改文字,可以修改a/html/index.html文件中的以下几项:
// ============================
// 表情的缩放比例
window['outScale']=1;
// 表情的红色文字,建议不要超过8个汉字
window['outTitle']='';
// 表情的黑色文字,建议不要超过12个汉字
window['outText']='';

↓↓↓↓ 你不会程序,就跳过下面这段,看后面彩蛋吧!

B. 你会程序,可以这么玩

环境依赖

  • nodejs
  • webstorm
  • webpack
  • vue

安装

# 控制终端输入以下命令,安装相关依赖库
cnpm i

运行

# 控制终端输入以下命令,安装相关依赖库
cnpm run dev

高级玩家进阶-源码说明

程序核心源码在App.vue中,实现的思路是:

  • 准备1张望楼图片,其中方格处背景透明
  • 准备12张红色块图片,每一张对应望楼的12个其中一个方格
  • 把字符转成unicode二进制编码,共计16位
  • 截取16位的低12位,每一位控制一格望楼方格,如果是1则显示,反正不显示

注:常用汉字3500左右,12位能容纳4096个汉字,赶兴趣的老铁可以自行映射,该项目暂时截断高位字节处理。

Model

timer:null,		//定时器
text:'',			//计算临时变量
showText:'骚等信号接收中...',	//默认显示的等待提示语
chars:[],			//outText的字符数组
canvas:[],		//截取的gif每贞数据
timeStep:500,		//默认滚动时间步长
outScale:0.6,		//gif的缩放比例
outTitle:'你收到望楼传讯:',		//红色字的内容
outText:"语文老师语文不及格",		//黑色字的内容
list:[bg_0,bg_1,bg_2,bg_3,bg_4,bg_5,bg_6,bg_7,bg_8,bg_9,bg_10,bg_11],	//红色块图片
blag:[true,true,true,true,true,true,true,true,true,true,true,true]//红色块显示控制

View

视图代码较为简单,在渲染图片时,通过循环数组输出,注意13张图片需要重叠在一起,并且注意层的顺序。

<template>
 <div class="wapper">
   <div id="gif-body">
   <div class="bg">
     <div class="text" style="width: 150px;height: 30px;margin:-150px -80px;left: 100px;">{{outTitle}}</div>
     <div class="text" style="width: 150px;height: 100px;margin:-50px -20px;left: 50px;color:#000;">{{showText}}</div>
     <!-- 望楼-楼框样式 -->
     <img src="./assets/images/bg.png"></div>
     <!-- 循环输出12位对应的图片,如果隐藏则不输出 -->
     <template v-for="(item,index) in list">
       <div v-if="blag[index]" :key="index" :class="className(index)">
         <img :src="item">
       </div>
     </template>
   </div>
 </div>
</template>

VM

VM实现较为复杂,但只要理解以下实现技巧,实现起来依就简单:

  • 启动定时器,每帧处理一个字符,定时改变页面VIEW的内容(详见:showBlag方法)
  • 每一次修改了VIEW内容之后,创建一个canvas并缓存起来(详见:createCanvas方法)
  • 当字符输出完之后,合并所有的canvas元素,输出成gif动画图片(详见:createGif方法)
// 启动定时器
start:function(){ },
// 定时器关闭
stop : function(){},
// 生成每张图片的样式
className : function(index){ },
// 获取unicode 二进制编码
getUnicode : function(char){},
// 使用gif生成gif图片
createGif : function(){},
// 记录每帧数据
createCanvas : function() {},
// 依据字符串长度,渲染每帧的显示数据
showBlag : function() {}

彩蛋—常用表情

以下表情均由身边正经朋友提供,对此表示感谢! 以下表情保存既用。

⊙【这事必须放颗原子弹庆祝】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

【一个大叉,像个树杈,你是傻瓜】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

⊙【你那是喜欢吗,你是馋她的身体】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

⊙【来喝酒、划拳、裸泳】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

⊙【给主人发红包,才显示信息】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

⊙【你是什么垃圾】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

⊙【Test Test This's test】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

⊙【明白了大哥】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

⊙【楼上这货,格杀勿论】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

⊙【来开黑】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

⊙【楼下集合】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

⊙【求包养】

长安十二时望楼传讯表情包生成器 —(后面有彩蛋)

回复

我来回复
  • 暂无回复内容