devbox
黑客灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

创作一款表情包生成微信小程序：功能详解与用户体验优化_微信表情制作在线生成器

作者：黑客灵魂 | 2024-08-23 06:18:53

赞

踩

微信表情制作在线生成器

一、引言

        在当今社交媒体充斥着各种趣味表情包的时代，表情包生成工具成为许多用户创作和分享创意的热门选择。为了迎合这一趋势，我设计并开发了一款功能丰富、用户友好的微信小程序，旨在让用户能够轻松而有趣地创作个性化的表情包。这篇博客将深入介绍我的微信小程序，详解其各项功能，以及为了提升用户体验而进行的设计和优化。无论是内置的上百种头像素材，还是支持自定义上传与编辑的功能，我将逐一展示这个小程序的强大之处，帮助读者更好地理解并使用这款创意工具。

二、背景

        在数字创意时代，表情包已经成为人们交流中不可或缺的一部分。然而，尽管微信推出了名为“微信创意表情”的小程序，我却发现它在素材数量和用户自定义方面存在一些限制。素材有限、用户无法自定义上传图片，这些限制让我看到了改进的空间，因此萌发了开发自己的表情包生成微信小程序的念头。

        我的小程序的背景正是在这样的需求和不足之下诞生的。通过深入研究用户反馈和市场调研，我决定打造一款更加强大、灵活且富有创意的表情包生成工具。我的初衷是为用户提供一个自由、个性化的创作空间，让他们能够尽情表达自己的创意，而不受素材和功能的限制。通过模仿并超越现有的小程序，我致力于打破创作的边界，让用户在表情包的世界中享受更多的乐趣和创意。这款小程序不仅仅是一款工具，更是我对创意自由和个性表达的热忱回应。

三、已实现功能

  • 1、内置上百种头像合成素材：

提供丰富多样的素材，包括脸、嘴、眼、身体、手、网络脸、挂架等，供用户选择和合成。

  • 2、可自定义上传图片：

允许用户自由上传个人照片或网络素材，拓展创作空间，让表情包更具个性。

  • 3、图片支持移动、缩放、旋转、批量选择：

提供直观的操作界面，用户可以自由调整图片的位置、大小、旋转角度，并支持批量选择多个元素进行统一操作。

  • 4、图层可以通过列表拖拽实现上下排序：

实现直观的图层管理，用户可通过简单的拖拽操作调整图层的顺序，灵活掌握表情包的层次结构。

  • 5、不同颜色、触点大小的涂鸦：

提供丰富的涂鸦工具，用户可以自由选择不同颜色和触点大小，为表情包添加更多创意元素。

  • 6、文字输入：

实现文字输入功能，用户可选择不同颜色的文字，自由添加文字表达情感或创意。

  • 7、图层自由调整透明度：

用户可以对每个图层进行透明度调整，实现更丰富的叠加效果。

  • 8、图层左右镜像：

提供左右镜像功能，增加表情包的变化和趣味性。

  • 9、图层复制：

允许用户复制已有的图层，方便创作时的重复元素使用。

  • 10、将合成的图片导出：

提供简便的导出功能，让用户能够保存和分享自己创作的表情包。

四、素材库设计

我定义了一个组件”EmojiCardPanel“，从网上搜罗了许多素材，然后获取到所有素材的宽、高。定义素材相对于图层左上角的坐标值。实现效果。

上层是tab，下层是 swiper+scroll-view

