柠檬手帐 – 界面简洁的图片编辑应用,支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图

柠檬手帐 – 界面简洁的图片编辑应用,支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图

2020-04-12 455
¥ 1 MB 终身VIP免费 升级终身VIP
下载不了?请联系网站客服提交链接错误!
增值服务:

柠檬手帐 – 界面简洁的图片编辑应用,支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图

2020-04-12 小程序 0 455 百度已收录
郑重承诺丨模板2345提供安全交易、信息保真!
增值服务:
安装指导
BUG修复
环境配置
二次开发
会员折扣
高端定制
¥ 1 MB (终身VIP免费 升级终身VIP开通VIP尊享优惠特权
立即下载 升级会员 咨询客服
详情介绍

核心代码

组件的移动、旋转和缩放

主要思路是把 <image> 标签(对应图片)和 <text> 标签(对应文字)封装在同一个自定义组件 <sticker> 中,通过对外暴露的 text 变量是否为空来进行条件渲染,然后绑定 onTouchStart() 、onTouchEnd() 和 onTouchMove() 三个事件来对整个组件的位置、角度、大小、层级以及 “旋转” 和 “移除” 两个按钮的行为进行操作
onTouchStart: function (e) {
// 若未选中则直接返回
if (!this.data.selected) {
return
}

switch (e.target.id) {
case ‘sticker’: {
this.touch_target = e.target.id
this.start_x = e.touches[0].clientX * 2
this.start_y = e.touches[0].clientY * 2
break
}
case ‘handle’: {
// 隐藏移除按钮
this.setData({
hideRemove: true
})

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

this.sticker_center_x = this.data.stickerCenterX;
this.sticker_center_y = this.data.stickerCenterY;
this.remove_center_x = this.data.removeCenterX;
this.remove_center_y = this.data.removeCenterY;
this.handle_center_x = this.data.handleCenterX;
this.handle_center_y = this.data.handleCenterY;

this.scale = this.data.scale;
this.rotate = this.data.rotate;
break
}
}
},

onTouchEnd: function (e) {
this.active()
this.touch_target = ”

// 显示移除按钮
this.setData({
removeCenterX: 2 * this.data.stickerCenterX – this.data.handleCenterX,
removeCenterY: 2 * this.data.stickerCenterY – this.data.handleCenterY,
hideRemove: false
})

// 若点击移除按钮则触发移除事件,否则触发刷新数据事件
if (e.target.id === ‘remove’) {
this.triggerEvent(‘removeSticker’, this.data.sticker_id)
} else {
this.triggerEvent(‘refreshData’, this.data)
}
},

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

var current_x = e.touches[0].clientX * 2
var current_y = e.touches[0].clientY * 2
var diff_x = current_x – this.start_x
var diff_y = current_y – this.start_y

switch (e.target.id) {
case ‘sticker’: {
// 拖动组件则所有控件同时移动
this.setData({
stickerCenterX: this.data.stickerCenterX + diff_x,
stickerCenterY: this.data.stickerCenterY + diff_y,
removeCenterX: this.data.removeCenterX + diff_x,
removeCenterY: this.data.removeCenterY + diff_y,
handleCenterX: this.data.handleCenterX + diff_x,
handleCenterY: this.data.handleCenterY + diff_y
})
break
}
case ‘handle’: {
// 拖动操作按钮则原地旋转缩放
this.setData({
handleCenterX: this.data.handleCenterX + diff_x,
handleCenterY: this.data.handleCenterY + diff_y
})

var diff_x_before = this.handle_center_x – this.sticker_center_x;
var diff_y_before = this.handle_center_y – this.sticker_center_y;
var diff_x_after = this.data.handleCenterX – this.sticker_center_x;
var diff_y_after = this.data.handleCenterY – this.sticker_center_y;
var distance_before = Math.sqrt(diff_x_before * diff_x_before + diff_y_before * diff_y_before);
var distance_after = Math.sqrt(diff_x_after * diff_x_after + diff_y_after * diff_y_after);
var angle_before = Math.atan2(diff_y_before, diff_x_before) / Math.PI * 180;
var angle_after = Math.atan2(diff_y_after, diff_x_after) / Math.PI * 180;

this.setData({
scale: distance_after / distance_before * this.scale,
rotate: angle_after – angle_before + this.rotate
})
break
}
}

this.start_x = current_x;
this.start_y = current_y;
}

编辑状态的保存

一篇手帐包含的组件类型包括 sticker(软件自带的贴纸)、image(用户上传的图片)和 text(自定义文字)三种,全部保存在一个如下格式的 json 对象中,每个独立组件都包含了一个不重复的 id 以及相关的信息,保存时由客户端生成该对象并编码成 json 字符串存储在数据库,恢复编辑状态时通过解析 json 字符串获得对象,再由编辑页面渲染

{
    "backgroundId": "5",                                        背景图id
    "assemblies": [
        {
            "id": "jhjg",                                       组件id
            "component_type": "image",                          组件类型(自定义图片)
            "image_url": "https://example.com/jhjg.png",        图片地址
            "stickerCenterX": 269,                              中心横坐标
            "stickerCenterY": 664,                              中心纵坐标
            "scale": 1.7123667831396403,                        缩放比例
            "rotate": -3.0127875041833434,                      旋转角度
            "wh_scale": 1,                                      图片宽高比
            "z_index": 19                                       组件层级
        },
        {
            "id": "gs47",
            "component_type": "text",                           组件类型(文字)
            "text": "test",                                     文字内容
            "stickerCenterX": 479,
            "stickerCenterY": 546,
            "scale": 1.808535318980528,
            "rotate": 29.11614626607893,
            "z_index": 10
        },
        {
            "id": "chjn",
            "component_type": "sticker",                        组件类型(贴纸)
            "sticker_type": "food",                             贴纸类型
            "sticker_id": "1",                                  贴纸id
            "image_url": "https://example.com/weapp/stickers/food/1.png",
            "stickerCenterX": 277,
            "stickerCenterY": 260,
            "scale": 1.3984276885130673,
            "rotate": -16.620756913892055,
            "z_index": 5
        }
    ]
}

柠檬手帐 – 界面简洁的图片编辑应用,支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图

资源下载此资源下载价格为1MB,请先
本资源属于付费资源,下载后请点击下载链接自行下载; 如有压缩密码/教程等请留意文章内容,资源一经购买概不退款; 如遇其他问题请联系客服QQ:4449926
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!mb2345@qq.com 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有MB奖励和额外收入!

模板2345精品站长源码站 小程序 柠檬手帐 – 界面简洁的图片编辑应用,支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图 https://www.mb2345.com/1694.html

常见问题
  • 本站大部分资源来自互联网,只有带“已测试”标签的资源经过测试,如下载未测试资源,或自己记住不到位未搭建成功的,本站不退款。
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用360、QQ浏览器下载,如有解压密码未标注的,请自行破解。
查看详情

相关文章

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    文章总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

注册账号即送5MB,开通VIP全站资源任你下载。

*终身VIP会员限时钜惠*

本站终身会员,原价388元,限时活动终身会员只需98元,活动时间有限,错过再等一年!

我知道了
柠檬手帐 – 界面简洁的图片编辑应用,支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图-海报

分享本文封面