十二时辰望楼表情生成程序 最近《长安十二时辰》电视剧火了,其中望楼传递信息在技术圈也掀起了一阵算法浪潮。该项目就是踩着这个热点,再结合VUE、html2canvas、gif.js等技术,开发的可定制化生成个人偏好的望楼表情程序。 喜欢的请微信搜索`技术记号`,随时分享好玩的技术 作者 | 罗学勇 监制 | 向日葵 Github地址:https://github.com/miukoo/mark-watchtower-expression
// ============================
// 如果你想修改文字,可以修改a/html/index.html文件中的以下几项:
// ============================
// 表情的缩放比例
window['outScale']=1;
// 表情的红色文字,建议不要超过8个汉字
window['outTitle']='';
// 表情的黑色文字,建议不要超过12个汉字
window['outText']='';
↓↓↓↓ 你不会程序,就跳过下面这段,看后面彩蛋吧!
# 控制终端输入以下命令,安装相关依赖库
cnpm i
# 控制终端输入以下命令,安装相关依赖库
cnpm run dev
程序核心源码在App.vue中,实现的思路是:
注:常用汉字3500左右,12位能容纳4096个汉字,赶兴趣的老铁可以自行映射,该项目暂时截断高位字节处理。
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]//红色块显示控制
视图代码较为简单,在渲染图片时,通过循环数组输出,注意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实现较为复杂,但只要理解以下实现技巧,实现起来依就简单:
// 启动定时器
start:function(){ },
// 定时器关闭
stop : function(){},
// 生成每张图片的样式
className : function(index){ },
// 获取unicode 二进制编码
getUnicode : function(char){},
// 使用gif生成gif图片
createGif : function(){},
// 记录每帧数据
createCanvas : function() {},
// 依据字符串长度,渲染每帧的显示数据
showBlag : function() {}
以下表情均由身边正经朋友提供,对此表示感谢! 以下表情保存既用。
⊙【这事必须放颗原子弹庆祝】
⊙【一个大叉,像个树杈,你是傻瓜】
⊙【你那是喜欢吗,你是馋她的身体】
⊙【来喝酒、划拳、裸泳】
⊙【给主人发红包,才显示信息】
⊙【你是什么垃圾】
⊙【Test Test This's test】
⊙【明白了大哥】
⊙【楼上这货,格杀勿论】
⊙【来开黑】
⊙【楼下集合】
⊙【求包养】