代码如下：

  1. <script setup lang="ts">
  2. import { onMounted, ref } from 'vue'
  3. const emits = defineEmits<{
  4.   //选择emoji
  5.   (e: 'selectEmoji', x: number, y: number, w: number, h: number, url: string): void
  6. }>()
  7.  
  8. /** Tab 选项 */
  9. type TabOption = {
  10.   id: number
  11.   title: string
  12.   details: TabDetail[]
  13. }
  14.  
  15. /** Tab 明细 */
  16. type TabDetail = {
  17.   url: string
  18.   x: number
  19.   y: number
  20.   w: number
  21.   h: number
  22. }
  23.  
  24. // 所有tab
  25. const tabs = ref<TabOption[]>([])
  26. // 当前选择Tab Index
  27. const activeTabIndex = ref<number>(-1)
  28. // 选择图片Id
  29. const currentTouchImageId = ref<number>(-1)
  30.  
  31. onMounted(() => {
  32.   tabs.value = [在这里填充tab数据]
  33.  
  34.   activeTabIndex.value = 0
  35. })
  36.  
  37. // 选择tab
  38. const onSelectTab = (index: number) => {
  39.   activeTabIndex.value = index
  40. }
  41.  
  42. // image touch start
  43. const onImageTouchStart = (img: TabDetail, index: number) => {
  44.   currentTouchImageId.value = index
  45. }
  46.  
  47. // image tap
  48. const onTap = (img: TabDetail, index: number) => {
  49.   currentTouchImageId.value = index
  50.   uni.downloadFile({
  51.     url: img.url,
  52.     success: (res) => {
  53.       if (res.statusCode === 200) {
  54.         emits('selectEmoji', img.x, img.y, img.w, img.h, res.tempFilePath)
  55.         currentTouchImageId.value = -1
  56.       } else {
  57.         uni.showToast({
  58.           title: '下载资源失败，状态码：' + res.statusCode,
  59.         })
  60.         currentTouchImageId.value = -1
  61.       }
  62.     },
  63.     fail: (error) => {
  64.       uni.showToast({
  65.         title: '资源下载异常',
  66.       })
  67.       currentTouchImageId.value = -1
  68.     },
  69.   })
  70. }
  71.  
  72. // image touch end
  73. const onImageTouchEnd = () => {
  74.   currentTouchImageId.value = -1
  75. }
  76. </script>
  77. <template>
  78.   <view class="emoji-card-panel">
  79.     <view class="tabs">
  80.       <text
  81.         class="text"
  82.         :class="{ select: index === activeTabIndex }"
  83.         v-for="(tab, index) in tabs"
  84.         :key="'tab_' + index"
  85.         @tap="onSelectTab(index)"
  86.         >{{ tab.title }}</text
  87.       >
  88.     </view>
  89.     <swiper
  90.       class="swiper"
  91.       :current="activeTabIndex"
  92.       @change="activeTabIndex = $event.detail.current"
  93.     >
  94.       <swiper-item v-for="(tab, index) in tabs" :key="'detail_' + index">
  95.         <scroll-view class="tab-detail" scroll-y>
  96.           <view class="images">
  97.             <image
  98.               class="image"
  99.               :lazy-load="true"
  100.               mode="widthFix"
  101.               :class="{ touch: ix === currentTouchImageId }"
  102.               @tap="onTap(img, ix)"
  103.               @touchstart="onImageTouchStart(img, ix)"
  104.               @touchend="onImageTouchEnd"
  105.               v-for="(img, ix) in tab.details"
  106.               :key="'img_' + ix"
  107.               :src="img.url"
  108.             ></image>
  109.           </view>
  110.         </scroll-view>
  111.       </swiper-item>
  112.     </swiper>
  113.   </view>
  114. </template>
  115. <style lang="scss" scoped>
  116. .emoji-card-panel {
  117.   height: 100%;
  118.   width: 100%;
  119.   display: flex;
  120.   flex-direction: column;
  121.   padding-top: 5px;
  122.   font-size: 13px;
  123.   .tabs {
  124.     display: flex;
  125.     justify-content: space-between;
  126.     align-items: center;
  127.     height: 40rpx;
  128.     margin: 10px;
  129.     .text {
  130.       padding: 3px 10px;
  131.       border-radius: 15px;
  132.       &.select {
  133.         background-color: #07c160;
  134.         color: white;
  135.         /* 过渡效果 */
  136.         transition: all 0.4s;
  137.       }
  138.     }
  139.   }
  140.   .tab-detail {
  141.     flex: 1;
  142.     .images {
  143.       display: flex;
  144.       flex-wrap: wrap;
  145.       justify-content: space-between;
  146.       padding: 0 10rpx 10rpx;
  147.       .image {
  148.         width: 40px;
  149.         padding: 10px;
  150.         border-radius: 12px;
  151.         margin: 5px;
  152.         &.touch {
  153.           background-color: rgba(0, 0, 0, 0.1);
  154.         }
  155.       }
  156.       .image:last-child {
  157.         margin-right: auto;
  158.       }
  159.     }
  160.   }
  161. }
  162. </style>

