找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序柠檬手帐-界面精美的图片编辑器,前后+后端源码

  [复制链接]
查看: 4132|回复: 181
最佳答案
0 

2

主题

2

帖子

80

积分

新人求带

积分
80
 楼主| 发表于 2018-6-21 14:38:16 | 显示全部楼层 |阅读模式
微信小程序柠檬手帐-界面精美的图片编辑器,前后+后端源码

参加比赛的作品,开发周期一个月,使用了 Wafer2 框架,后台采用腾讯云提供的 Node.js SDK 接入对象存储 API ,前端核心代码实现了类似于图片编辑器的功能,支持图片和文字的移动、旋转、缩放并生成预览图,动画部分采用 CSS 动画实现

小程序中的模态输入框部分使用了自己封装的 InputBox 组件

代码已移除 AppId 等敏感信息,可能导致登录报错,但不影响授权后本地使用,可自行添加 AppId 以进行真机调试

效果展示
3558.png

核心代码
  1. onTouchStart: function (e) {
  2.   // 若未选中则直接返回
  3.   if (!this.data.selected) {
  4.     return
  5.   }

  6.   switch (e.target.id) {
  7.     case 'sticker': {
  8.       this.touch_target = e.target.id
  9.       this.start_x = e.touches[0].clientX * 2
  10.       this.start_y = e.touches[0].clientY * 2
  11.       break
  12.     }
  13.     case 'handle': {
  14.       // 隐藏移除按钮
  15.       this.setData({
  16.         hideRemove: true
  17.       })

  18.       this.touch_target = e.target.id
  19.       this.start_x = e.touches[0].clientX * 2
  20.       this.start_y = e.touches[0].clientY * 2

  21.       this.sticker_center_x = this.data.stickerCenterX;
  22.       this.sticker_center_y = this.data.stickerCenterY;
  23.       this.remove_center_x = this.data.removeCenterX;
  24.       this.remove_center_y = this.data.removeCenterY;
  25.       this.handle_center_x = this.data.handleCenterX;
  26.       this.handle_center_y = this.data.handleCenterY;

  27.       this.scale = this.data.scale;
  28.       this.rotate = this.data.rotate;
  29.       break
  30.     }
  31.   }
  32. },

  33. onTouchEnd: function (e) {
  34.   this.active()
  35.   this.touch_target = ''

  36.   // 显示移除按钮
  37.   this.setData({
  38.     removeCenterX: 2 * this.data.stickerCenterX - this.data.handleCenterX,
  39.     removeCenterY: 2 * this.data.stickerCenterY - this.data.handleCenterY,
  40.     hideRemove: false
  41.   })

  42.   // 若点击移除按钮则触发移除事件,否则触发刷新数据事件
  43.   if (e.target.id === 'remove') {
  44.     this.triggerEvent('removeSticker', this.data.sticker_id)
  45.   } else {
  46.     this.triggerEvent('refreshData', this.data)
  47.   }
  48. },

  49. onTouchMove: function (e) {
  50.   // 若无选中目标则返回
  51.   if (!this.touch_target) {
  52.     return
  53.   }

  54.   var current_x = e.touches[0].clientX * 2
  55.   var current_y = e.touches[0].clientY * 2
  56.   var diff_x = current_x - this.start_x
  57.   var diff_y = current_y - this.start_y

  58.   switch (e.target.id) {
  59.     case 'sticker': {
  60.       // 拖动组件则所有控件同时移动
  61.       this.setData({
  62.         stickerCenterX: this.data.stickerCenterX + diff_x,
  63.         stickerCenterY: this.data.stickerCenterY + diff_y,
  64.         removeCenterX: this.data.removeCenterX + diff_x,
  65.         removeCenterY: this.data.removeCenterY + diff_y,
  66.         handleCenterX: this.data.handleCenterX + diff_x,
  67.         handleCenterY: this.data.handleCenterY + diff_y
  68.       })
  69.       break
  70.     }
  71.     case 'handle': {
  72.       // 拖动操作按钮则原地旋转缩放
  73.       this.setData({
  74.         handleCenterX: this.data.handleCenterX + diff_x,
  75.         handleCenterY: this.data.handleCenterY + diff_y
  76.       })

  77.       var diff_x_before = this.handle_center_x - this.sticker_center_x;
  78.       var diff_y_before = this.handle_center_y - this.sticker_center_y;
  79.       var diff_x_after = this.data.handleCenterX - this.sticker_center_x;
  80.       var diff_y_after = this.data.handleCenterY - this.sticker_center_y;
  81.       var distance_before = Math.sqrt(diff_x_before * diff_x_before + diff_y_before * diff_y_before);
  82.       var distance_after = Math.sqrt(diff_x_after * diff_x_after + diff_y_after * diff_y_after);
  83.       var angle_before = Math.atan2(diff_y_before, diff_x_before) / Math.PI * 180;
  84.       var angle_after = Math.atan2(diff_y_after, diff_x_after) / Math.PI * 180;

  85.       this.setData({
  86.         scale: distance_after / distance_before * this.scale,
  87.         rotate: angle_after - angle_before + this.rotate
  88.       })
  89.       break
  90.     }
  91.   }

  92.   this.start_x = current_x;
  93.   this.start_y = current_y;
  94. }
复制代码

作者是一名大二学生,如果觉得我写得不错,不如请我喝杯咖啡吧 coffee
6c0911e42764419ebe193d941e211957.jpg 3467a790c37d4ce4aa922819b7f716d4.jpg

游客,如果您要查看本帖隐藏内容请回复


回复

使用道具 举报

最佳答案
0 

3

主题

107

帖子

1889

积分

专家路上

积分
1889
发表于 2018-6-21 15:56:13 | 显示全部楼层
不错,不错支持
回复 支持 反对

使用道具 举报

最佳答案
0 

2

主题

817

帖子

2万

积分

黄金VIP

Rank: 3Rank: 3

积分
20788
发表于 2018-6-21 16:55:57 | 显示全部楼层
微信小程序柠檬手帐-界面精美的图片编辑器,前后+后端源码
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

297

帖子

5464

积分

S1

积分
5464

HKC

QQ
发表于 2018-6-21 17:18:35 | 显示全部楼层
这个学生很厉害!!!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

297

帖子

5464

积分

S1

积分
5464

HKC

QQ
发表于 2018-6-21 17:21:02 | 显示全部楼层
请问 手账是干啥用的
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

48

帖子

917

积分

略知一二

积分
917
发表于 2018-6-21 18:01:45 | 显示全部楼层
我来看看  貌似不错哟
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

110

帖子

1992

积分

专家路上

积分
1992
发表于 2018-6-21 21:03:50 | 显示全部楼层
信小程序柠檬手帐-界面精美的图片编辑
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

234

帖子

4211

积分

专家路上

积分
4211
发表于 2018-6-21 22:38:59 | 显示全部楼层
不错,不错支持
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

24

帖子

305

积分

新人求带

积分
305
发表于 2018-6-21 23:01:41 | 显示全部楼层
不错的设计,很喜欢
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

33

帖子

370

积分

等待验证会员

积分
370
发表于 2018-6-21 23:17:35 | 显示全部楼层
不知道是哪里的咖啡
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com