一、引言
在当今社交媒体充斥着各种趣味表情包的时代,表情包生成工具成为许多用户创作和分享创意的热门选择。为了迎合这一趋势,我设计并开发了一款功能丰富、用户友好的微信小程序,旨在让用户能够轻松而有趣地创作个性化的表情包。这篇博客将深入介绍我的微信小程序,详解其各项功能,以及为了提升用户体验而进行的设计和优化。无论是内置的上百种头像素材,还是支持自定义上传与编辑的功能,我将逐一展示这个小程序的强大之处,帮助读者更好地理解并使用这款创意工具。
二、背景
在数字创意时代,表情包已经成为人们交流中不可或缺的一部分。然而,尽管微信推出了名为“微信创意表情”的小程序,我却发现它在素材数量和用户自定义方面存在一些限制。素材有限、用户无法自定义上传图片,这些限制让我看到了改进的空间,因此萌发了开发自己的表情包生成微信小程序的念头。
我的小程序的背景正是在这样的需求和不足之下诞生的。通过深入研究用户反馈和市场调研,我决定打造一款更加强大、灵活且富有创意的表情包生成工具。我的初衷是为用户提供一个自由、个性化的创作空间,让他们能够尽情表达自己的创意,而不受素材和功能的限制。通过模仿并超越现有的小程序,我致力于打破创作的边界,让用户在表情包的世界中享受更多的乐趣和创意。这款小程序不仅仅是一款工具,更是我对创意自由和个性表达的热忱回应。
三、已实现功能
- 1、内置上百种头像合成素材:
提供丰富多样的素材,包括脸、嘴、眼、身体、手、网络脸、挂架等,供用户选择和合成。
- 2、可自定义上传图片:
允许用户自由上传个人照片或网络素材,拓展创作空间,让表情包更具个性。
- 3、图片支持移动、缩放、旋转、批量选择:
提供直观的操作界面,用户可以自由调整图片的位置、大小、旋转角度,并支持批量选择多个元素进行统一操作。
- 4、图层可以通过列表拖拽实现上下排序:
实现直观的图层管理,用户可通过简单的拖拽操作调整图层的顺序,灵活掌握表情包的层次结构。
- 5、不同颜色、触点大小的涂鸦:
提供丰富的涂鸦工具,用户可以自由选择不同颜色和触点大小,为表情包添加更多创意元素。
- 6、文字输入:
实现文字输入功能,用户可选择不同颜色的文字,自由添加文字表达情感或创意。
- 7、图层自由调整透明度:
用户可以对每个图层进行透明度调整,实现更丰富的叠加效果。
- 8、图层左右镜像:
提供左右镜像功能,增加表情包的变化和趣味性。
- 9、图层复制:
允许用户复制已有的图层,方便创作时的重复元素使用。
- 10、将合成的图片导出:
提供简便的导出功能,让用户能够保存和分享自己创作的表情包。
四、素材库设计
我定义了一个组件”EmojiCardPanel“,从网上搜罗了许多素材,然后获取到所有素材的宽、高。定义素材相对于图层左上角的坐标值。实现效果。
上层是tab,下层是 swiper+scroll-view
代码如下:
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const emits = defineEmits<{
//选择emoji
(e: 'selectEmoji', x: number, y: number, w: number, h: number, url: string): void
}>()
/** Tab 选项 */
type TabOption = {
id: number
title: string
details: TabDetail[]
}
/** Tab 明细 */
type TabDetail = {
url: string
x: number
y: number
w: number
h: number
}
// 所有tab
const tabs = ref<TabOption[]>([])
// 当前选择Tab Index
const activeTabIndex = ref<number>(-1)
// 选择图片Id
const currentTouchImageId = ref<number>(-1)
onMounted(() => {
tabs.value = [在这里填充tab数据]
activeTabIndex.value = 0
})
// 选择tab
const onSelectTab = (index: number) => {
activeTabIndex.value = index
}
// image touch start
const onImageTouchStart = (img: TabDetail, index: number) => {
currentTouchImageId.value = index
}
// image tap
const onTap = (img: TabDetail, index: number) => {
currentTouchImageId.value = index
uni.downloadFile({
url: img.url,
success: (res) => {
if (res.statusCode === 200) {
emits('selectEmoji', img.x, img.y, img.w, img.h, res.tempFilePath)
currentTouchImageId.value = -1
} else {
uni.showToast({
title: '下载资源失败,状态码:' + res.statusCode,
})
currentTouchImageId.value = -1
}
},
fail: (error) => {
uni.showToast({
title: '资源下载异常',
})
currentTouchImageId.value = -1
},
})
}
// image touch end
const onImageTouchEnd = () => {
currentTouchImageId.value = -1
}
</script>
<template>
<view class="emoji-card-panel">
<view class="tabs">
<text
class="text"
:class="{ select: index === activeTabIndex }"
v-for="(tab, index) in tabs"
:key="'tab_' + index"
@tap="onSelectTab(index)"
>{{ tab.title }}</text
>
</view>
<swiper
class="swiper"
:current="activeTabIndex"
@change="activeTabIndex = $event.detail.current"
>
<swiper-item v-for="(tab, index) in tabs" :key="'detail_' + index">
<scroll-view class="tab-detail" scroll-y>
<view class="images">
<image
class="image"
:lazy-load="true"
mode="widthFix"
:class="{ touch: ix === currentTouchImageId }"
@tap="onTap(img, ix)"
@touchstart="onImageTouchStart(img, ix)"
@touchend="onImageTouchEnd"
v-for="(img, ix) in tab.details"
:key="'img_' + ix"
:src="img.url"
></image>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<style lang="scss" scoped>
.emoji-card-panel {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding-top: 5px;
font-size: 13px;
.tabs {
display: flex;
justify-content: space-between;
align-items: center;
height: 40rpx;
margin: 10px;
.text {
padding: 3px 10px;
border-radius: 15px;
&.select {
background-color: #07c160;
color: white;
/* 过渡效果 */
transition: all 0.4s;
}
}
}
.tab-detail {
flex: 1;
.images {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 10rpx 10rpx;
.image {
width: 40px;
padding: 10px;
border-radius: 12px;
margin: 5px;
&.touch {
background-color: rgba(0, 0, 0, 0.1);
}
}
.image:last-child {
margin-right: auto;
}
}
}
}
</style>
五、自定义上传与编辑
这个就不用说了,选择图片,上传,然后图片绘制到最上层图层,并默认选中
六、图层管理
针对图层管理,是最复杂的,同样也增加了一个组件”CanvasDragPanel“,没有使用 2d版本的canvas ,虽然2d渲染速度更快,但是发现图层在移动、缩放时有闪烁,不管是用双缓冲还是requestAnimationFrame 都未能解决这个闪烁问题。因为要涂鸦,所以用了两个canvas,在涂鸦时将主canvas隐藏,涂鸦结束后,再调换过来。
这里的难点是,图层选择、移动、缩放、删除、并且我还设计了批量选择,这些都将是此小程序实现的难点。
<template>
<view
class="canvas-drag-panel"
:style="{
width: props.width + 'px',
height: props.height + 'px',
}"
>
<!--主canvas-->
<canvas
id="mainCanvasId"
canvas-id="mainCanvasId"
:class="{
disabled: mainCanvasDisabled,
}"
class="canvas main-canvas"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
@error="touchError"
@touchcancel="touchCancel"
:disable-scroll="true"
></canvas>
<!--涂鸦canvas、将文本转换图片canvas-->
<canvas
v-show="graffitiCanvasShow"
canvas-id="graffitiCanvasId"
@touchstart="graffitiTouchStart"
@touchmove="graffitiTouchMove"
@touchend="graffitiTouchEnd"
:disable-scroll="true"
class="canvas graffiti-canvas"
></canvas>
</view>
</template>
七、涂鸦和文字输入
涂鸦和文字输入也是封装了两个组件分别是”GraffitiPanel“和”AddTextPanel“,至于选择涂鸦还是文字,因为是一个按钮组和后面的调节是一样的,封装了一个组件”ButtonGroupPanel“
涂鸦面板效果:
代码如下:
<script setup lang="ts">
import { ref } from 'vue'
const emits = defineEmits<{
// 取消
(e: 'cancelGraffiti'): void
// 完成
(e: 'completeGraffiti'): void
// 选择stroke
(e: 'selectGraffitiStroke', index: number): void
// 选择color
(e: 'selectGraffitiColor', index: number): void
}>()
// 定义组件属性
const props = defineProps<{
top: number
height: number
strokeDataList: number[]
colorDataList: string[]
}>()
// 取消
const cancelGraffiti = () => {
emits('cancelGraffiti')
}
// 完成
const endGraffiti = () => {
emits('completeGraffiti')
}
// 选择 stroke
const selectGraffitiStroke = (index: number) => {
currentGraffitiStrokeIndex.value = index
emits('selectGraffitiStroke', index)
}
// 选择yanse
const selectGraffitiColor = (index: number) => {
emits('selectGraffitiColor', index)
currentGraffitiColorIndex.value = index
}
// 当前选择stroke
const currentGraffitiStrokeIndex = ref<number>(1)
// 当前选择颜色
const currentGraffitiColorIndex = ref<number>(1)
</script>
<template>
<view
class="graffiti-panel"
:style="{
top: props.top + 'px',
height: props.height + 'px',
}"
>
<view class="top">
<text class="left" @tap="cancelGraffiti">取消</text>
<text class="center">涂鸦</text>
<text class="right" @tap="endGraffiti">完成</text>
</view>
<view class="main">
<view class="title"><text>笔触</text></view>
<view class="content">
<view
class="circle-view stroke-view"
:class="{
selected: index === currentGraffitiStrokeIndex,
}"
@tap="selectGraffitiStroke(index)"
v-for="(item, index) in props.strokeDataList"
:key="'stroke_' + index"
>
<view
class="circle"
:style="{
width: item + 'px',
height: item + 'px',
'background-color': colorDataList[currentGraffitiColorIndex],
}"
></view>
</view>
</view>
<view class="title"><text>颜色</text></view>
<view class="content">
<view
class="circle-view color-view"
:class="{
selected: index === currentGraffitiColorIndex,
}"
@tap="selectGraffitiColor(index)"
v-for="(item, index) in props.colorDataList"
:key="'color_' + index"
>
<view
class="circle"
:style="{
'background-color': item,
}"
></view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.graffiti-panel {
margin: 0px 5px;
left: 0;
right: 0;
box-shadow: 0px 0px 10px rgba(135, 131, 131, 0.4);
position: absolute;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: white;
z-index: 998;
.top {
display: flex;
height: 40px;
justify-content: center;
align-items: center;
margin: 5px 10px;
text-align: center;
.left,
.right {
flex: 0 0 50px;
padding: 10px;
}
.center {
flex: 1;
}
}
.main {
margin: 20px;
.title {
height: 40px;
line-height: 40px;
color: darkgrey;
}
.content {
display: flex;
justify-content: center;
align-items: center;
.circle-view {
border-radius: 50%;
margin: 5px;
&.stroke-view {
width: 40px;
height: 40px;
display: flex;
margin: 10px;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.1);
&.selected {
width: 48px;
height: 48px;
margin: 2px;
}
}
&.color-view {
width: 30px;
height: 30px;
margin: 4px;
border: 4px solid rgba(0, 0, 0, 0.1);
&.selected {
width: 34px;
height: 34px;
margin: 2px;
border: 8px solid rgba(0, 0, 0, 0.1);
}
.circle {
height: 100%;
width: 100%;
}
}
.circle {
border-radius: 50%;
}
}
}
}
}
</style>
文字输入效果如下,可以选择子颜色:
八、透明度、翻转、复制
透明度、翻转、复制同样用到了按钮组组件”ButtonGroupPanel“,只是如果未选择图层,三个按钮是置灰状态
因为我用的是非 2d canvas 所以 不支持 ”context.scale(-1, 1)“ ,但是水平翻转这行代码是关键,就用了”createOffscreenCanvas“ ,翻转后将canvas存入临时文件,放入图层列表。
九、图层上下顺序调整、删除
此功能增加了一个单独组件”ListDragPanel“,可以删除图层、按住行尾图标可实现,图层上下顺序调整
代码如下:
<script setup lang="ts">
import { reactive, ref } from 'vue'
const emits = defineEmits<{
//删除拖拽项
(e: 'delDragItem', id: number): void
//选择拖拽项
(e: 'selectDragItem', id: number): void
//拖拽项顺序调整
(e: 'changeDragItemOrder', oneId: number, towId: number): void
}>()
/** 拖拽列表明细类型声明 */
type DragListItem = {
id: number
url: string
}
/** 状态类型声明 */
type StateType = {
// 拖拽列表
dragList: DragListItem[]
// 初始化明细 左上角坐标
initListTop: number[]
// 最新明细 左上角坐标
newListTop: number[]
// 记录当前手指的垂直方向的坐标
touchY: number
// 记录当前操作的item数据
currentItemTop: number
// 当前操作的item的下标
currentItemIndex: number
// 当前选择item id
currentSelectedId: number
// 控制ScrollView 是否可滚动
dragListContainerCanScroll: boolean
}
// 状态控制
const state = reactive<StateType>({
dragList: [],
initListTop: [],
// 坐标数据
newListTop: [],
// 记录当前手指的垂直方向的坐标
touchY: 0,
currentItemTop: 0,
// 当前操作的item的下标
currentItemIndex: -1,
// 当前选择item id
currentSelectedId: -1,
// 控制ScrollView 是否可滚动
dragListContainerCanScroll: true,
})
// 拖拽项 每一项高度
const ITEM_HEIGHT = 55
// 获取所有项 top
const getDragItemTop = (): number[] => {
return state.dragList.map((item, i) => {
return i * ITEM_HEIGHT
})
}
// 触摸开始
const onTouchStart = (event: any, index: number) => {
state.currentSelectedId = state.dragList[index].id
state.dragListContainerCanScroll = false
const [{ pageY }] = event.touches
state.currentItemIndex = index
state.touchY = pageY
state.currentItemTop = state.newListTop[index]
uni.vibrateShort({
type: 'heavy',
})
}
// 触摸移动
const onTouchMove = (event: any) => {
const [{ pageY }] = event.touches
const current = state.newListTop[state.currentItemIndex]
const prep = state.newListTop[state.currentItemIndex - 1]
const next = state.newListTop[state.currentItemIndex + 1]
// 获取移动差值
state.newListTop[state.currentItemIndex] = current + (pageY - state.touchY)
// 记录手指坐标
state.touchY = pageY
// 向下移动(超过下一个的1/2就进行换位)
if (next && current > next - ITEM_HEIGHT / 2) {
changePosition(state.currentItemIndex + 1)
} else if (prep && current < prep + ITEM_HEIGHT / 2) {
// 向上移动(超过上一个的1/2就进行换位)
changePosition(state.currentItemIndex - 1)
}
}
// 触摸结束
const onTouchEnd = () => {
touchFinaly()
}
// 触摸异常关闭
const onTouchCancel = () => {
touchFinaly()
}
// 触摸最终执行
const touchFinaly = () => {
// 将拖拽的item归位
state.newListTop[state.currentItemIndex] = state.initListTop[state.currentItemIndex]
state.currentItemIndex = -1
state.dragListContainerCanScroll = true
}
// 交换位置
const changePosition = (index: number) => {
// 记录当前拖拽的item数据
const tempItem = state.dragList[state.currentItemIndex]
const oneId: number = tempItem.id
const twoId: number = state.dragList[index].id
// 设置原来位置的item
state.dragList[state.currentItemIndex] = state.dragList[index]
// 将临时存放的数据设置好
state.dragList[index] = tempItem
emits('changeDragItemOrder', oneId, twoId)
// 调整位置item
state.newListTop[index] = state.newListTop[state.currentItemIndex]
state.newListTop[state.currentItemIndex] = state.currentItemTop
// 改变当前操作的的下标
state.currentItemIndex = index
// 记录新位置的数据
state.currentItemTop = state.initListTop[state.currentItemIndex]
uni.vibrateShort({
type: 'heavy',
})
}
// 删除拖拽明细
const onDelDragItem = (index: number) => {
const delItem: DragListItem = state.dragList[index]
state.dragList.splice(index, 1)
state.currentSelectedId = -1
state.initListTop = getDragItemTop()
state.newListTop = getDragItemTop()
emits('delDragItem', delItem.id)
}
// 选择拖拽项
const onSelectDragItem = (index: number) => {
const selectedItem: DragListItem = state.dragList[index]
state.currentSelectedId = selectedItem.id
emits('selectDragItem', selectedItem.id)
}
// 添加拖拽项
const addDragItem = (id: number, url: string) => {
state.dragList.splice(0, 0, {
id: id,
url: url,
})
const top: number = (state.dragList.length - 1) * ITEM_HEIGHT
state.initListTop = getDragItemTop()
state.newListTop = getDragItemTop()
state.currentSelectedId = id
}
// 删除拖拽项
const delDragItem = (id: number) => {
const index: number = state.dragList.findIndex((item) => item.id === id)
state.dragList.splice(index, 1)
state.initListTop = getDragItemTop()
state.newListTop = getDragItemTop()
}
// 选择拖拽项
const selectDragItem = (id: number) => {
state.currentSelectedId = id
}
// 暴露函数
defineExpose({
addDragItem,
delDragItem,
selectDragItem,
})
</script>
<template>
<view class="list-drag-panel">
<scroll-view
class="drag-list-scroll"
:scroll-y="state.dragListContainerCanScroll"
:style="{ height: '100%' }"
>
<view
class="drag-list-item"
:class="{ selected: state.currentSelectedId === item.id }"
v-for="(item, index) in state.dragList"
:style="{
top: state.newListTop[index] + 'px',
}"
:key="'drag-list-item_' + index"
>
<view class="drag-list-item-item drag-list-item-left" @tap="onDelDragItem(index)">
<image class="remove-icon" lazy-load src="/static/images/del.png" mode="widthFix"></image>
</view>
<view class="drag-list-item-item drag-list-item-center" @tap="onSelectDragItem(index)">
<image class="layer-img" lazy-load :src="item.url" mode="aspectFit" />
<text>图层{{ index + 1 }}</text>
</view>
<view
class="drag-list-item-item drag-list-item-right"
@touchstart="onTouchStart($event, index)"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
@touchcancel="onTouchCancel"
>
<image class="drag-icon" lazy-load src="/static/images/drag.png" mode="widthFix"></image>
</view>
</view>
</scroll-view>
</view>
</template>
<style lang="scss" scoped>
.list-drag-panel {
height: 100%;
.drag-list-scroll {
height: 100%;
width: 100%;
overflow-y: auto;
position: relative;
.drag-list-item {
display: flex;
position: absolute;
left: 0;
right: 0;
justify-content: space-between;
align-items: center;
padding-right: 5px;
margin: 0px 5px;
&.selected {
background-color: #f0fff0;
border-radius: 10px;
}
.drag-list-item-left {
padding: 5px 10px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
.remove-icon {
width: 20px;
height: 20px;
padding-right: 5px;
}
}
.drag-list-item-center {
width: 100%;
padding: 5px 0px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.layer-img {
width: 40px;
height: 40px;
margin: 2px 15px 2px 0px;
}
}
.drag-list-item-item:last-child {
margin-left: auto;
}
.drag-list-item-right {
padding: 0px 10px;
height: 55px;
display: flex;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
justify-content: center;
align-items: center;
.drag-icon {
width: 20px;
height: 20px;
}
}
}
}
}
</style>
这里的问题点是 要动态控制”scroll-view“ 是否可滚动,在移动图层顺序时,是不允许滚动的。
十、导出与分享
将主canvas导出,这里的问题是,因为在选中和居中时,会有特殊线条,希望在导出时,重新绘制图层,可发现有时候重新绘制图层位置会偏移,未找到问题。
十一、未来发展和优化方向
当前这个小程序已上线,有兴趣的可以搜索进去看看,有疑问的大家可以留言交流。
目前此小程序未实现 2d canvas,后续可以研究下2d
后续继续增加undo 效果。
比较鸡肋的是,不能直接将制作的表情加入微信聊天中(腾讯是真坑,自家小程序可以,未开放其他人)。
好了,大家有疑问的可以留言沟通哈。