我做了一个手写春联小网页，祝大家虎年暴富
2024-04-03 19:32:51
目录
- 前言
- 产品构思
- 设计
- 开发
手写春联：https://cl.xugaoyi.com/
前言
虎年春节快到了，首先祝大家新年快乐，轻松暴富。
最近在网上经常看到生成春联的文章，不过这些小demo要么功能简陋,要么UI特别‘程序员’，满足不了我挑剔的眼光。干脆我自己做一个吧，顺便简单体验一下vite+vue3。（因为页面相对简单，vue组件风格还是使用选项式api，重点还是想把产品快速做出来。）
产品构思
包含手写春节和生成春联两大功能：
手写春联
- 模拟用笔写字的字迹
- 选择画笔颜色
- 调整画笔大小
- 清空画布
- 撤回笔画
- 切换上、下联、横批、福字
- 随机切换对联提示
- 预览图片和下载
- 贴春联海报和下载
生成模式
- 选择画笔颜色
- 挑选生成的对联
- 输入对联
- 随机切换对联
- 贴春联海报和下载
其他
- 快速切换模式按钮
- 可控制的背景音乐
- 微信分享网页
设计
开发
- 技术栈
- vite (打包&构建)
- vue3 (页面开发)
- vant（ui）
- sass (css)
- smooth-signature.js (带笔锋手写库)
<template><div class="wrap" :class="'mode-' + mode" @touchstart="handleTouchstart"><!-- 切换模式按钮 --><div class="toggle-mode-btn" @click="toggleMode">{{ mode === 1 ? '手写' : '生成' }}<i class="iconfont icon-qiehuan"></i></div><!-- 工具栏 --><divclass="actions":style="{ borderTopRightRadius: colorListVisibility ? '0' : '5px' }"><!-- 手写模式显示 --><template v-if="mode === 1"><!-- 调色板 --><div class="palette btn-block"><divclass="cur-color"@click="togglePalette":style="{ background: colorList[curColorIndex] }"></div><ul class="colorList" v-show="colorListVisibility"><liv-for="(item, index) in colorList":key="item":style="{ background: item }"@click="selectColor(index)"></li></ul></div><!-- 滑块 --><div class="slider-box btn-block"><van-sliderv-model="progress"vertical@change="changeProgress"bar-height="28"active-color="transparent":min="50":max="150"><template #button><div class="custom-button"></div></template></van-slider></div><!-- 清空 --><div class="btn" @click="handleClear"><i class="iconfont icon-lajitong"></i></div><!-- 撤销 --><div class="btn" @click="handleUndo"><i class="iconfont icon-fanhui"></i></div><div class="line"></div><!-- 切换画布的按钮 --><divclass="btn":class="{ 'cur-active': curCanvasIndex === index }"v-for="(item, index) in canvasList":key="item.name"@click="changeCanvas(index)">{{ item.name }}</div><div class="line"></div><div class="btn prominent" @click="handlePreview">预览</div><div class="btn prominent" @click="openPosters">贴联</div></template><!-- 生成模式显示 --><template v-else><!-- 选颜色 --><divclass="color-list-quick":class="{ active: curColorIndex === index }"v-for="(item, index) in colorList":key="item":style="{ background: item }"@click="selectColor(index)"></div><div class="line"></div><div class="btn" @click="showPickBox = true">挑选</div><div class="btn" @click="showInputBox = true">输入</div><!-- 挑选对联弹窗 --><van-action-sheet v-model:show="showPickBox" title="请挑选对联"><ul class="duilian-list"><liv-for="(item, index) in duilianList":key="index"@click="handlePickDuilian(item)"><span>{{ item.shang }}</span>， <span>{{ item.xia }}</span>。<span>{{ item.heng }}</span></li></ul></van-action-sheet><!-- 输入对联弹窗 --><van-action-sheet v-model:show="showInputBox" title="请输入对联"><van-form @submit="handleSubmitInput"><van-cell-group inset><van-fieldv-model="shanglian"name="shang"label="上联"placeholder="上联":rules="[{required: true,message: '请输入7位汉字上联',pattern: /^[\u4e00-\u9fa5]{7}$/}]"clearable/><van-fieldv-model="xialian"name="xia"label="下联"placeholder="下联":rules="[{required: true,message: '请输入7位汉字下联',pattern: /^[\u4e00-\u9fa5]{7}$/}]"clearable/><van-fieldv-model="hengpi"name="heng"label="横批"placeholder="横批":rules="[{required: true,message: '请输入4位汉字横批',pattern: /^[\u4e00-\u9fa5]{4}$/}]"clearable/></van-cell-group><div style="margin: 16px"><van-buttonroundblocktype="primary"native-type="submit"color="linear-gradient(to right, #ff6034, #c33825)">完成</van-button></div></van-form></van-action-sheet></template></div><!-- 模式1-春联画布 --><divv-show="mode === 1"v-for="(item, index) in canvasList":key="item.name"><canvasclass="canvas":class="item.className"v-show="curCanvasIndex === index":style="{marginTop:item.height < clientHeight? `${(clientHeight - item.height) / 2}px`: 0,marginLeft:item.width < clientWidth ? `${(clientWidth - item.width) / 2}px` : 0}"/></div><!-- 模式2-春联画布 --><div v-show="mode === 2" class="canvas-mode-2"><div class="row"><canvas id="canvas-top" :width="200 * scale" :height="60 * scale" /></div><div class="row"><canvas id="canvas-left" :width="60 * scale" :height="364 * scale" /><canvas id="canvas-right" :width="60 * scale" :height="364 * scale" /></div></div><!-- 贴春联按钮 --><Button class="btn-posters" @click="openPosters" /><!-- footer-当前对联提示 --><footer v-if="duilian.shang"><div class="refresh-btn" @click="handleRefresh(true)"><i class="iconfont icon-shuaxin" :class="{ rotate: isRotate }"></i></div><dl class="duilian"><dt>对联</dt><dd><div>{{ duilian.shang }}</div><div>{{ duilian.xia }}</div></dd></dl><dl><dt>横批</dt><dd>{{ duilian.heng }}</dd></dl></footer><!-- 分享按钮 --><div class="share-btn" v-if="isShowShareBtn" @click="isShowShareTip = true"><i class="iconfont icon-fenxiang"></i></div><!-- 微信分享提示语 --><divclass="share-tip"v-if="isShowShareTip"@click="isShowShareTip = false">点击右上角把这个工具分享给朋友<div class="hand">
我做了一个手写春联小网页，祝大家虎年暴富相关推荐
- Compose 实现手写春联效果
前言 又是一年新春,在这里先给大家拜个早年了.每逢春节,写春联贴春联都是一项必不可少的活动.本次主要使用Compose,实现手写春联的效果.如果对你有所帮助,欢迎点个赞或者评论鼓励一下~ 爆竹声中一岁 ...
- 用Compose实现手写春联效果
/ 今日科技快讯 / 近日,尽管"元宇宙"这个词已经存在了近30年,但直到Facebook在2021年10月下旬更名为Meta,似乎才重新点燃了投资者对它的兴趣.其中,虚拟 ...
- 深度学习笔记：01快速构建一个手写数字识别系统以及张量的概念
深度学习笔记:01快速构建一个手写数字识别系统 神经网络代码最好运行在GPU中,但是对于初学者来说运行在GPU上成本太高了,所以先运行在CPU中,就是慢一些. 一.安装keras框架 使用管理员模式打 ...
- 自己做的一个超级简单的小游戏
自己做了一个简单的uniy3d小游戏 方向键控制一个小球躲避别的小球,撞到指定的墙胜利,被别的球撞到失败. 初学者练手 Player move Enemy move Islose_Trigger Sp ...
- 做了一个公众号关联小程序，看看干了哪些活。
做了一个公众号关联小程序,看看干了哪些活. 断断续续的基本上做了两个月啊. 后台部分: 自己的服务器后台: 1.利用成熟的thinkphp框架,开始阶段快速形成一些接口,存入数据到数据库里 ...
- 程序员一个胳膊受伤了，只能用一个手写代码怎么办？
原创文章,欢迎转载.转载请注明:转载自IT人故事会,谢谢! 原文链接地址:程序员一个胳膊受伤了,只能用一个手写代码怎么办? 一个同事晚上加班骑电动车直接胳膊摔伤了,现在每天带个绷带,还在坚持上班,他已 ...
- 在MNIST数据集上训练一个手写数字识别模型
使用Pytorch在MNIST数据集上训练一个手写数字识别模型, 代码和参数文件 可下载 1.1 数据下载 import torchvision as tvtraining_sets = tv.dat ...
- 高并发：线程、线程锁与线程池(精华)，文中附上一个手写代码实现线程池视频（c/c++语言）
前文: 单线程--多线程的开启--线程锁--线程同步工具--手写连接池--连接池工具类. 一.线程 1.线程的概念 2.线程与进程的关系 3.定义: 区别:如上!!! 4.wait()和sleep() ...
- c#推箱子小游戏代码_C#做的一个推箱子的小游戏
C#做的一个推箱子的小游戏 c# 2021-1-6 下载地址 https://www.codedown123.com/59125.html 本推箱子游戏使用数组实现,用不同的数字标识不同的物体,从而简 ...
最新文章
- Azure进阶攻略丨如何驾驭罢工的Linux虚机网卡？
- 使用PHP处理POST上传时$_FILES数组为何为空
- 前端面试题（html篇）
- spring中基于XML的AOP配置步骤
- 对比2个表mailbox_id字段的差集，然后做插入操作
- javascript:void(0);用法及常见问题解析
- 并不算复杂的正则表达式基础
- 龙芯3A5000完成流片 同主频性能追平AMD Zen1
- 一起谈.NET技术，.NET程序员必备参考图片
- Binary XML file line #17vector tag requires viewportWidth 0
- PLSQL 缺少MSVCR120.dll
- win10强行自定义分辨率(笔记本win10强行自定义分辨率)
- 加息 75 个基点落地，市场短暂宣泄后前路依旧黯淡？
- [转载]探索J2ME：用GCF通信
- 关于平衡组的一个例子
- 泛生子Q2及臻和招股书速读
- 将保护清理不良资产的银行家：Arun Jaitley在评审会议
- 2023移动云大会 | “六大”服务承诺 全力做优“心级服务”
- 【学习亚马逊AWS IOT体系有感---万物互联（物联网）】
- 百度 ping php,百度ping方法示例代码 自动ping百度
热门文章