五、自定义上传与编辑

这个就不用说了，选择图片，上传，然后图片绘制到最上层图层，并默认选中

六、图层管理

针对图层管理，是最复杂的，同样也增加了一个组件”CanvasDragPanel“，没有使用 2d版本的canvas ，虽然2d渲染速度更快，但是发现图层在移动、缩放时有闪烁，不管是用双缓冲还是requestAnimationFrame 都未能解决这个闪烁问题。因为要涂鸦，所以用了两个canvas，在涂鸦时将主canvas隐藏，涂鸦结束后，再调换过来。

这里的难点是，图层选择、移动、缩放、删除、并且我还设计了批量选择，这些都将是此小程序实现的难点。

  1. <template>
  2.   <view
  3.     class="canvas-drag-panel"
  4.     :style="{
  5.       width: props.width + 'px',
  6.       height: props.height + 'px',
  7.     }"
  8.   >
  9.     <!--主canvas-->
  10.     <canvas
  11.       id="mainCanvasId"
  12.       canvas-id="mainCanvasId"
  13.       :class="{
  14.         disabled: mainCanvasDisabled,
  15.       }"
  16.       class="canvas main-canvas"
  17.       @touchstart="touchStart"
  18.       @touchmove="touchMove"
  19.       @touchend="touchEnd"
  20.       @error="touchError"
  21.       @touchcancel="touchCancel"
  22.       :disable-scroll="true"
  23.     ></canvas>
  24.     <!--涂鸦canvas、将文本转换图片canvas-->
  25.     <canvas
  26.       v-show="graffitiCanvasShow"
  27.       canvas-id="graffitiCanvasId"
  28.       @touchstart="graffitiTouchStart"
  29.       @touchmove="graffitiTouchMove"
  30.       @touchend="graffitiTouchEnd"
  31.       :disable-scroll="true"
  32.       class="canvas graffiti-canvas"
  33.     ></canvas>
  34.   </view>
  35. </template>

七、涂鸦和文字输入

涂鸦和文字输入也是封装了两个组件分别是”GraffitiPanel“和”AddTextPanel“，至于选择涂鸦还是文字，因为是一个按钮组和后面的调节是一样的，封装了一个组件”ButtonGroupPanel“

涂鸦面板效果：

