From ad39805b8365e7bec32f5bc48d00a493d3024537 Mon Sep 17 00:00:00 2001 From: zoujiandong <10130823232@qq.com> Date: Fri, 5 Sep 2025 10:41:10 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E4=BA=A411?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages_app/hot/hot.vue | 2 +- pages_app/search/search.vue | 52 +++++++++++++++++++++++++------------ 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/pages_app/hot/hot.vue b/pages_app/hot/hot.vue index f4e71e9..a401db9 100644 --- a/pages_app/hot/hot.vue +++ b/pages_app/hot/hot.vue @@ -67,7 +67,7 @@ 上拉加载更多 - + 没有更多数据了 diff --git a/pages_app/search/search.vue b/pages_app/search/search.vue index 16ca1e7..9a4a9e5 100644 --- a/pages_app/search/search.vue +++ b/pages_app/search/search.vue @@ -21,7 +21,7 @@ - + 搜索 @@ -38,7 +38,7 @@ class="category-item" v-for="(item, index) in categoryList" :key="index" - @click="onCategoryClick(Index,item.type)" + @click="onCategoryClick(index,item.type)" > @@ -78,7 +78,8 @@ import doctorOn from "@/static/item_doctor_yes.png" import mall from "@/static/item_mall_no.png" import mallOn from "@/static/item_mall_yes.png" - const tab=ref(-1); + const tab=ref(0); + const type=ref(''); // 搜索关键词 const searchKeyword = ref(''); @@ -97,10 +98,10 @@ { name: '指南', icon:zhinan, activeIcon:zhinanOn,type: 'zhinan' }, { name: '精品课', icon:course,activeIcon:courseOn, type: 'course' }, { name: '肝胆课件', icon:ppt,activeIcon:pptOn, type: 'ppt' }, - { name: '患者', icon:patient, patientIcon:patientOn,type: 'patient' }, - { name: '名院', icon:doctor,activeIcon:doctorOn, type: 'doctor' }, - { name: '名科', icon:department,activeIcon:departmentOn, type: 'department' }, - { name: '名医', icon:doctor, activeIcon:doctorOn,type: 'doctor' }, + // { name: '患者', icon:patient, patientIcon:patientOn,type: 'patient' }, + // { name: '名院', icon:doctor,activeIcon:doctorOn, type: 'doctor' }, + // { name: '名科', icon:department,activeIcon:departmentOn, type: 'department' }, + // { name: '名医', icon:doctor, activeIcon:doctorOn,type: 'doctor' }, { name: '积分商城', icon:mall,activeIcon:mallOn, type: 'mall' } ]); @@ -134,34 +135,51 @@ }; // 点击分类 - const onCategoryClick = (index,type) => { - tab.value=index; - if(type=='video'){ + const goSearch = () => { + if(!searchKeyword.value){ + uni.showToast({ + title: `请输入搜索内容`, + icon: 'none' + }); + return; + } + if(type.value=='video'){ uni.navigateTo({ url: `/pages_app/searchVideo/searchVideo?keywords=${searchKeyword.value}` }) - }else if(type=='videoPatient'){ + }else if(type.value=='videoPatient'){ uni.navigateTo({ url: `/pages_app/searchVideo/searchVideo?keywords=${searchKeyword.value}&from=hjsp` }) - }else if(type=='news'){ + }else if(type.value=='news'){ uni.navigateTo({ url: `/pages_app/searchNews/searchNews?keywords=${searchKeyword.value}` }) - }else if(type=='kepu'){ + }else if(type.value=='kepu'){ uni.navigateTo({ url: `/pages_app/searchNews/searchNews?keywords=${searchKeyword.value}&from=kp` }) - }else if(type=='zhinan'){ + }else if(type.value=='zhinan'){ uni.navigateTo({ url: `/pages_app/hot/hot?name=${searchKeyword.value}` }) - }else if(type=='course'){ + }else if(type.value=='course'){ uni.navigateTo({ - url: `/pages_app/searchNews/searchNews?keywords=${searchKeyword.value}&from=kp` + url: `/pages_course/index/index?keywords=${searchKeyword.value}` + }) + }else if(type.value=='ppt'){ + uni.navigateTo({ + url: `/pages_app/hot/hot?name=${searchKeyword.value}` + }) + }else if(type.value=='mall'){ + uni.navigateTo({ + url: `/pages_app/pointMall/pointMall?keywords=${searchKeyword.value}` }) } - + } + const onCategoryClick = (index,typeStr) => { + tab.value=index; + type.value=typeStr; // 这里可以根据分类进行搜索 }; From c711c53959ba5872b68d589bfa25aa3727cba3ef Mon Sep 17 00:00:00 2001 From: zoujiandong <10130823232@qq.com> Date: Fri, 5 Sep 2025 17:38:14 +0800 Subject: [PATCH 2/2] =?UTF-8?q?9.5=E4=B8=8B=E5=8D=88=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/api.js | 21 + pages.json | 22 + pages/education/education.vue | 2 +- pages/index/index.vue | 63 +- pages/live/live.vue | 617 +++++++++---- pages/meeting/meeting.vue | 74 +- pages_app/myApplication/myApplication.vue | 422 +++++++++ pages_app/personInfo/personInfo.vue | 563 +++++++++++- pages_app/search/search.vue | 4 +- pages_app/writeInfo/writeInfo.vue | 123 +++ pages_app/writeInfo/wtiteInfo.vue | 132 +++ uni_modules/qf-image-cropper/changelog.md | 72 ++ .../qf-image-cropper.render.js | 855 ++++++++++++++++++ .../qf-image-cropper/qf-image-cropper.vue | 743 +++++++++++++++ .../qf-image-cropper/qf-image-cropper.wxs | 727 +++++++++++++++ uni_modules/qf-image-cropper/package.json | 81 ++ uni_modules/qf-image-cropper/readme.md | 97 ++ 17 files changed, 4343 insertions(+), 275 deletions(-) create mode 100644 pages_app/myApplication/myApplication.vue create mode 100644 pages_app/writeInfo/writeInfo.vue create mode 100644 pages_app/writeInfo/wtiteInfo.vue create mode 100644 uni_modules/qf-image-cropper/changelog.md create mode 100644 uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.render.js create mode 100644 uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue create mode 100644 uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.wxs create mode 100644 uni_modules/qf-image-cropper/package.json create mode 100644 uni_modules/qf-image-cropper/readme.md diff --git a/api/api.js b/api/api.js index a4c05dc..3cb9c0e 100644 --- a/api/api.js +++ b/api/api.js @@ -401,6 +401,27 @@ const api = { polularScienceArticleListIndexNew(data){ return request('/expertAPI/polularScienceArticleListIndexNew', data, 'post', false); }, + meetingListBySearch(data){ + return request('/expertAPI/meetingListBySearch', data, 'post', false); + }, + getExpertByUuid(data){ + return request('/expertAPI/getExpertByUuid', data, 'post', false); + }, + getUserIcon(data){ + return request('/expertAPI/getUserIcon', data, 'post', false); + }, + addUserIcon(data){ + return request('/expertAPI/addUserIcon', data, 'post', false); + }, + getDiseaseList(data){ + return request('/expertAPI/disease', data, 'post', false); + }, + getPositionList(data){ + return request('/expertAPI/positionList', data, 'post', false); + }, + getOfficeList(data){ + return request('/expertAPI/officeList', data, 'post', false); + }, } export default api \ No newline at end of file diff --git a/pages.json b/pages.json index 9b86536..8a297ef 100644 --- a/pages.json +++ b/pages.json @@ -208,6 +208,28 @@ } } }, + { + "path": "writeInfo/writeInfo", + "style": { + "navigationStyle": "custom", + "navigationBarRightButton":{ "hide": true}, + "navigationBarTitleText": "uni-app分页", + "app": { + "bounce": "none" + } + } + }, + { + "path": "myApplication/myApplication", + "style": { + "navigationStyle": "custom", + "navigationBarRightButton":{ "hide": true}, + "navigationBarTitleText": "uni-app分页", + "app": { + "bounce": "none" + } + } + }, { "path": "searchVideo/searchVideo", "style": { diff --git a/pages/education/education.vue b/pages/education/education.vue index ac1fd6e..d84b20a 100644 --- a/pages/education/education.vue +++ b/pages/education/education.vue @@ -112,7 +112,7 @@ switch(courseType) { case 'course': navTo({ - url: '/pages_course/index/index' + url: '/pages_course/course/course' }) break; case 'video': diff --git a/pages/index/index.vue b/pages/index/index.vue index 0992762..62ae857 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -18,7 +18,7 @@ placeholderColor="#999999" > - + @@ -142,8 +142,9 @@ 精彩回放 - - 更多 + + 更多 + @@ -280,6 +281,11 @@ url:'/pages_app/search/search' }) } + const onReplayMore=()=>{ + navTo({ + url:'/pages_app/video/video' + }) + } // 计算头部背景色 const headerBgColor = computed(() => { // 获取屏幕宽度来计算rpx到px的转换比例 @@ -439,28 +445,9 @@ // 精彩回放点击事件 const onReplayClick = (item) => { console.log('点击精彩回放:', item); - uni.showToast({ - title: `查看${item.content}`, - icon: 'none' - }); - - // 根据类型跳转到不同页面 - switch(item.type) { - case 'case_discussion': - uni.navigateTo({ - url: '/pages/discussion/detail?id=' + item.id - }); - break; - case 'new_topic': - uni.navigateTo({ - url: '/pages/topic/detail?id=' + item.id - }); - break; - default: - uni.navigateTo({ - url: '/pages/replay/detail?id=' + item.id - }); - } + navTo({ + url: '/pages_course/course_detail/course_detail?id=' + item.id + }) }; // 网格点击事件 @@ -480,9 +467,9 @@ }else if(index==5){ url='/pages_app/ppt/ppt' }else if(index==6){ - url='/pages_course/index/index' + url='/pages_course/course/course' }else{ - url='/pages_app/search/search' + url='/pages_app/myApplication/myApplication' } navTo({ url:url @@ -512,10 +499,15 @@ // 查看更多实用指南 const onGuideMore = () => { - console.log('查看更多实用指南'); - uni.navigateTo({ - url: '/pages/guide/list' - }); + if(currentGuideTab.value==0){ + navTo({ + url: '/pages_app/zhinan/zhinan' + }); + }else{ + navTo({ + url: '/pages_app/ppt/ppt' + }); + } }; const goNews=()=>{ let url=docUrl+signInfo.news.path; @@ -538,7 +530,9 @@ const onBannerClick = (item,index) => { if (!item) return; if(index==0){ - + navTo({ + url:'/pages_app/personInfo/personInfo' + }) }else{ // 如果存在外链path，优先按平台打开 if (item.path) { @@ -600,6 +594,11 @@ }) // #endif }; + const goMessage=()=>{ + navTo({ + url: '/pages_app/msg/msg' + }) + } // 实用指南点击事件 const onGuideClick = (item) => { diff --git a/pages/live/live.vue b/pages/live/live.vue index 3e45f19..6c745aa 100644 --- a/pages/live/live.vue +++ b/pages/live/live.vue @@ -33,49 +33,54 @@ :enable-back-to-top="true" > - 2025年08月 + - - - - {{ item.date }} - - - - - {{ item.title }} - - - - + @@ -84,7 +89,6 @@ 暂无会议数据 - 请稍后再试或调整筛选条件 @@ -93,10 +97,10 @@ 加载中... - + 上拉加载更多 - + 没有更多数据了 @@ -153,7 +157,7 @@ + + diff --git a/pages_app/personInfo/personInfo.vue b/pages_app/personInfo/personInfo.vue index fe69e91..7ef9e9f 100644 --- a/pages_app/personInfo/personInfo.vue +++ b/pages_app/personInfo/personInfo.vue @@ -20,7 +20,7 @@ 头像* - + @@ -28,14 +28,14 @@ 姓名* - {{ form.name }} + {{ form.realName }} 性别* - {{ form.gender }} + {{ getGenderText(form.sex) }} @@ -44,7 +44,7 @@ 出生日期 - {{ form.birthday || '' }} + {{ form.birthDate || '' }} @@ -70,11 +70,12 @@ 专业资料 - - + + 医院* - {{ form.hospital }} + 请选择医院 + {{ regionText }} @@ -83,7 +84,7 @@ 科室* - {{ form.department }} + {{ form.officeName }} @@ -92,7 +93,7 @@ 科室电话* - {{ form.departmentPhone }} + {{ form.officePhone }} @@ -101,7 +102,7 @@ 职称 - {{ form.title }} + {{ form.positionName }} @@ -110,7 +111,7 @@ 执业医师证编号* - {{ form.licenseNo }} + {{ form.certificate }} @@ -119,7 +120,7 @@ 执业医师证图片或胸牌* - + @@ -128,7 +129,7 @@ 专长 - {{ form.specialty }} + {{ getSpecialtyText() }} @@ -137,35 +138,250 @@ 个人简介 + {{ form.intro || '暂无简介' }} + + + + + + 取消 + 选择地区 + 确定 + + + + {{ p.name }} + + + {{ c.name }} + + + {{ a.name }} + + + 地区数据加载中... + + + + + + + 取消 + 选择出生日期 + 确定 + + + + {{ year }}年 + + + {{ month }}月 + + + {{ day }}日 + + + + + + + + + 取消 + 选择科室 + 确定 + + + + {{ dept }} + + + + + + + + + 取消 + 选择职称 + 确定 + + + + {{ title }} + + + @@ -277,4 +715,67 @@ border-radius: 8rpx; background-color: #f5f5f5; } + + .placeholder { + color: #bbb; + } + + /* 地区选择器样式 */ + .picker-mask { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: rgba(0,0,0,0.4); + z-index: 1000; + } + + .picker-panel { + position: fixed; + left: 0; + right: 0; + bottom: 0; + background: #fff; + z-index: 1001; + } + + .picker-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20rpx 24rpx; + border-bottom: 1rpx solid #eee; + } + + .picker-title { + font-size: 30rpx; + color: #333; + } + + .picker-btn { + color: #666; + font-size: 28rpx; + } + + .picker-btn.ok { + color: #38c1b1; + } + + .picker-view { + height: 480rpx; + } + + .picker-item { + height: 80rpx; + line-height: 80rpx; + text-align: center; + color: #333; + } + + .picker-empty { + padding: 40rpx; + text-align: center; + color: #999; + } diff --git a/pages_app/search/search.vue b/pages_app/search/search.vue index 9a4a9e5..bacf118 100644 --- a/pages_app/search/search.vue +++ b/pages_app/search/search.vue @@ -165,7 +165,7 @@ }) }else if(type.value=='course'){ uni.navigateTo({ - url: `/pages_course/index/index?keywords=${searchKeyword.value}` + url: `/pages_course/course/course?keywords=${searchKeyword.value}` }) }else if(type.value=='ppt'){ uni.navigateTo({ @@ -173,7 +173,7 @@ }) }else if(type.value=='mall'){ uni.navigateTo({ - url: `/pages_app/pointMall/pointMall?keywords=${searchKeyword.value}` + url: `/pages_goods/pointMall/pointMall?keywords=${searchKeyword.value}` }) } } diff --git a/pages_app/writeInfo/writeInfo.vue b/pages_app/writeInfo/writeInfo.vue new file mode 100644 index 0000000..67a0005 --- /dev/null +++ b/pages_app/writeInfo/writeInfo.vue @@ -0,0 +1,123 @@ + + + + + + + diff --git a/pages_app/writeInfo/wtiteInfo.vue b/pages_app/writeInfo/wtiteInfo.vue new file mode 100644 index 0000000..b7fdde8 --- /dev/null +++ b/pages_app/writeInfo/wtiteInfo.vue @@ -0,0 +1,132 @@ + + + + + + + diff --git a/uni_modules/qf-image-cropper/changelog.md b/uni_modules/qf-image-cropper/changelog.md new file mode 100644 index 0000000..0fa6898 --- /dev/null +++ b/uni_modules/qf-image-cropper/changelog.md @@ -0,0 +1,72 @@ +## 2.2.5（2024-07-30） +* 修复 当 checkRange=true 时，拖动四个伸缩角放大图片时还可能会超出或未到边界的问题 +* 修复 当 checkRange=false 时，图片旋转时会放大图片适应裁剪尺寸的问题 +* 修复 当 checkRange=true 时，图片旋转 90° 或 270° 进行缩放可能会无法拖动图片的问题 +## 2.2.4（2024-06-21） +* 新增 reverseRotatable 属性，是否支持逆向翻转 +* 修复 `2.1.7` 版本导致旋转后图片没有自动适配裁剪框的问题 + +## 2.2.3（2024-06-21） +* 新增 gpu 属性，是否开启硬件加速，图片缩放过程中如果出现元素的“留影”或“重影”效果，可通过该方式解决或减轻这一问题 +* 修复 组件使用 `v-if` 并设置 `src` 属性时可能会出现图片渲染位置存在偏差的问题 + +## 2.2.2（2024-06-21） +* 优化 组件实例 chooseImage 方法支持传参 +* 修复 组件使用 `v-if` 时组件无非正常渲染的问题 + +## 2.2.1（2024-06-15） +* 修复 H5平台不支持手势拖动图片的问题 + +## 2.2.0（2024-05-31） +* 修复 APP平台 `vue2` 项目因 `2.1.9` 版本修复 `vue3` 项目bug而引发的问题 + +## 2.1.9（2024-05-29） +* 修复 APP平台 `vue3` 项目因 uniapp `renderjs` 中未支持条件编译，导致运行了H5平台代码报错的问题 + +## 2.1.8（2024-05-29） +* 新增 zIndex 属性，调整组件层级 +* 新增 组件内容插槽 +* 优化 微信小程序平台动态修改元素style时的多余内容 + +## 2.1.7（2024-05-28） +* 新增 checkRange 属性，当 checkRange=false 时允许图片位置超出裁剪边界 +* 新增 minScale 属性，图片最小缩放倍数，当 minScale<0 时可使图片宽高不再受裁剪区域宽高限制 +* 新增 backgroundColor 属性，生成图片背景色，如果裁剪区域没有完全包含在图片中时，不设置该属性生成图片存在一定的透明块 +* 优化 动态修改图片宽高但没有传入src时，尺寸适应问题 +* 修复 APP平台通过 `this.$ownerInstance` 获取组件实例时机过早，其值为 `undefined` 导致报错界面没有正常渲染的问题 + +## 2.1.6（2023-04-16） +* 修复 组件使用 v-show 指令会导致选择图片后初始位置严重偏位的问题 + +## 2.1.5（2023-04-15） +* 新增 兼容APP平台 + +## 2.1.4（2023-03-13） +* 新增 fileType 属性，用于指定生成文件的类型，只支持 'jpg' 或 'png'，默认为 'png' +* 新增 delay 属性，微信小程序平台使用 `Canvas 2D` 绘制时控制图片从绘制到生成所需时间 +* 优化 当生成图片的尺寸宽/高超过 Canvas 2D 最大限制（1365*1365）则将画布尺寸缩放在限制范围内绘制完成后输出目标尺寸 +* 优化 旋转图标指示方向与实际旋转方向不符 + +## 2.1.3（2023-02-06） +* 优化 vue3支持 + +## 2.1.2（2023-02-03） +* 新增 navigation 属性，H5平台当 showAngle 为 true 时，使用插件的页面在 `page.json` 中配置了 "navigationStyle": "custom" 时，必须将此值设为 false ，否则四个可拉伸角的触发位置会有偏差 +* 修复 H5平台部分设备（已知iPhone11以下机型）拍照的图片缩放时会闪动的问题 + +## 2.1.1（2022-12-06） +* 修复 横屏适配问题 + +## 2.1.0（2022-12-06） +* 新增 兼容H5平台，使用 renderjs 响应手势事件 + +## 2.0.0（2022-12-05） +* 重构 插件，使用 WXS 响应手势事件 +* 新增 图片翻转 +* 新增 拉伸裁剪框放大图片 +* 新增 监听PC鼠标滚轮触发缩放 +* 新增 圆形、圆角矩形的图片裁剪 +* 优化 图片缩放，移动端以双指触摸中心点为缩放中心点，PC端以鼠标所在点为缩放中心点 +* 优化 裁剪框样式 +* 优化 图片位置拖动 支持边界回弹效果（滑动时可滑出边界，释放时回弹到边界） +* 优化 生成图片使用新版 Canvas 2D 接口 diff --git a/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.render.js b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.render.js new file mode 100644 index 0000000..becac19 --- /dev/null +++ b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.render.js @@ -0,0 +1,855 @@ +/** + * 图片编辑器-手势监听 + * 1. 支持编译到app-vue（uni-app 2.5.5及以上版本）、H5上 + */ +/** 图片偏移量 */ +var offset = { x: 0, y: 0 }; +/** 图片缩放比例 */ +var scale = 1; +/** 图片最小缩放比例 */ +var minScale = 1; +/** 图片旋转角度 */ +var rotate = 0; +/** 触摸点 */ +var touches = []; +/** 图片布局信息 */ +var img = {}; +/** 系统信息 */ +var sys = {}; +/** 裁剪区域布局信息 */ +var area = {}; +/** 触摸行为类型 */ +var touchType = ''; +/** 操作角的位置 */ +var activeAngle = 0; +/** 裁剪区域布局信息偏移量 */ +var areaOffset = { left: 0, right: 0, top: 0, bottom: 0 }; +/** 元素ID */ +var elIds = { + 'imageStyles': 'crop-image', + 'maskStylesList': 'crop-mask-block', + 'borderStyles': 'crop-border', + 'circleBoxStyles': 'crop-circle-box', + 'circleStyles': 'crop-circle', + 'gridStylesList': 'crop-grid', + 'angleStylesList': 'crop-angle', +} +/** 记录上次初始化时间戳，排除APP重复更新 */ +var timestamp = 0; +/** vue3 renderjs 条件编译无效，以此方式区别 APP 和 H5 */ +// #ifdef H5 +var platform = 'H5'; +// #endif +// #ifdef APP +var platform = 'APP'; +// #endif +/** 容错值 */ +var fault = 0.000001; +/** + * 获取a、b两数中的最小正数 + * @param a + * @param b + */ +function minimum(a, b) { + if (a > 0 && b < 0) return a; + if (a < 0 && b > 0) return b; + if (a > 0 && b > 0) return Math.min(a, b); + return 0; +} +/** + * 在容错访问内获取n近似值 + * @param n + */ +function num(n) { + var m = parseFloat((n).toFixed(6)); + return m === fault || m === -fault ? 0 : m; +} +/** + * 比较a值在容错值范围内是否等于b值 + * @param a + * @param b + */ +function equalsByFault(a, b) { + return Math.abs(a - b) <= fault; +} +/** + * 比较a值在容错值范围内是否小于b值 + * @param a + * @param b + */ +function lessThanByFault(a, b) { + var c = a - b; + return c < 0 ? c < -fault : c < fault; +} +/** + * 验证并获取有效最大值 + * @param v + * @param max + * @param isInclude + * @param x + * @param y + * @param rate + * @returns + */ +function validMax(v, max, isInclude, x, y, rate) { + if(typeof max === 'number') { + if(isInclude && equalsByFault(max, y)) { // 宽高不等时，x轴用y轴值要做等比例转换 + var n = num(max * rate); + if (n <= x) return n; // 转化后值在x轴最大值范围内 + return x; // 转化后值超出x轴最大值范围则用最大值 + } + return max; + } + return v; +} +/** + * 样式对象转字符串 + * @param {Object} style 样式对象 + */ +function styleToString(style) { + if(typeof style === 'string') return style; + var str = ''; + for (let k in style) { + str += k + ':' + style[k] + ';'; + } + return str; +} +/** + * + * @param {Object} instance 页面实例对象 + * @param {Object} key 要修改样式的key + * @param {Object|Array} style 样式 + */ +function setStyle(instance, key, style) { + // console.log('setStyle', instance, key, JSON.stringify(style)) + // #ifdef APP-PLUS + if(platform === 'APP') { + if(Object.prototype.toString.call(style) === '[object Array]') { + for (var i = 0, len = style.length; i < len; i++) { + var el = window.document.getElementById(elIds[key] + '-' + (i + 1)); + el && (el.style = styleToString(style[i])); + } + } else { + var el = window.document.getElementById(elIds[key]); + el && (el.style = styleToString(style)); + } + } + // #endif + // #ifdef H5 + if(platform === 'H5') instance[key] = style; + // #endif +} +/** + * 触发页面实例指定方法 + * @param {Object} instance 页面实例对象 + * @param {Object} name 方法名称 + * @param {Object} obj 传递参数 + */ +function callMethod(instance, name, obj) { + // #ifdef APP-PLUS + if(platform === 'APP') instance.callMethod(name, obj); + // #endif + // #ifdef H5 + if(platform === 'H5') instance[name](obj); + // #endif +} +/** + * 计算两点间距 + * @param {Object} touches 触摸点信息 + */ +function getDistanceByTouches(touches) { + // 根据勾股定理求两点间距离 + var a = touches[1].pageX - touches[0].pageX; + var b = touches[1].pageY - touches[0].pageY; + var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); + // 求两点间的中点坐标 + // 1. a、b可能为负值 + // 2. 在求a、b时，如用touches[1]减touches[0]，则求中点坐标也得用touches[1]减a/2、b/2 + // 3. 同理，在求a、b时，也可用touches[0]减touches[1]，则求中点坐标也得用touches[0]减a/2、b/2 + var x = touches[1].pageX - a / 2; + var y = touches[1].pageY - b / 2; + return { c, x, y }; +}; + +/** + * 修正取值 + * @param {Object} a + * @param {Object} b + * @param {Object} c + * @param {Object} reverse 是否反向 + */ +function correctValue(a, b, c, reverse) { + return num(reverse ? Math.max(Math.min(a, b), c) : Math.min(Math.max(a, b), c)); +} + +/** + * 旋转90°或270°时检查边界：限制 x、y 拖动范围，禁止滑出边界 + * @param {Object} e 点坐标 + * @param {Object} xReverse x是否反向 + * @param {Object} yReverse y是否反向 + */ +function checkRotateRange(e, xReverse, yReverse) { + var o = num((img.height - img.width) / 2); // 宽高差值一半 + return { + x: correctValue(e.x, -img.height + o + area.width + area.left, area.left + o, xReverse), + y: correctValue(e.y, -img.width - o + area.height + area.top, area.top - o, yReverse) + }; +} + +/** + * 检查边界：限制 x、y 拖动范围，禁止滑出边界 + * @param {Object} e 点坐标 + */ +function checkRange(e) { + var r = rotate / 90 % 2; + if(r === 1) { // 因图片宽高可能不等，翻转 90° 或 270° 后图片宽高需反着计算，且左右和上下边界要根据差值做偏移 + if (area.width === area.height) { + return checkRotateRange(e, img.height < area.height, img.width < area.width); + } + var isInclude = img.height < area.width && img.width < area.height; // 图片是否包含在裁剪区域内 + if (img.width < area.height || img.height < area.width) { + if (area.width < area.height && img.width < img.height) { + return isInclude + ? checkRotateRange(e, area.width < area.height, area.width < area.height) + : checkRotateRange(e, false, true); + } + if (area.height < area.width && img.height < img.width) { + return isInclude + ? checkRotateRange(e, area.height < area.width, area.height < area.width) + : checkRotateRange(e, true, false); + } + } + if (img.height >= area.width && img.width >= area.height) { + return checkRotateRange(e, false, false); + } + if (isInclude) { + return area.height < area.width + ? checkRotateRange(e, true, true) + : checkRotateRange(e, area.width < area.height, area.width < area.height); + } + if (img.height < area.width && !img.width < area.height) { + return checkRotateRange(e, true, false); + } + if (!img.height < area.width && img.width < area.height) { + return checkRotateRange(e, false, true); + } + return checkRotateRange(e, img.height < area.height, img.width < area.width); + } + return { + x: correctValue(e.x, -img.width + area.width + area.left, area.left, img.width < area.width), + y: correctValue(e.y, -img.height + area.height + area.top, area.top, img.height < area.height) + } +}; +/** + * 变更图片布局信息 + * @param {Object} e 布局信息 + */ +function changeImageRect(e) { + // console.log('changeImageRect', e) + offset.x += e.x || 0; + offset.y += e.y || 0; + if(e.check && area.checkRange) { // 检查边界 + var point = checkRange(offset); + if(offset.x !== point.x || offset.y !== point.y) { + offset = point; + } + } + + // 因频繁修改 width/height 会造成大量的内存消耗，改为scale + // e.instance.imageStyles = { + // width: img.width + 'px', + // height: img.height + 'px', + // transform: 'translate(' + (offset.x + ox) + 'px, ' + (offset.y + ox) + 'px) rotate(' + rotate +'deg)' + // }; + var ox = (img.width - img.oldWidth) / 2; + var oy = (img.height - img.oldHeight) / 2; + // e.instance.imageStyles = { + // width: img.oldWidth + 'px', + // height: img.oldHeight + 'px', + // transform: 'translate(' + (offset.x + ox) + 'px, ' + (offset.y + oy) + 'px) rotate(' + rotate +'deg) scale(' + scale + ')' + // }; + setStyle(e.instance, 'imageStyles', { + width: img.oldWidth + 'px', + height: img.oldHeight + 'px', + transform: (img.gpu ? 'translateZ(0) ' : '') + 'translate(' + (offset.x + ox) + 'px, ' + (offset.y + oy) + 'px' + ') rotate(' + rotate +'deg) scale(' + scale + ')' + }); + callMethod(e.instance, 'dataChange', { + width: img.width, + height: img.height, + x: offset.x, + y: offset.y, + rotate: rotate + }); +}; +/** + * 变更裁剪区域布局信息 + * @param {Object} e 布局信息 + */ +function changeAreaRect(e) { + // console.log('changeAreaRect', e) + // 变更蒙版样式 + setStyle(e.instance, 'maskStylesList', [ + { + left: 0, + width: (area.left + areaOffset.left) + 'px', + top: 0, + bottom: 0, + 'z-index': area.zIndex + 2 + }, + { + left: (area.right + areaOffset.right) + 'px', + right: 0, + top: 0, + bottom: 0, + 'z-index': area.zIndex + 2 + }, + { + left: (area.left + areaOffset.left) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + top: 0, + height: (area.top + areaOffset.top) + 'px', + 'z-index': area.zIndex + 2 + }, + { + left: (area.left + areaOffset.left) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + top: (area.bottom + areaOffset.bottom) + 'px', + // height: (area.top - areaOffset.bottom + sys.offsetBottom) + 'px', + bottom: 0, + 'z-index': area.zIndex + 2 + } + ]); + // 变更边框样式 + if(area.showBorder) { + setStyle(e.instance, 'borderStyles', { + left: (area.left + areaOffset.left) + 'px', + top: (area.top + areaOffset.top) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + }); + } + + // 变更参考线样式 + if(area.showGrid) { + setStyle(e.instance, 'gridStylesList', [ + { + 'border-width': '1px 0 0 0', + left: (area.left + areaOffset.left) + 'px', + right: (area.right + areaOffset.right) + 'px', + top: (area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) / 3 - 0.5) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '1px 0 0 0', + left: (area.left + areaOffset.left) + 'px', + right: (area.right + areaOffset.right) + 'px', + top: (area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) * 2 / 3 - 0.5) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 1px 0 0', + top: (area.top + areaOffset.top) + 'px', + bottom: (area.bottom + areaOffset.bottom) + 'px', + left: (area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) / 3 - 0.5) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 1px 0 0', + top: (area.top + areaOffset.top) + 'px', + bottom: (area.bottom + areaOffset.bottom) + 'px', + left: (area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) * 2 / 3 - 0.5) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + } + ]); + } + + // 变更四个伸缩角样式 + if(area.showAngle) { + setStyle(e.instance, 'angleStylesList', [ + { + 'border-width': area.angleBorderWidth + 'px 0 0 ' + area.angleBorderWidth + 'px', + left: (area.left + areaOffset.left - area.angleBorderWidth) + 'px', + top: (area.top + areaOffset.top - area.angleBorderWidth) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px 0 0', + left: (area.right + areaOffset.right - area.angleSize) + 'px', + top: (area.top + areaOffset.top - area.angleBorderWidth) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 0 ' + area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px', + left: (area.left + areaOffset.left - area.angleBorderWidth) + 'px', + top: (area.bottom + areaOffset.bottom - area.angleSize) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 ' + area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px 0', + left: (area.right + areaOffset.right - area.angleSize) + 'px', + top: (area.bottom + areaOffset.bottom - area.angleSize) + 'px', + 'z-index': area.zIndex + 3 + } + ]); + } + + // 变更圆角样式 + if(area.radius > 0) { + var radius = area.radius; + if(area.width === area.height && area.radius >= area.width / 2) { // 圆形 + radius = (area.width / 2); + } else { // 圆角矩形 + if(area.width !== area.height) { // 限制圆角半径不能超过短边的一半 + radius = Math.min(area.width / 2, area.height / 2, radius); + } + } + setStyle(e.instance, 'circleBoxStyles', { + left: (area.left + areaOffset.left) + 'px', + top: (area.top + areaOffset.top) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 2 + }); + setStyle(e.instance, 'circleStyles', { + 'box-shadow': '0 0 0 ' + Math.max(area.width, area.height) + 'px rgba(51, 51, 51, 0.8)', + 'border-radius': radius + 'px' + }); + } +}; +/** + * 缩放图片 + * @param {Object} e 布局信息 + */ +function scaleImage(e) { + // console.log('scaleImage', e) + var last = scale; + scale = Math.min(Math.max(e.scale + scale, minScale), img.maxScale); + if(last !== scale) { + img.width = num(img.oldWidth * scale); + img.height = num(img.oldHeight * scale); + // 参考问题：有一个长4000px、宽4000px的四方形ABCD，A点的坐标固定在(-2000,-2000)， + // 该四边形上有一个点E，坐标为(-100,-300)，将该四方形复制一份并缩小到90%后， + // 新四边形的A点坐标为多少时可使新四边形的E点与原四边形的E点重合？ + // 预期效果：从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变 + // 计算方法：以相同起点先计算缩放前后两点间的距离，再加上原图像偏移量即可 + e.x = num((e.x - offset.x) * (1 - scale / last)); + e.y = num((e.y - offset.y) * (1 - scale / last)); + changeImageRect(e); + return true; + } + return false; +}; +/** + * 获取触摸点在哪个角 + * @param {number} x 触摸点x轴坐标 + * @param {number} y 触摸点y轴坐标 + * @return {number} 角的位置：0=无；1=左上；2=右上；3=左下；4=右下； + */ +function getToucheAngle(x, y) { + // console.log('getToucheAngle', x, y, JSON.stringify(area)) + var o = area.angleBorderWidth; // 需扩大触发范围则把 o 值加大即可 + var oy = sys.navigation ? 0 : sys.windowTop; + if(y >= area.top - o + oy && y <= area.top + area.angleSize + o + oy) { + if(x >= area.left - o && x <= area.left + area.angleSize + o) { + return 1; // 左上角 + } else if(x >= area.right - area.angleSize - o && x <= area.right + o) { + return 2; // 右上角 + } + } else if(y >= area.bottom - area.angleSize - o + oy && y <= area.bottom + o + oy) { + if(x >= area.left - o && x <= area.left + area.angleSize + o) { + return 3; // 左下角 + } else if(x >= area.right - area.angleSize - o && x <= area.right + o) { + return 4; // 右下角 + } + } + return 0; // 无触摸到角 +}; +/** + * 重置数据 + */ +function resetData() { + offset = { x: 0, y: 0 }; + scale = 1; + minScale = img.minScale; + rotate = 0; +}; +function getTouchs(touches) { + var result = []; + var len = touches ? touches.length : 0 + for (var i = 0; i < len; i++) { + result[i] = { + pageX: touches[i].pageX, + // h5无标题栏时，窗口顶部距离仍为标题栏高度，且触摸点y轴坐标还是有标题栏的值，即减去标题栏高度的值 + pageY: touches[i].pageY + sys.windowTop + }; + } + return result; +}; +var mouseEvent = false; +export default { + data() { + return { + imageStyles: {}, + maskStylesList: [{}, {}, {}, {}], + borderStyles: {}, + gridStylesList: [{}, {}, {}, {}], + angleStylesList: [{}, {}, {}, {}], + circleBoxStyles: {}, + circleStyles: {} + } + }, + created() { + // 监听 PC 端鼠标滚轮 + // #ifdef H5 + platform === 'H5' && window.addEventListener('mousewheel', async (e) => { + var touchs = getTouchs([e]) + img.src && scaleImage({ + instance: await this.getInstance(), + check: true, + // 鼠标向上滚动时，deltaY 固定 -100，鼠标向下滚动时，deltaY 固定 100 + scale: e.deltaY > 0 ? -0.05 : 0.05, + x: touchs[0].pageX, + y: touchs[0].pageY + }); + }); + // #endif + }, + // #ifdef H5 + mounted() { + platform === 'H5' && this.initH5Events(); + }, + // #endif + setPlatform(p) { + platform = p; + }, + methods: { + // #ifdef H5 + getTouchEvent(e) { + e.touches = [ + { pageX: e.pageX, pageY: e.pageY } + ]; + return e; + }, + initH5Events() { + const preview = document.getElementById('pic-preview'); + preview?.addEventListener('mousedown', (e, ev) => { + mouseEvent = true; + this.touchstart(this.getTouchEvent(e)); + }); + preview?.addEventListener('mousemove', (e) => { + if (!mouseEvent) return; + this.touchmove(this.getTouchEvent(e)); + }); + preview?.addEventListener('mouseup', (e) => { + mouseEvent = false; + this.touchend(this.getTouchEvent(e)) + }); + preview?.addEventListener('mouseleave', (e) => { + mouseEvent = false; + this.touchend(this.getTouchEvent(e)) + }); + }, + // #endif + async getInstance() { + // #ifdef APP-PLUS + if(platform === 'APP') + return this.$ownerInstance + ? Promise.resolve(this.$ownerInstance) + : new Promise((resolve) => { + setTimeout(async () => { + resolve(await this.getInstance()); + }); + }); + // #endif + // #ifdef H5 + if(platform === 'H5') + return Promise.resolve(this); + // #endif + }, + /** + * 初始化：观察数据变更 + * @param {Object} newVal 新数据 + * @param {Object} oldVal 旧数据 + * @param {Object} o 组件实例对象 + */ + initObserver: async function(newVal, oldVal, o, i) { + // console.log('initObserver', newVal, oldVal, o, i) + if(newVal && (!img.src || timestamp !== newVal.timestamp)) { + timestamp = newVal.timestamp; + img = newVal.img; + sys = newVal.sys; + area = newVal.area; + minScale = img.minScale; + resetData(); + const instance = await this.getInstance() + img.src && changeImageRect({ + instance, + x: (sys.windowWidth - img.width) / 2, + y: (sys.windowHeight + sys.windowTop - sys.offsetBottom - img.height) / 2 + }); + changeAreaRect({ + instance + }); + } + }, + /** + * 鼠标滚轮滚动 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + mousewheel: function(e, o) { + // h5平台 wheel 事件无法判断滚轮滑动方向，需使用 mousewheel + }, + /** + * 触摸开始 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchstart: function(e, o) { + if(!img.src) return; + touches = getTouchs(e.touches); + activeAngle = area.showAngle ? getToucheAngle(touches[0].pageX, touches[0].pageY) : 0; + if(touches.length === 1 && activeAngle !== 0) { + touchType = 'stretch'; // 伸缩裁剪区域 + } else { + touchType = ''; + } + // console.log('touchstart', e, activeAngle) + }, + /** + * 触摸移动 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchmove: async function(e, o) { + if(!img.src) return; + // console.log('touchmove', e, o) + e.touches = getTouchs(e.touches); + if(touchType === 'stretch') { // 触摸四个角进行拉伸 + var point = e.touches[0]; + var start = touches[0]; + var x = point.pageX - start.pageX; + var y = point.pageY - start.pageY; + if(x !== 0 || y !== 0) { + var maxX = num(area.width * (1 - area.minScale)); + var maxY = num(area.height * (1 - area.minScale)); + // console.log(x, y, maxX, maxY, offset, area) + touches[0] = point; + var r = rotate / 90 % 2; + var m = r === 1 ? num((img.height - img.width) / 2) : 0; // 宽高差值一半 + var xCompare = r === 1 ? lessThanByFault(img.height, area.width) : lessThanByFault(img.width, area.width); + var yCompare = r === 1 ? lessThanByFault(img.width, area.height) : lessThanByFault(img.height, area.height) + var isInclude = xCompare && yCompare; + var isIntersect = area.checkRange && (xCompare || yCompare); // 图片是否包含在裁剪区域内 + var isReverse = !isInclude || num((offset.x - area.left) / area.width) <= num((offset.y - area.top) / area.height) || (area.width > area.height && img.width < img.height && r === 1); + switch(activeAngle) { + case 1: // 左上角 + x = num(x + areaOffset.left); + y = num(y + areaOffset.top); + if(x >= 0 && y >= 0) { // 有效滑动 + var t = num(offset.y + m - area.top); + var l = num(offset.x - m - area.left); + // && (offset.x + img.width < area.right || offset.y + img.height < area.bottom) + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(x > y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(x > maxX) x = maxX; + y = num(x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(y > maxY) y = maxY; + x = num(y * area.width / area.height); + } + areaOffset.left = x; + areaOffset.top = y; + } + break; + case 2: // 右上角 + x = num(x + areaOffset.right); + y = num(y + areaOffset.top); + if(x <= 0 && y >= 0) { // 有效滑动 + var w = (r === 1 ? img.height : img.width); + var t = num(offset.y + m - area.top); + var l = num(area.right + m - offset.x - w); + var max = isIntersect && ((t >= 0) || (l >= 0)) + ? minimum(t, l) + : false; + if(-x > y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(-x > maxX) x = -maxX; + y = num(-x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(y > maxY) y = maxY; + x = num(-y * area.width / area.height); + } + areaOffset.right = x; + areaOffset.top = y; + } + break; + case 3: // 左下角 + x += num(x + areaOffset.left); + y += num(y + areaOffset.bottom); + if(x >= 0 && y <= 0) { // 有效滑动 + var w = (r === 1 ? img.width : img.height); + var t = num(area.bottom - m - offset.y - w); + var l = num(offset.x - m - area.left); + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(x > -y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(x > maxX) x = maxX; + y = num(-x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(-y > maxY) y = -maxY; + x = num(-y * area.width / area.height); + } + areaOffset.left = x; + areaOffset.bottom = y; + } + break; + case 4: // 右下角 + x = num(x + areaOffset.right); + y = num(y + areaOffset.bottom); + if(x <= 0 && y <= 0) { // 有效滑动 + var w = (r === 1 ? img.height : img.width); + var h = (r === 1 ? img.width : img.height); + var t = num(area.bottom - offset.y - h - m); + var l = num(area.right + m - offset.x - w); + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(-x > -y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(-x > maxX) x = -maxX; + y = num(x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(-y > maxY) y = -maxY; + x = num(y * area.width / area.height); + } + areaOffset.right = x; + areaOffset.bottom = y; + } + break; + } + // console.log(x, y, JSON.stringify(areaOffset)) + changeAreaRect({ + instance: await this.getInstance(), + }); + // this.draw(); + } + } else if (e.touches.length == 2) { // 双点触摸缩放 + var start = getDistanceByTouches(touches); + var end = getDistanceByTouches(e.touches); + scaleImage({ + instance: await this.getInstance(), + check: !area.bounce, + scale: (end.c - start.c) / 100, + x: end.x, + y: end.y + }); + touchType = 'scale'; + } else if(touchType === 'scale') {// 从双点触摸变成单点触摸 / 从缩放变成拖动 + touchType = 'move'; + } else { + changeImageRect({ + instance: await this.getInstance(), + check: !area.bounce, + x: e.touches[0].pageX - touches[0].pageX, + y: e.touches[0].pageY - touches[0].pageY + }); + touchType = 'move'; + } + touches = e.touches; + }, + /** + * 触摸结束 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchend: async function(e, o) { + if(!img.src) return; + if(touchType === 'stretch') { // 拉伸裁剪区域的四个角缩放 + // 裁剪区域宽度被缩放到多少 + var left = areaOffset.left; + var right = areaOffset.right; + var top = areaOffset.top; + var bottom = areaOffset.bottom; + var w = area.width + right - left; + var h = area.height + bottom - top; + // 图像放大倍数 + var p = scale * (area.width / w) - scale; + // 复原裁剪区域 + areaOffset = { left: 0, right: 0, top: 0, bottom: 0 }; + changeAreaRect({ + instance: await this.getInstance(), + }); + scaleImage({ + instance: await this.getInstance(), + scale: p, + x: area.left + left + (1 === activeAngle || 3 === activeAngle ? w : 0), + y: area.top + top + (1 === activeAngle || 2 === activeAngle ? h : 0) + }); + } else if (area.bounce) { // 检查边界并矫正，实现拖动到边界时有回弹效果 + changeImageRect({ + instance: await this.getInstance(), + check: true + }); + } + }, + /** + * 顺时针翻转图片90° + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + rotateImage: async function(r) { + rotate = (rotate + (r || 90)) % 360; + + if(img.minScale >= 1 && area.checkRange) { + // 因图片宽高可能不等，翻转后图片宽高需足够填满裁剪区域 + minScale = 1; + if(img.width < area.height) { + minScale = area.height / img.oldWidth; + } else if(img.height < area.width) { + minScale = area.width / img.oldHeight; + } + if(minScale !== 1) { + scaleImage({ + instance: await this.getInstance(), + scale: minScale - scale, + x: sys.windowWidth / 2, + y: (sys.windowHeight - sys.offsetBottom) / 2 + }); + } + } + + // 由于拖动画布后会导致图片位置偏移，翻转时的旋转中心点需是图片区域+偏移区域的中心点 + // 翻转x轴中心点 = (超出裁剪区域右侧的图片宽度 - 超出裁剪区域左侧的图片宽度) / 2 + // 翻转y轴中心点 = (超出裁剪区域下方的图片宽度 - 超出裁剪区域上方的图片宽度) / 2 + var ox = ((offset.x + img.width - area.right) - (area.left - offset.x)) / 2; + var oy = ((offset.y + img.height - area.bottom) - (area.top - offset.y)) / 2; + changeImageRect({ + instance: await this.getInstance(), + check: true, + x: -ox - oy, + y: -oy + ox + }); + }, + rotateImage90: function() { + this.rotateImage(90) + }, + rotateImage270: function() { + this.rotateImage(270) + }, + } +} \ No newline at end of file diff --git a/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue new file mode 100644 index 0000000..bfb34fb --- /dev/null +++ b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue @@ -0,0 +1,743 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.wxs b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.wxs new file mode 100644 index 0000000..98a5116 --- /dev/null +++ b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.wxs @@ -0,0 +1,727 @@ +/** + * 图片编辑器-手势监听 + * 1. wxs 暂不支持 es6 语法 + * 2. 支持编译到微信小程序、QQ小程序、app-vue、H5上（uni-app 2.2.5及以上版本） + */ +/** 图片偏移量 */ +var offset = { x: 0, y: 0 }; +/** 图片缩放比例 */ +var scale = 1; +/** 图片最小缩放比例 */ +var minScale = 1; +/** 图片旋转角度 */ +var rotate = 0; +/** 触摸点 */ +var touches = []; +/** 图片布局信息 */ +var img = {}; +/** 系统信息 */ +var sys = {}; +/** 裁剪区域布局信息 */ +var area = {}; +/** 触摸行为类型 */ +var touchType = ''; +/** 操作角的位置 */ +var activeAngle = 0; +/** 裁剪区域布局信息偏移量 */ +var areaOffset = { left: 0, right: 0, top: 0, bottom: 0 }; +/** 容错值 */ +var fault = 0.000001; +/** + * 获取a、b两数中的最小正数 + * @param a + * @param b + */ +function minimum(a, b) { + if (a > 0 && b < 0) return a; + if (a < 0 && b > 0) return b; + if (a > 0 && b > 0) return Math.min(a, b); + return 0; +} +/** + * 在容错访问内获取n近似值 + * @param n + */ +function num(n) { + var m = parseFloat((n).toFixed(6)); + return m === fault || m === -fault ? 0 : m; +} +/** + * 比较a值在容错值范围内是否等于b值 + * @param a + * @param b + */ +function equalsByFault(a, b) { + return Math.abs(a - b) <= fault; +} +/** + * 比较a值在容错值范围内是否小于b值 + * @param a + * @param b + */ +function lessThanByFault(a, b) { + var c = a - b; + return c < 0 ? c < -fault : c < fault; +} +/** + * 验证并获取有效最大值 + * @param v + * @param max + * @param isInclude + * @param x + * @param y + * @param rate + * @returns + */ +function validMax(v, max, isInclude, x, y, rate) { + if(typeof max === 'number') { + if(isInclude && equalsByFault(max, y)) { // 宽高不等时，x轴用y轴值要做等比例转换 + var n = num(max * rate); + if (n <= x) return n; // 转化后值在x轴最大值范围内 + return x; // 转化后值超出x轴最大值范围则用最大值 + } + return max; + } + return v; +} +/** + * 计算两点间距 + * @param {Object} touches 触摸点信息 + */ +function getDistanceByTouches(touches) { + // 根据勾股定理求两点间距离 + var a = touches[1].pageX - touches[0].pageX; + var b = touches[1].pageY - touches[0].pageY; + var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); + // 求两点间的中点坐标 + // 1. a、b可能为负值 + // 2. 在求a、b时，如用touches[1]减touches[0]，则求中点坐标也得用touches[1]减a/2、b/2 + // 3. 同理，在求a、b时，也可用touches[0]减touches[1]，则求中点坐标也得用touches[0]减a/2、b/2 + var x = touches[1].pageX - a / 2; + var y = touches[1].pageY - b / 2; + return { c, x, y }; +}; +/** + * 修正取值 + * @param {Object} a + * @param {Object} b + * @param {Object} c + * @param {Object} reverse 是否反向 + */ +function correctValue(a, b, c, reverse) { + return num(reverse ? Math.max(Math.min(a, b), c) : Math.min(Math.max(a, b), c)); +} + +/** + * 旋转90°或270°时检查边界：限制 x、y 拖动范围，禁止滑出边界 + * @param {Object} e 点坐标 + * @param {Object} xReverse x是否反向 + * @param {Object} yReverse y是否反向 + */ +function checkRotateRange(e, xReverse, yReverse) { + var o = num((img.height - img.width) / 2); // 宽高差值一半 + return { + x: correctValue(e.x, -img.height + o + area.width + area.left, area.left + o, xReverse), + y: correctValue(e.y, -img.width - o + area.height + area.top, area.top - o, yReverse) + }; +} + +/** + * 检查边界：限制 x、y 拖动范围，禁止滑出边界 + * @param {Object} e 点坐标 + */ +function checkRange(e) { + var r = rotate / 90 % 2; + if(r === 1) { // 因图片宽高可能不等，翻转 90° 或 270° 后图片宽高需反着计算，且左右和上下边界要根据差值做偏移 + if (area.width === area.height) { + return checkRotateRange(e, img.height < area.height, img.width < area.width); + } + var isInclude = img.height < area.width && img.width < area.height; // 图片是否包含在裁剪区域内 + if (img.width < area.height || img.height < area.width) { + if (area.width < area.height && img.width < img.height) { + return isInclude + ? checkRotateRange(e, area.width < area.height, area.width < area.height) + : checkRotateRange(e, false, true); + } + if (area.height < area.width && img.height < img.width) { + return isInclude + ? checkRotateRange(e, area.height < area.width, area.height < area.width) + : checkRotateRange(e, true, false); + } + } + if (img.height >= area.width && img.width >= area.height) { + return checkRotateRange(e, false, false); + } + if (isInclude) { + return area.height < area.width + ? checkRotateRange(e, true, true) + : checkRotateRange(e, area.width < area.height, area.width < area.height); + } + if (img.height < area.width && !img.width < area.height) { + return checkRotateRange(e, true, false); + } + if (!img.height < area.width && img.width < area.height) { + return checkRotateRange(e, false, true); + } + return checkRotateRange(e, img.height < area.height, img.width < area.width); + } + return { + x: correctValue(e.x, -img.width + area.width + area.left, area.left, img.width < area.width), + y: correctValue(e.y, -img.height + area.height + area.top, area.top, img.height < area.height) + }; +}; +/** + * 变更图片布局信息 + * @param {Object} e 布局信息 + */ +function changeImageRect(e) { + offset.x += e.x || 0; + offset.y += e.y || 0; + var image = e.instance.selectComponent('.crop-image'); + if(e.check && area.checkRange) { // 检查边界 + var point = checkRange(offset); + if(offset.x !== point.x || offset.y !== point.y) { + offset = point; + } + } + // image.setStyle({ + // width: img.width + 'px', + // height: img.height + 'px', + // transform: 'translate(' + offset.x + 'px, ' + offset.y + 'px) rotate(' + rotate +'deg)' + // }); + var ox = (img.width - img.oldWidth) / 2; + var oy = (img.height - img.oldHeight) / 2; + image.setStyle({ + width: img.oldWidth + 'px', + height: img.oldHeight + 'px', + transform: (img.gpu ? 'translateZ(0) ' : '') + 'translate(' + (offset.x + ox) + 'px, ' + (offset.y + oy) + 'px) rotate(' + rotate +'deg) scale(' + scale + ')' + }); + + e.instance.callMethod('dataChange', { + width: img.width, + height: img.height, + x: offset.x, + y: offset.y, + rotate: rotate + }); +}; +/** + * 变更裁剪区域布局信息 + * @param {Object} e 布局信息 + */ +function changeAreaRect(e) { + // 变更蒙版样式 + var masks = e.instance.selectAllComponents('.crop-mask-block'); + var maskStyles = [ + { + left: 0, + width: (area.left + areaOffset.left) + 'px', + top: 0, + bottom: 0, + 'z-index': area.zIndex + 2 + }, + { + left: (area.right + areaOffset.right) + 'px', + right: 0, + top: 0, + bottom: 0, + 'z-index': area.zIndex + 2 + }, + { + left: (area.left + areaOffset.left) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + top: 0, + height: (area.top + areaOffset.top) + 'px', + 'z-index': area.zIndex + 2 + }, + { + left: (area.left + areaOffset.left) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + top: (area.bottom + areaOffset.bottom) + 'px', + // height: (area.top - areaOffset.bottom + sys.offsetBottom) + 'px', + bottom: 0, + 'z-index': area.zIndex + 2 + } + ]; + var len = masks.length; + for (var i = 0; i < len; i++) { + masks[i].setStyle(maskStyles[i]); + } + + // 变更边框样式 + if(area.showBorder) { + var border = e.instance.selectComponent('.crop-border'); + border.setStyle({ + left: (area.left + areaOffset.left) + 'px', + top: (area.top + areaOffset.top) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + }); + } + + // 变更参考线样式 + if(area.showGrid) { + var grids = e.instance.selectAllComponents('.crop-grid'); + var gridStyles = [ + { + 'border-width': '1px 0 0 0', + left: (area.left + areaOffset.left) + 'px', + right: (area.right + areaOffset.right) + 'px', + top: (area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) / 3 - 0.5) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '1px 0 0 0', + left: (area.left + areaOffset.left) + 'px', + right: (area.right + areaOffset.right) + 'px', + top: (area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) * 2 / 3 - 0.5) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 1px 0 0', + top: (area.top + areaOffset.top) + 'px', + bottom: (area.bottom + areaOffset.bottom) + 'px', + left: (area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) / 3 - 0.5) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 1px 0 0', + top: (area.top + areaOffset.top) + 'px', + bottom: (area.bottom + areaOffset.bottom) + 'px', + left: (area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) * 2 / 3 - 0.5) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + } + ]; + var len = grids.length; + for (var i = 0; i < len; i++) { + grids[i].setStyle(gridStyles[i]); + } + } + + // 变更四个伸缩角样式 + if(area.showAngle) { + var angles = e.instance.selectAllComponents('.crop-angle'); + var angleStyles = [ + { + 'border-width': area.angleBorderWidth + 'px 0 0 ' + area.angleBorderWidth + 'px', + left: (area.left + areaOffset.left - area.angleBorderWidth) + 'px', + top: (area.top + areaOffset.top - area.angleBorderWidth) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px 0 0', + left: (area.right + areaOffset.right - area.angleSize) + 'px', + top: (area.top + areaOffset.top - area.angleBorderWidth) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 0 ' + area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px', + left: (area.left + areaOffset.left - area.angleBorderWidth) + 'px', + top: (area.bottom + areaOffset.bottom - area.angleSize) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 ' + area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px 0', + left: (area.right + areaOffset.right - area.angleSize) + 'px', + top: (area.bottom + areaOffset.bottom - area.angleSize) + 'px', + 'z-index': area.zIndex + 3 + } + ]; + var len = angles.length; + for (var i = 0; i < len; i++) { + angles[i].setStyle(angleStyles[i]); + } + } + + // 变更圆角样式 + if(area.radius > 0) { + var circleBox = e.instance.selectComponent('.crop-circle-box'); + var circle = e.instance.selectComponent('.crop-circle'); + var radius = area.radius; + if(area.width === area.height && area.radius >= area.width / 2) { // 圆形 + radius = (area.width / 2); + } else { // 圆角矩形 + if(area.width !== area.height) { // 限制圆角半径不能超过短边的一半 + radius = Math.min(area.width / 2, area.height / 2, radius); + } + } + circleBox.setStyle({ + left: (area.left + areaOffset.left) + 'px', + top: (area.top + areaOffset.top) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 2 + }); + circle.setStyle({ + 'box-shadow': '0 0 0 ' + Math.max(area.width, area.height) + 'px rgba(51, 51, 51, 0.8)', + 'border-radius': radius + 'px' + }); + } +}; +/** + * 缩放图片 + * @param {Object} e 布局信息 + */ +function scaleImage(e) { + var last = scale; + scale = Math.min(Math.max(e.scale + scale, minScale), img.maxScale); + if(last !== scale) { + img.width = num(img.oldWidth * scale); + img.height = num(img.oldHeight * scale); + // 参考问题：有一个长4000px、宽4000px的四方形ABCD，A点的坐标固定在(-2000,-2000)， + // 该四边形上有一个点E，坐标为(-100,-300)，将该四方形复制一份并缩小到90%后， + // 新四边形的A点坐标为多少时可使新四边形的E点与原四边形的E点重合？ + // 预期效果：从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变 + // 计算方法：以相同起点先计算缩放前后两点间的距离，再加上原图像偏移量即可 + e.x = num((e.x - offset.x) * (1 - scale / last)); + e.y = num((e.y - offset.y) * (1 - scale / last)); + changeImageRect(e); + return true; + } + return false; +}; +/** + * 获取触摸点在哪个角 + * @param {number} x 触摸点x轴坐标 + * @param {number} y 触摸点y轴坐标 + * @return {number} 角的位置：0=无；1=左上；2=右上；3=左下；4=右下； + */ +function getToucheAngle(x, y) { + // console.log('getToucheAngle', x, y, JSON.stringify(area)) + var o = area.angleBorderWidth; // 需扩大触发范围则把 o 值加大即可 + if(y >= area.top - o && y <= area.top + area.angleSize + o) { + if(x >= area.left - o && x <= area.left + area.angleSize + o) { + return 1; // 左上角 + } else if(x >= area.right - area.angleSize - o && x <= area.right + o) { + return 2; // 右上角 + } + } else if(y >= area.bottom - area.angleSize - o && y <= area.bottom + o) { + if(x >= area.left - o && x <= area.left + area.angleSize + o) { + return 3; // 左下角 + } else if(x >= area.right - area.angleSize - o && x <= area.right + o) { + return 4; // 右下角 + } + } + return 0; // 无触摸到角 +}; +/** + * 重置数据 + */ +function resetData() { + offset = { x: 0, y: 0 }; + scale = 1; + minScale = img.minScale; + rotate = 0; +}; +/** +* 顺时针翻转图片90° +* @param {Object} e 事件对象 +* @param {Object} o 组件实例对象 +*/ +function rotateImage(e, o, r) { + rotate = (rotate + r) % 360; + if(img.minScale >= 1 && area.checkRange) { + // 因图片宽高可能不等，翻转后图片宽高需足够填满裁剪区域 + minScale = 1; + if(img.width < area.height) { + minScale = area.height / img.oldWidth; + } else if(img.height < area.width) { + minScale = area.width / img.oldHeight; + } + if(minScale !== 1) { + scaleImage({ + instance: o, + scale: minScale - scale, + x: sys.windowWidth / 2, + y: (sys.windowHeight - sys.offsetBottom) / 2 + }); + } + } + + // 由于拖动画布后会导致图片位置偏移，翻转时的旋转中心点需是图片区域+偏移区域的中心点 + // 翻转x轴中心点 = (超出裁剪区域右侧的图片宽度 - 超出裁剪区域左侧的图片宽度) / 2 + // 翻转y轴中心点 = (超出裁剪区域下方的图片宽度 - 超出裁剪区域上方的图片宽度) / 2 + var ox = ((offset.x + img.width - area.right) - (area.left - offset.x)) / 2; + var oy = ((offset.y + img.height - area.bottom) - (area.top - offset.y)) / 2; + changeImageRect({ + instance: o, + check: true, + x: -ox - oy, + y: -oy + ox + }); +}; +module.exports = { + /** + * 初始化：观察数据变更 + * @param {Object} newVal 新数据 + * @param {Object} oldVal 旧数据 + * @param {Object} o 组件实例对象 + */ + initObserver: function(newVal, oldVal, o, i) { + if(newVal) { + img = newVal.img; + sys = newVal.sys; + area = newVal.area; + minScale = img.minScale; + resetData(); + img.src && changeImageRect({ + instance: o, + x: (sys.windowWidth - img.width) / 2, + y: (sys.windowHeight - sys.offsetBottom - img.height) / 2 + }); + changeAreaRect({ + instance: o + }); + // console.log('initRect', JSON.stringify(newVal)) + } + }, + /** + * 鼠标滚轮滚动 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + mousewheel: function(e, o) { + if(!img.src) return; + scaleImage({ + instance: o, + check: true, + // 鼠标向上滚动时，deltaY 固定 -100，鼠标向下滚动时，deltaY 固定 100 + scale: e.detail.deltaY > 0 ? -0.05 : 0.05, + x: e.touches[0].pageX, + y: e.touches[0].pageY + }); + }, + /** + * 触摸开始 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchstart: function(e, o) { + if(!img.src) return; + touches = e.touches; + activeAngle = area.showAngle ? getToucheAngle(touches[0].pageX, touches[0].pageY) : 0; + if(touches.length === 1 && activeAngle !== 0) { + touchType = 'stretch'; // 伸缩裁剪区域 + } else { + touchType = ''; + } + // console.log('touchstart', JSON.stringify(e), activeAngle) + }, + /** + * 触摸移动 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchmove: function(e, o) { + if(!img.src) return; + // console.log('touchmove', JSON.stringify(e), JSON.stringify(o)) + if(touchType === 'stretch') { // 触摸四个角进行拉伸 + var point = e.touches[0]; + var start = touches[0]; + var x = point.pageX - start.pageX; + var y = point.pageY - start.pageY; + if(x !== 0 || y !== 0) { + var maxX = num(area.width * (1 - area.minScale)); + var maxY = num(area.height * (1 - area.minScale)); + // console.log(x, y, maxX, maxY, offset, area) + touches[0] = point; + var r = rotate / 90 % 2; + var m = r === 1 ? num((img.height - img.width) / 2) : 0; // 宽高差值一半 + var xCompare = r === 1 ? lessThanByFault(img.height, area.width) : lessThanByFault(img.width, area.width); + var yCompare = r === 1 ? lessThanByFault(img.width, area.height) : lessThanByFault(img.height, area.height) + var isInclude = xCompare && yCompare; + var isIntersect = area.checkRange && (xCompare || yCompare); // 图片是否包含在裁剪区域内 + var isReverse = !isInclude || num((offset.x - area.left) / area.width) <= num((offset.y - area.top) / area.height) || (area.width > area.height && img.width < img.height && r === 1); + switch(activeAngle) { + case 1: // 左上角 + x = num(x + areaOffset.left); + y = num(y + areaOffset.top); + if(x >= 0 && y >= 0) { // 有效滑动 + var t = num(offset.y + m - area.top); + var l = num(offset.x - m - area.left); + // && (offset.x + img.width < area.right || offset.y + img.height < area.bottom) + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(x > y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(x > maxX) x = maxX; + y = num(x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(y > maxY) y = maxY; + x = num(y * area.width / area.height); + } + areaOffset.left = x; + areaOffset.top = y; + } + break; + case 2: // 右上角 + x = num(x + areaOffset.right); + y = num(y + areaOffset.top); + if(x <= 0 && y >= 0) { // 有效滑动 + var w = (r === 1 ? img.height : img.width); + var t = num(offset.y + m - area.top); + var l = num(area.right + m - offset.x - w); + var max = isIntersect && ((t >= 0) || (l >= 0)) + ? minimum(t, l) + : false; + // var max = isInclude && ((offset.x > 0 && offset.x + img.width <= area.right) || (offset.y > 0 && offset.y >= area.top)) + // ? minimum(offset.y - area.top, area.right - offset.x - img.width) + // : false; + // console.log(offset.x, offset.y, img.width, img.height, area.top, area.right, m, max) + // console.log(offset.y + m - area.top, area.right + m - offset.x - w) + if(-x > y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(-x > maxX) x = -maxX; + y = num(-x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(y > maxY) y = maxY; + x = num(-y * area.width / area.height); + } + areaOffset.right = x; + areaOffset.top = y; + } + break; + case 3: // 左下角 + x += num(x + areaOffset.left); + y += num(y + areaOffset.bottom); + if(x >= 0 && y <= 0) { // 有效滑动 + var w = (r === 1 ? img.width : img.height); + var t = num(area.bottom - m - offset.y - w); + var l = num(offset.x - m - area.left); + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(x > -y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(x > maxX) x = maxX; + y = num(-x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(-y > maxY) y = -maxY; + x = num(-y * area.width / area.height); + } + areaOffset.left = x; + areaOffset.bottom = y; + } + break; + case 4: // 右下角 + x = num(x + areaOffset.right); + y = num(y + areaOffset.bottom); + if(x <= 0 && y <= 0) { // 有效滑动 + var w = (r === 1 ? img.height : img.width); + var h = (r === 1 ? img.width : img.height); + var t = num(area.bottom - offset.y - h - m); + var l = num(area.right + m - offset.x - w); + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(-x > -y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(-x > maxX) x = -maxX; + y = num(x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(-y > maxY) y = -maxY; + x = num(y * area.width / area.height); + } + areaOffset.right = x; + areaOffset.bottom = y; + } + break; + } + // console.log(x, y, JSON.stringify(areaOffset)) + changeAreaRect({ + instance: o, + }); + // this.draw(); + } + } else if (e.touches.length == 2) { // 双点触摸缩放 + var start = getDistanceByTouches(touches); + var end = getDistanceByTouches(e.touches); + scaleImage({ + instance: o, + check: !area.bounce, + scale: (end.c - start.c) / 100, + x: end.x, + y: end.y + }); + touchType = 'scale'; + } else if(touchType === 'scale') {// 从双点触摸变成单点触摸 / 从缩放变成拖动 + touchType = 'move'; + } else { + changeImageRect({ + instance: o, + check: !area.bounce, + x: e.touches[0].pageX - touches[0].pageX, + y: e.touches[0].pageY - touches[0].pageY + }); + touchType = 'move'; + } + touches = e.touches; + }, + /** + * 触摸结束 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchend: function(e, o) { + if(!img.src) return; + if(touchType === 'stretch') { // 拉伸裁剪区域的四个角缩放 + // 裁剪区域宽度被缩放到多少 + var left = areaOffset.left; + var right = areaOffset.right; + var top = areaOffset.top; + var bottom = areaOffset.bottom; + var w = area.width + right - left; + var h = area.height + bottom - top; + // 图像放大倍数 + var p = scale * (area.width / w) - scale; + // 复原裁剪区域 + areaOffset = { left: 0, right: 0, top: 0, bottom: 0 }; + changeAreaRect({ + instance: o, + }); + scaleImage({ + instance: o, + scale: p, + x: area.left + left + (1 === activeAngle || 3 === activeAngle ? w : 0), + y: area.top + top + (1 === activeAngle || 2 === activeAngle ? h : 0) + }); + } else if (area.bounce) { // 检查边界并矫正，实现拖动到边界时有回弹效果 + changeImageRect({ + instance: o, + check: true + }); + } + }, + /** + * 顺时针翻转图片90° + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + rotateImage: function(e, o) { + rotateImage(e, o, 90); + }, + rotateImage90: function(e, o) { + rotateImage(e, o, 90) + }, + rotateImage270: function(e, o) { + rotateImage(e, o, 270) + }, + // 此处只用于对齐其他平台端的样式参数，防止异常，无作用 + imageStyles: '', + maskStylesList: ['', '', '', ''], + borderStyles: '', + gridStylesList: ['', '', '', ''], + angleStylesList: ['', '', '', ''], + circleBoxStyles: '', + circleStyles: '', +} \ No newline at end of file diff --git a/uni_modules/qf-image-cropper/package.json b/uni_modules/qf-image-cropper/package.json new file mode 100644 index 0000000..f101c5b --- /dev/null +++ b/uni_modules/qf-image-cropper/package.json @@ -0,0 +1,81 @@ +{ + "id": "qf-image-cropper", + "displayName": "图片裁剪插件", + "version": "2.2.5", + "description": "图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式，功能多性能高体验好注释全。", + "keywords": [ + "qf-image-cropper", + "图片裁剪", + "图片编辑", + "头像裁剪", + "小程序" +], + "repository": "", + "engines": { + "HBuilderX": "^3.1.0" + }, +"dcloudext": { + "type": "component-vue", + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "无", + "data": "插件不采集任何数据", + "permissions": "无" + }, + "npmurl": "" + }, + "uni_modules": { + "dependencies": [], + "encrypt": [], + "platforms": { + "client": { + "Vue": { + "vue2": "y", + "vue3": "y" + }, + "App": { + "app-vue": "y", + "app-nvue": "n" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "y", + "微信浏览器(Android)": "y", + "QQ浏览器(Android)": "u" + }, + "H5-pc": { + "Chrome": "u", + "IE": "u", + "Edge": "u", + "Firefox": "u", + "Safari": "u" + }, + "小程序": { + "微信": "y", + "阿里": "n", + "百度": "n", + "字节跳动": "n", + "QQ": "u", + "钉钉": "n", + "快手": "n", + "飞书": "n", + "京东": "n" + }, + "快应用": { + "华为": "n", + "联盟": "n" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/qf-image-cropper/readme.md b/uni_modules/qf-image-cropper/readme.md new file mode 100644 index 0000000..f39f645 --- /dev/null +++ b/uni_modules/qf-image-cropper/readme.md @@ -0,0 +1,97 @@ +# qf-image-cropper +## 图片裁剪插件 +uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式，功能多性能高体验好注释全。 + +### 平台支持： +1. 支持微信小程序：移动端、PC端、开发者工具 +2. 支持H5平台（2.1.0版本起） +3. 支持APP平台（2.1.5版本起）：Android、IOS +4. 其他平台暂未测试兼容性未知 + +### 支持功能： +1. 自定义裁剪尺寸 +2. 定点等比例缩放：移动端以双指触摸中心点为缩放中心点，PC端以鼠标所在点为缩放中心点 +3. 自由拖动：支持限制滑出边界，也支持回弹效果（滑动时可滑出边界，释放时回弹到边界） +4. 图片翻转：在裁剪尺寸非 1:1 的情况下，翻转时宽高无法铺满裁剪区域时，图片会自动放大到合适尺寸 +5. 裁剪生成新图片 +6. 本地选择图片 +7. 可定制样式：可自由选择是否渲染裁剪边框、可伸缩裁剪顶角、参考线 +8. 裁剪圆角图片：圆形、圆角矩形 + +### 属性说明 +| 属性名 | 类型 | 默认值 | 说明 | +|:---|:---|:---|:---| +| src | String | | 图片资源地址 | +| width | Number | 300 | 裁剪宽度 | +| height | Number | 300 | 裁剪高度 | +| showBorder | Boolean | true | 是否绘制裁剪区域边框 | +| showGrid | Boolean | true | 是否绘制裁剪区域网格参考线 | +| showAngle | Boolean | true | 是否展示四个支持伸缩的角 | +| areaScale | Number | 0.3 | 裁剪区域最小缩放倍数 | +| minScale | Number | 1 | 图片最小缩放倍数 | +| maxScale | Number | 5 | 图片最大缩放倍数 | +| checkRange | Boolean | true | 检查图片位置是否超出裁剪边界，如果超出则会矫正位置 | +| backgroundColor | String | | 生成图片背景色：如果裁剪区域没有完全包含在图片中时，不设置该属性则生成图片存在一定的透明块 | +| bounce | Boolean | true | 是否有回弹效果：当 checkRange 为 true 时有效，拖动时可以拖出边界，释放时会弹回边界 | +| rotatable | Boolean | true | 是否支持翻转 | +| reverseRotatable | Boolean | false | 是否支持逆向翻转 | +| choosable | Boolean | true | 是否支持从本地选择素材 | +| gpu | Boolean | false | 是否开启硬件加速，图片缩放过程中如果出现元素的“留影”或“重影”效果，可通过该方式解决或减轻这一问题 | +| angleSize | Number | 20 | 四个角尺寸，单位px | +| angleBorderWidth | Number | 2 | 四个角边框宽度，单位px | +| zIndex | Number/String | | 调整组件层级 | +| radius | Number | | 裁剪图片圆角半径，单位px | +| fileType | String | png | 生成文件的类型，只支持 'jpg' 或 'png'。默认为 'png' | +| delay | Number | 1000 | 图片从绘制到生成所需时间，单位ms
微信小程序平台使用 `Canvas 2D` 绘制时有效
如绘制大图或出现裁剪图片空白等情况应适当调大该值，因 `Canvas 2d` 采用同步绘制，需自己把控绘制完成时间 | +| navigation | Boolean | true | 页面是否是原生标题栏：
H5平台当 showAngle 为 true 时，使用插件的页面在 `page.json` 中配置了 `"navigationStyle": "custom"` 时，必须将此值设为 false ，否则四个可拉伸角的触发位置会有偏差。
注：因H5平台的窗口高度是包含标题栏的，而屏幕触摸点的坐标是不包含的 | +| @crop | EventHandle | | 剪裁完成后触发，event = { tempFilePath }。在H5平台下，tempFilePath 为 base64 | + +### 基本用法 +``` + + + +``` +通过ref组件实例可在进入页面后直接打开相册选择图片 +``` +mounted() { + this.$refs.qfImageCropper.chooseImage({ sourceType: ['album'] }); +} +``` +### 使用说明 +1.建议在`pages.json`中将引用插件的页面添加一下配置禁止下拉刷新和禁止页面滑动，防止出现性能或页面抖动等问题。 +``` +{ + "enablePullDownRefresh": false, + "disableScroll": true +} +``` +2.建议使用本插件不要设置过大宽高的目标图片尺寸，建议1365x1365以内，否则可能会导致如下问题： +``` +1.界面卡顿，内存占用过高 +2.生成图片失真（模糊） +3.确定裁剪后一直显示 `裁剪中...`，该问题是由 `uni.canvasToTempFilePath` 无法回调导致，不同平台不同设备限制可能有所不同。 +``` +3.如裁剪后的图片存在偏移的问题，请检查是否受自己项目中父组件或全局样式影响。 +4.src属性设置网络图片时，图片资源必须是能触发 `getImageInfo` API 的 success 回调才可用于插件裁剪。因此小程序平台获取网络图片信息需先配置download域名白名单才能生效。 +5.如果组件无法正常渲染且使用了 `v-if` 时，可尝试将 `v-if` 替换为 `v-show` +6.如果App端导入组件后无法正常渲染，请尝试重新运行 \ No newline at end of file