代码如下：

  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  3. const emits = defineEmits<{
  4.   // 取消
  5.   (e: 'cancelGraffiti'): void
  6.   // 完成
  7.   (e: 'completeGraffiti'): void
  8.   // 选择stroke
  9.   (e: 'selectGraffitiStroke', index: number): void
  10.   // 选择color
  11.   (e: 'selectGraffitiColor', index: number): void
  12. }>()
  13.  
  14. // 定义组件属性
  15. const props = defineProps<{
  16.   top: number
  17.   height: number
  18.   strokeDataList: number[]
  19.   colorDataList: string[]
  20. }>()
  21.  
  22. // 取消
  23. const cancelGraffiti = () => {
  24.   emits('cancelGraffiti')
  25. }
  26. // 完成
  27. const endGraffiti = () => {
  28.   emits('completeGraffiti')
  29. }
  30.  
  31. // 选择 stroke
  32. const selectGraffitiStroke = (index: number) => {
  33.   currentGraffitiStrokeIndex.value = index
  34.   emits('selectGraffitiStroke', index)
  35. }
  36.  
  37. // 选择yanse
  38. const selectGraffitiColor = (index: number) => {
  39.   emits('selectGraffitiColor', index)
  40.   currentGraffitiColorIndex.value = index
  41. }
  42.  
  43. // 当前选择stroke
  44. const currentGraffitiStrokeIndex = ref<number>(1)
  45. // 当前选择颜色
  46. const currentGraffitiColorIndex = ref<number>(1)
  47. </script>
  48. <template>
  49.   <view
  50.     class="graffiti-panel"
  51.     :style="{
  52.       top: props.top + 'px',
  53.       height: props.height + 'px',
  54.     }"
  55.   >
  56.     <view class="top">
  57.       <text class="left" @tap="cancelGraffiti">取消</text>
  58.       <text class="center">涂鸦</text>
  59.       <text class="right" @tap="endGraffiti">完成</text>
  60.     </view>
  61.     <view class="main">
  62.       <view class="title"><text>笔触</text></view>
  63.       <view class="content">
  64.         <view
  65.           class="circle-view stroke-view"
  66.           :class="{
  67.             selected: index === currentGraffitiStrokeIndex,
  68.           }"
  69.           @tap="selectGraffitiStroke(index)"
  70.           v-for="(item, index) in props.strokeDataList"
  71.           :key="'stroke_' + index"
  72.         >
  73.           <view
  74.             class="circle"
  75.             :style="{
  76.               width: item + 'px',
  77.               height: item + 'px',
  78.               'background-color': colorDataList[currentGraffitiColorIndex],
  79.             }"
  80.           ></view>
  81.         </view>
  82.       </view>
  83.       <view class="title"><text>颜色</text></view>
  84.       <view class="content">
  85.         <view
  86.           class="circle-view color-view"
  87.           :class="{
  88.             selected: index === currentGraffitiColorIndex,
  89.           }"
  90.           @tap="selectGraffitiColor(index)"
  91.           v-for="(item, index) in props.colorDataList"
  92.           :key="'color_' + index"
  93.         >
  94.           <view
  95.             class="circle"
  96.             :style="{
  97.               'background-color': item,
  98.             }"
  99.           ></view>
  100.         </view>
  101.       </view>
  102.     </view>
  103.   </view>
  104. </template>
  105. <style lang="scss" scoped>
  106. .graffiti-panel {
  107.   margin: 0px 5px;
  108.   left: 0;
  109.   right: 0;
  110.   box-shadow: 0px 0px 10px rgba(135, 131, 131, 0.4);
  111.   position: absolute;
  112.   border-top-right-radius: 10px;
  113.   border-top-left-radius: 10px;
  114.   background-color: white;
  115.   z-index: 998;
  116.   .top {
  117.     display: flex;
  118.     height: 40px;
  119.     justify-content: center;
  120.     align-items: center;
  121.     margin: 5px 10px;
  122.     text-align: center;
  123.     .left,
  124.     .right {
  125.       flex: 0 0 50px;
  126.       padding: 10px;
  127.     }
  128.     .center {
  129.       flex: 1;
  130.     }
  131.   }
  132.   .main {
  133.     margin: 20px;
  134.     .title {
  135.       height: 40px;
  136.       line-height: 40px;
  137.       color: darkgrey;
  138.     }
  139.     .content {
  140.       display: flex;
  141.       justify-content: center;
  142.       align-items: center;
  143.       .circle-view {
  144.         border-radius: 50%;
  145.         margin: 5px;
  146.         &.stroke-view {
  147.           width: 40px;
  148.           height: 40px;
  149.           display: flex;
  150.           margin: 10px;
  151.           align-items: center;
  152.           justify-content: center;
  153.           background-color: rgba(0, 0, 0, 0.1);
  154.           &.selected {
  155.             width: 48px;
  156.             height: 48px;
  157.             margin: 2px;
  158.           }
  159.         }
  160.         &.color-view {
  161.           width: 30px;
  162.           height: 30px;
  163.           margin: 4px;
  164.           border: 4px solid rgba(0, 0, 0, 0.1);
  165.           &.selected {
  166.             width: 34px;
  167.             height: 34px;
  168.             margin: 2px;
  169.             border: 8px solid rgba(0, 0, 0, 0.1);
  170.           }
  171.           .circle {
  172.             height: 100%;
  173.             width: 100%;
  174.           }
  175.         }
  176.         .circle {
  177.           border-radius: 50%;
  178.         }
  179.       }
  180.     }
  181.   }
  182. }
  183. </style>

文字输入效果如下，可以选择子颜色：

八、透明度、翻转、复制

透明度、翻转、复制同样用到了按钮组组件”ButtonGroupPanel“，只是如果未选择图层，三个按钮是置灰状态

因为我用的是非 2d canvas 所以 不支持 ”context.scale(-1, 1)“ ，但是水平翻转这行代码是关键，就用了”createOffscreenCanvas“ ，翻转后将canvas存入临时文件，放入图层列表。

九、图层上下顺序调整、删除

此功能增加了一个单独组件”ListDragPanel“，可以删除图层、按住行尾图标可实现，图层上下顺序调整

代码如下：

  1. <script setup lang="ts">
  2. import { reactive, ref } from 'vue'
  3. const emits = defineEmits<{
  4.   //删除拖拽项
  5.   (e: 'delDragItem', id: number): void
  6.   //选择拖拽项
  7.   (e: 'selectDragItem', id: number): void
  8.   //拖拽项顺序调整
  9.   (e: 'changeDragItemOrder', oneId: number, towId: number): void
  10. }>()
  11.  
  12. /** 拖拽列表明细类型声明 */
  13. type DragListItem = {
  14.   id: number
  15.   url: string
  16. }
  17.  
  18. /** 状态类型声明 */
  19. type StateType = {
  20.   // 拖拽列表
  21.   dragList: DragListItem[]
  22.   // 初始化明细 左上角坐标
  23.   initListTop: number[]
  24.   // 最新明细  左上角坐标
  25.   newListTop: number[]
  26.   // 记录当前手指的垂直方向的坐标
  27.   touchY: number
  28.   // 记录当前操作的item数据
  29.   currentItemTop: number
  30.   // 当前操作的item的下标
  31.   currentItemIndex: number
  32.   // 当前选择item id
  33.   currentSelectedId: number
  34.   // 控制ScrollView 是否可滚动
  35.   dragListContainerCanScroll: boolean
  36. }
  37.  
  38. // 状态控制
  39. const state = reactive<StateType>({
  40.   dragList: [],
  41.   initListTop: [],
  42.   // 坐标数据
  43.   newListTop: [],
  44.   // 记录当前手指的垂直方向的坐标
  45.   touchY: 0,
  46.   currentItemTop: 0,
  47.   // 当前操作的item的下标
  48.   currentItemIndex: -1,
  49.   // 当前选择item id
  50.   currentSelectedId: -1,
  51.   // 控制ScrollView 是否可滚动
  52.   dragListContainerCanScroll: true,
  53. })
  54. // 拖拽项 每一项高度
  55. const ITEM_HEIGHT = 55
  56.  
  57. // 获取所有项 top
  58. const getDragItemTop = (): number[] => {
  59.   return state.dragList.map((item, i) => {
  60.     return i * ITEM_HEIGHT
  61.   })
  62. }
  63.  
  64. // 触摸开始
  65. const onTouchStart = (event: any, index: number) => {
  66.   state.currentSelectedId = state.dragList[index].id
  67.   state.dragListContainerCanScroll = false
  68.   const [{ pageY }] = event.touches
  69.   state.currentItemIndex = index
  70.   state.touchY = pageY
  71.   state.currentItemTop = state.newListTop[index]
  72.   uni.vibrateShort({
  73.     type: 'heavy',
  74.   })
  75. }
  76.  
  77. // 触摸移动
  78. const onTouchMove = (event: any) => {
  79.   const [{ pageY }] = event.touches
  80.   const current = state.newListTop[state.currentItemIndex]
  81.   const prep = state.newListTop[state.currentItemIndex - 1]
  82.   const next = state.newListTop[state.currentItemIndex + 1]
  83.   // 获取移动差值
  84.   state.newListTop[state.currentItemIndex] = current + (pageY - state.touchY)
  85.   // 记录手指坐标
  86.   state.touchY = pageY
  87.   // 向下移动（超过下一个的1/2就进行换位）
  88.   if (next && current > next - ITEM_HEIGHT / 2) {
  89.     changePosition(state.currentItemIndex + 1)
  90.   } else if (prep && current < prep + ITEM_HEIGHT / 2) {
  91.     // 向上移动（超过上一个的1/2就进行换位）
  92.     changePosition(state.currentItemIndex - 1)
  93.   }
  94. }
  95.  
  96. // 触摸结束
  97. const onTouchEnd = () => {
  98.   touchFinaly()
  99. }
  100.  
  101. // 触摸异常关闭
  102. const onTouchCancel = () => {
  103.   touchFinaly()
  104. }
  105.  
  106. // 触摸最终执行
  107. const touchFinaly = () => {
  108.   // 将拖拽的item归位
  109.   state.newListTop[state.currentItemIndex] = state.initListTop[state.currentItemIndex]
  110.   state.currentItemIndex = -1
  111.   state.dragListContainerCanScroll = true
  112. }
  113.  
  114. // 交换位置
  115. const changePosition = (index: number) => {
  116.   // 记录当前拖拽的item数据
  117.   const tempItem = state.dragList[state.currentItemIndex]
  118.   const oneId: number = tempItem.id
  119.   const twoId: number = state.dragList[index].id
  120.   // 设置原来位置的item
  121.   state.dragList[state.currentItemIndex] = state.dragList[index]
  122.   // 将临时存放的数据设置好
  123.   state.dragList[index] = tempItem
  124.  
  125.   emits('changeDragItemOrder', oneId, twoId)
  126.  
  127.   // 调整位置item
  128.   state.newListTop[index] = state.newListTop[state.currentItemIndex]
  129.   state.newListTop[state.currentItemIndex] = state.currentItemTop
  130.   // 改变当前操作的的下标
  131.   state.currentItemIndex = index
  132.  
  133.   // 记录新位置的数据
  134.   state.currentItemTop = state.initListTop[state.currentItemIndex]
  135.   uni.vibrateShort({
  136.     type: 'heavy',
  137.   })
  138. }
  139.  
  140. // 删除拖拽明细
  141. const onDelDragItem = (index: number) => {
  142.   const delItem: DragListItem = state.dragList[index]
  143.   state.dragList.splice(index, 1)
  144.   state.currentSelectedId = -1
  145.   state.initListTop = getDragItemTop()
  146.   state.newListTop = getDragItemTop()
  147.   emits('delDragItem', delItem.id)
  148. }
  149.  
  150. // 选择拖拽项
  151. const onSelectDragItem = (index: number) => {
  152.   const selectedItem: DragListItem = state.dragList[index]
  153.   state.currentSelectedId = selectedItem.id
  154.   emits('selectDragItem', selectedItem.id)
  155. }
  156.  
  157. // 添加拖拽项
  158. const addDragItem = (id: number, url: string) => {
  159.   state.dragList.splice(0, 0, {
  160.     id: id,
  161.     url: url,
  162.   })
  163.   const top: number = (state.dragList.length - 1) * ITEM_HEIGHT
  164.   state.initListTop = getDragItemTop()
  165.   state.newListTop = getDragItemTop()
  166.   state.currentSelectedId = id
  167. }
  168.  
  169. // 删除拖拽项
  170. const delDragItem = (id: number) => {
  171.   const index: number = state.dragList.findIndex((item) => item.id === id)
  172.   state.dragList.splice(index, 1)
  173.   state.initListTop = getDragItemTop()
  174.   state.newListTop = getDragItemTop()
  175. }
  176.  
  177. // 选择拖拽项
  178. const selectDragItem = (id: number) => {
  179.   state.currentSelectedId = id
  180. }
  181.  
  182. // 暴露函数
  183. defineExpose({
  184.   addDragItem,
  185.   delDragItem,
  186.   selectDragItem,
  187. })
  188. </script>
  189.  
  190. <template>
  191.   <view class="list-drag-panel">
  192.     <scroll-view
  193.       class="drag-list-scroll"
  194.       :scroll-y="state.dragListContainerCanScroll"
  195.       :style="{ height: '100%' }"
  196.     >
  197.       <view
  198.         class="drag-list-item"
  199.         :class="{ selected: state.currentSelectedId === item.id }"
  200.         v-for="(item, index) in state.dragList"
  201.         :style="{
  202.           top: state.newListTop[index] + 'px',
  203.         }"
  204.         :key="'drag-list-item_' + index"
  205.       >
  206.         <view class="drag-list-item-item drag-list-item-left" @tap="onDelDragItem(index)">
  207.           <image class="remove-icon" lazy-load src="/static/images/del.png" mode="widthFix"></image>
  208.         </view>
  209.         <view class="drag-list-item-item drag-list-item-center" @tap="onSelectDragItem(index)">
  210.           <image class="layer-img" lazy-load :src="item.url" mode="aspectFit" />
  211.           <text>图层{{ index + 1 }}</text>
  212.         </view>
  213.         <view
  214.           class="drag-list-item-item drag-list-item-right"
  215.           @touchstart="onTouchStart($event, index)"
  216.           @touchmove="onTouchMove"
  217.           @touchend="onTouchEnd"
  218.           @touchcancel="onTouchCancel"
  219.         >
  220.           <image class="drag-icon" lazy-load src="/static/images/drag.png" mode="widthFix"></image>
  221.         </view>
  222.       </view>
  223.     </scroll-view>
  224.   </view>
  225. </template>
  226.  
  227. <style lang="scss" scoped>
  228. .list-drag-panel {
  229.   height: 100%;
  230.   .drag-list-scroll {
  231.     height: 100%;
  232.     width: 100%;
  233.     overflow-y: auto;
  234.     position: relative;
  235.     .drag-list-item {
  236.       display: flex;
  237.       position: absolute;
  238.       left: 0;
  239.       right: 0;
  240.       justify-content: space-between;
  241.       align-items: center;
  242.       padding-right: 5px;
  243.       margin: 0px 5px;
  244.       &.selected {
  245.         background-color: #f0fff0;
  246.         border-radius: 10px;
  247.       }
  248.       .drag-list-item-left {
  249.         padding: 5px 10px;
  250.         height: 45px;
  251.         display: flex;
  252.         justify-content: center;
  253.         align-items: center;
  254.         .remove-icon {
  255.           width: 20px;
  256.           height: 20px;
  257.           padding-right: 5px;
  258.         }
  259.       }
  260.       .drag-list-item-center {
  261.         width: 100%;
  262.         padding: 5px 0px;
  263.         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  264.         .layer-img {
  265.           width: 40px;
  266.           height: 40px;
  267.           margin: 2px 15px 2px 0px;
  268.         }
  269.       }
  270.       .drag-list-item-item:last-child {
  271.         margin-left: auto;
  272.       }
  273.       .drag-list-item-right {
  274.         padding: 0px 10px;
  275.         height: 55px;
  276.         display: flex;
  277.         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  278.         justify-content: center;
  279.         align-items: center;
  280.         .drag-icon {
  281.           width: 20px;
  282.           height: 20px;
  283.         }
  284.       }
  285.     }
  286.   }
  287. }
  288. </style>

 这里的问题点是 要动态控制”scroll-view“ 是否可滚动，在移动图层顺序时，是不允许滚动的。

十、导出与分享

将主canvas导出，这里的问题是，因为在选中和居中时，会有特殊线条，希望在导出时，重新绘制图层，可发现有时候重新绘制图层位置会偏移，未找到问题。

十一、未来发展和优化方向

当前这个小程序已上线，有兴趣的可以搜索进去看看，有疑问的大家可以留言交流。

目前此小程序未实现 2d canvas，后续可以研究下2d

后续继续增加undo 效果。

比较鸡肋的是，不能直接将制作的表情加入微信聊天中（腾讯是真坑，自家小程序可以，未开放其他人）。

好了，大家有疑问的可以留言沟通哈。 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/1019819
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号