| @@ -68,7 +68,7 @@ export function doSendPhoneCode(data) { | |||||
| export function doUpdPass(loginParams) { | export function doUpdPass(loginParams) { | ||||
| return request({ | return request({ | ||||
| url: `/api/user/updPass`, | url: `/api/user/updPass`, | ||||
| method: 'get', | |||||
| method: 'post', | |||||
| data: loginParams | data: loginParams | ||||
| }) | }) | ||||
| } | } | ||||
| @@ -0,0 +1,312 @@ | |||||
| <template> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div class="content" :style="bgStyle" ref="fatherBox"> | |||||
| <!-- 控制框 --> | |||||
| <!-- <div class="control"> | |||||
| <div @click="controlImg(1)">放大</div> | |||||
| <div @click="controlImg(2)">缩小</div> | |||||
| <div @click="controlImg(3)">上移一层</div> | |||||
| <div @click="controlImg(4)">下移一层</div> | |||||
| </div> --> | |||||
| <div | |||||
| :id="'item' + index" | |||||
| @touchmove="onMouseMove(index)" | |||||
| @touchstart="onMouseDown(index)" | |||||
| @touchend="onMouseUp(index)" | |||||
| v-for="(item, index) in materialList" | |||||
| :key="index" | |||||
| class="material" | |||||
| :style="{ | |||||
| transform: 'scale(' + item.scale + ') ', | |||||
| zIndex: item.zIndex, | |||||
| top: item.y + 'px', | |||||
| left: item.x + 'px' | |||||
| }" | |||||
| > | |||||
| <div>{{ item.text }}</div> | |||||
| <img :src="item.url" alt="" /> | |||||
| <!-- 边框 --> | |||||
| <div :class="domIndex == index ? 'active' : ''"></div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| // 组件 | |||||
| import Vue from 'vue' | |||||
| import { Toast } from 'vant' | |||||
| import { mapState, mapActions } from 'vuex' | |||||
| // 工具 | |||||
| import { scrollToID } from '../utils' | |||||
| Vue.use(Toast) | |||||
| export default { | |||||
| props: { | |||||
| imgUrl: { | |||||
| default: false | |||||
| // type: String | |||||
| } | |||||
| // scList: { | |||||
| // default: false, | |||||
| // type: Array | |||||
| // } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| inPage: false, | |||||
| dragging: false, | |||||
| startDistance: 0, //两指起始位置 | |||||
| startX: 0, | |||||
| startY: 0, // 鼠标位置x y | |||||
| windowWidth: 0, | |||||
| windowHeight: 0, | |||||
| scale: 1, | |||||
| domIndex: -1, //当前点击的图片 | |||||
| materialList: [ | |||||
| { | |||||
| text: '小div1', | |||||
| url: 'img/BG@2x.b0cf224b.png', | |||||
| x: 10, // 相对左上角XY坐标 | |||||
| y: 190, | |||||
| scale: 1, //缩放 | |||||
| zIndex: 1 //层级 | |||||
| }, | |||||
| { | |||||
| text: '小div2', | |||||
| url: 'img/BG@2x.b0cf224b.png', | |||||
| x: 100, | |||||
| y: 0, | |||||
| scale: 1, | |||||
| zIndex: 2 | |||||
| }, | |||||
| { | |||||
| text: '小div3', | |||||
| url: require('../assets/img/bg.png'), | |||||
| x: 0, | |||||
| y: 100, | |||||
| scale: 1, | |||||
| zIndex: 3 | |||||
| }, | |||||
| { | |||||
| text: '小div4', | |||||
| url: require('../assets/img/cn.jpeg'), | |||||
| x: 100, | |||||
| y: 100, | |||||
| scale: 1, | |||||
| zIndex: 4 | |||||
| }, | |||||
| { | |||||
| text: '小div5', | |||||
| url: require('../assets/img/ft.png'), | |||||
| x: 100, | |||||
| y: 280, | |||||
| scale: 1, | |||||
| zIndex: 5 | |||||
| } | |||||
| ] | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| //动态计算样式 | |||||
| bgStyle() { | |||||
| return { | |||||
| backgroundImage: `url(${this.imgUrl})`, | |||||
| backgroundSize: 'cover', | |||||
| backgroundPosition: 'center' | |||||
| } | |||||
| } | |||||
| }) | |||||
| // imageStyles() { | |||||
| // return this.images.map((image, index) => { | |||||
| // return { | |||||
| // zIndex: index, | |||||
| // width: `${image.width}px`, | |||||
| // height: `${image.height}px`, | |||||
| // position: 'absolute', | |||||
| // top: `${image.y}px`, | |||||
| // left: `${image.x}px`, | |||||
| // }; | |||||
| // }); | |||||
| // }, | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(['setCharacters']), | |||||
| // 鼠标按下事件 | |||||
| onMouseDown(index) { | |||||
| this.dragging = true | |||||
| this.domIndex = index | |||||
| //双指缩放初始化 | |||||
| if (event.touches[1]) { | |||||
| this.startDistance = this.getDistance( | |||||
| event.touches[0], | |||||
| event.touches[1] | |||||
| ) | |||||
| } | |||||
| // 记录点击瞬间的鼠标坐标 | |||||
| this.startX = event.touches[0].clientX | |||||
| this.startY = event.touches[0].clientY | |||||
| }, | |||||
| // 鼠标抬起 | |||||
| onMouseUp(index) { | |||||
| this.dragging = false | |||||
| // this.domIndex = -1 | |||||
| }, | |||||
| // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | |||||
| onMouseMove(index) { | |||||
| // 禁止默认事件--下拉 | |||||
| event.preventDefault() | |||||
| if (!this.dragging) return | |||||
| if (this.domIndex != index) return | |||||
| // console.log(event.touches[0]) | |||||
| // 双指缩放 | |||||
| if (event.touches[1]) { | |||||
| const distance = this.getDistance(event.touches[0], event.touches[1]) | |||||
| const scale = distance / this.startDistance | |||||
| this.materialList[index].scale = scale | |||||
| } | |||||
| const deltaX = event.touches[0].clientX - this.startX | |||||
| const deltaY = event.touches[0].clientY - this.startY | |||||
| // console.log(deltaX) | |||||
| this.materialList[index].x += deltaX | |||||
| this.materialList[index].y += deltaY | |||||
| this.startX = event.touches[0].clientX | |||||
| this.startY = event.touches[0].clientY | |||||
| // 得到父子盒子信息 | |||||
| const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | |||||
| // 子盒子信息 | |||||
| const sonRect = document | |||||
| .getElementById(`item${index}`) | |||||
| .getBoundingClientRect() | |||||
| // 限制X轴 | |||||
| // console.log(fatherRect) | |||||
| // console.log(sonRect) | |||||
| if (this.materialList[index].x < -sonRect.width) { | |||||
| this.materialList[index].x = 0 | |||||
| this.exceed() | |||||
| } | |||||
| if (this.materialList[index].x > fatherRect.width) { | |||||
| this.materialList[index].x = 0 | |||||
| this.exceed() | |||||
| } | |||||
| // 限制Y轴 | |||||
| if (this.materialList[index].y < -sonRect.height) { | |||||
| this.materialList[index].y = 0 | |||||
| this.exceed() | |||||
| } | |||||
| if (this.materialList[index].y > fatherRect.height) { | |||||
| this.materialList[index].y = 0 | |||||
| this.exceed() | |||||
| } | |||||
| }, | |||||
| // 控制台 | |||||
| controlImg(type) { | |||||
| if (this.domIndex == -1) { | |||||
| Toast('请选择素材') | |||||
| return | |||||
| } | |||||
| if (type == 1) { | |||||
| this.materialList[this.domIndex].scale += 0.1 | |||||
| } | |||||
| if (type == 2) { | |||||
| this.materialList[this.domIndex].scale -= 0.1 | |||||
| } | |||||
| if (type == 3) { | |||||
| this.materialList[this.domIndex].zIndex += 1 | |||||
| } | |||||
| if (type == 4) { | |||||
| this.materialList[this.domIndex].zIndex -= 1 | |||||
| } | |||||
| }, | |||||
| // 素材超出显示范围 | |||||
| exceed() { | |||||
| Toast('素材超出显示范围') | |||||
| }, | |||||
| // 计算双指距离 | |||||
| getDistance(touch1, touch2) { | |||||
| const dx = touch1.pageX - touch2.pageX | |||||
| const dy = touch1.pageY - touch2.pageY | |||||
| return Math.sqrt(dx * dx + dy * dy) | |||||
| }, | |||||
| go(url) { | |||||
| this.$router.push(url) | |||||
| } | |||||
| }, | |||||
| created() {}, | |||||
| mounted() { | |||||
| this.inPage = true | |||||
| scrollToID('top') | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| * { | |||||
| box-sizing: content-box !important; | |||||
| } | |||||
| .control { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| display: flex; | |||||
| justify-content: space-around; | |||||
| width: 200px; | |||||
| height: 30px; | |||||
| text-align: center; | |||||
| line-height: 30px; | |||||
| background-color: #fff; | |||||
| z-index: 999999; | |||||
| } | |||||
| .page { | |||||
| transform: translateX(30%); | |||||
| opacity: 0; | |||||
| transition: all 0.5s; // global-transition | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | |||||
| height: 100%; | |||||
| width: 100%; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| } | |||||
| .content { | |||||
| position: relative; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| background-color: green; | |||||
| overflow: hidden; | |||||
| .active { | |||||
| position: absolute; | |||||
| top: -10px; | |||||
| left: -10px; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| border: 10px solid rgba(0, 0, 0, 0.5); | |||||
| } | |||||
| .material { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| // width: 150px; | |||||
| // height: 140px; | |||||
| // background-color: red; | |||||
| img { | |||||
| width: 150px; | |||||
| height: 150px; | |||||
| // background-color: red; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -134,7 +134,7 @@ | |||||
| </el-col> | </el-col> | ||||
| <el-col :span="9"> | <el-col :span="9"> | ||||
| <!-- <div class="yzmImg" v-html="codeImg"></div> --> | <!-- <div class="yzmImg" v-html="codeImg"></div> --> | ||||
| <img class="yzmImg" :src="codeImg" alt="" /> | |||||
| <img v-if="showCodeImg" class="yzmImg" :src="codeImg" alt="" /> | |||||
| </el-col> | </el-col> | ||||
| <el-col :span="2"> | <el-col :span="2"> | ||||
| <i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | <i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | ||||
| @@ -533,6 +533,7 @@ export default { | |||||
| try { | try { | ||||
| const res = await doUpdPass(data) | const res = await doUpdPass(data) | ||||
| console.log(res) | console.log(res) | ||||
| Toast.success('修改密码成功') | |||||
| this.loginType = 1 | this.loginType = 1 | ||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | console.log(error, 'error') | ||||
| @@ -6,13 +6,16 @@ | |||||
| <div class="content"> | <div class="content"> | ||||
| <!-- 展示图片 --> | <!-- 展示图片 --> | ||||
| <div v-if="imgUrl" class="shouModelImg"> | <div v-if="imgUrl" class="shouModelImg"> | ||||
| <img :src="imgUrl" alt="" /> | |||||
| <div class="editPosition"> | |||||
| <EditPosition ref="EditPosition" :imgUrl="imgUrl"></EditPosition> | |||||
| </div> | |||||
| <!-- <img :src="imgUrl" alt="" /> --> | |||||
| <!-- 字幕 --> | <!-- 字幕 --> | ||||
| <div | |||||
| <!-- <div | |||||
| v-html="textareaContent" | v-html="textareaContent" | ||||
| v-show="showSubtitle" | v-show="showSubtitle" | ||||
| class="shouModelImg-subtitle" | class="shouModelImg-subtitle" | ||||
| ></div> | |||||
| ></div> --> | |||||
| </div> | </div> | ||||
| <!-- 文字 --> | <!-- 文字 --> | ||||
| <div class="addText"> | <div class="addText"> | ||||
| @@ -51,9 +54,9 @@ | |||||
| <!-- 合成按钮 --> | <!-- 合成按钮 --> | ||||
| <div class="makeVideo" @click="submit">立即制作</div> | <div class="makeVideo" @click="submit">立即制作</div> | ||||
| <!-- 上移下移 --> | <!-- 上移下移 --> | ||||
| <div v-if="false" class="upAndBottomBtn"> | |||||
| <div class="upAndBottomBtn"> | |||||
| <div class="moveLayer"> | <div class="moveLayer"> | ||||
| <div class="btnContent"> | |||||
| <div class="btnContent" @click="$refs.EditPosition.controlImg(3)"> | |||||
| <img | <img | ||||
| src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" | src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" | ||||
| alt="" | alt="" | ||||
| @@ -62,7 +65,10 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="moveLayer below"> | <div class="moveLayer below"> | ||||
| <div class="btnContent active"> | |||||
| <div | |||||
| class="btnContent active" | |||||
| @click="$refs.EditPosition.controlImg(4)" | |||||
| > | |||||
| <img | <img | ||||
| src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" | src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" | ||||
| alt="" | alt="" | ||||
| @@ -327,6 +333,7 @@ import { Toast } from 'vant' | |||||
| import { mapState, mapActions } from 'vuex' | import { mapState, mapActions } from 'vuex' | ||||
| import HeadTop from './../../components/common/head.vue' | import HeadTop from './../../components/common/head.vue' | ||||
| import CutImg from '../../components/CutImg.vue' | import CutImg from '../../components/CutImg.vue' | ||||
| import EditPosition from '../../components/editPosition.vue' | |||||
| // 工具 | // 工具 | ||||
| import { scrollToID } from '../../utils' | import { scrollToID } from '../../utils' | ||||
| @@ -348,13 +355,24 @@ Vue.use(Toast) | |||||
| export default { | export default { | ||||
| components: { | components: { | ||||
| HeadTop, | HeadTop, | ||||
| CutImg | |||||
| CutImg, | |||||
| EditPosition | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| audioUrl: null, // 声音试听 | audioUrl: null, // 声音试听 | ||||
| inPage: false, | inPage: false, | ||||
| imgUrl: null, | |||||
| imgUrl: false, | |||||
| sclist: [ | |||||
| { | |||||
| text: '小div1', | |||||
| url: 'img/BG@2x.b0cf224b.png', | |||||
| x: 300, // 相对左上角XY坐标 | |||||
| y: 300, | |||||
| scale: 1, //缩放 | |||||
| zIndex: 3 //层级 | |||||
| } | |||||
| ], //素材列表 | |||||
| modelId: null, | modelId: null, | ||||
| mouldSmId: null, | mouldSmId: null, | ||||
| saveID: null, // 作品id | saveID: null, // 作品id | ||||
| @@ -586,6 +604,14 @@ export default { | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .editPosition { | |||||
| position: relative; | |||||
| width: 200px; | |||||
| height: 350px; | |||||
| border-radius: 12px; | |||||
| overflow: hidden; | |||||
| background-color: pink; | |||||
| } | |||||
| .CutImg { | .CutImg { | ||||
| } | } | ||||
| .page { | .page { | ||||
| @@ -741,7 +767,7 @@ export default { | |||||
| } | } | ||||
| .active { | .active { | ||||
| opacity: 0.5; | |||||
| // opacity: 0.5; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -19,15 +19,10 @@ | |||||
| :key="index" | :key="index" | ||||
| class="material" | class="material" | ||||
| :style="{ | :style="{ | ||||
| transform: | |||||
| 'scale(' + | |||||
| item.scale + | |||||
| ') translate(' + | |||||
| item.x + | |||||
| 'px, ' + | |||||
| item.y + | |||||
| 'px)', | |||||
| zIndex: item.zIndex | |||||
| transform: 'scale(' + item.scale + ') ', | |||||
| zIndex: item.zIndex, | |||||
| top: item.y + 'px', | |||||
| left: item.x + 'px' | |||||
| }" | }" | ||||
| > | > | ||||
| <div>{{ item.text }}</div> | <div>{{ item.text }}</div> | ||||
| @@ -63,11 +58,10 @@ export default { | |||||
| { | { | ||||
| text: '小div1', | text: '小div1', | ||||
| url: 'img/BG@2x.b0cf224b.png', | url: 'img/BG@2x.b0cf224b.png', | ||||
| x: 300, | |||||
| x: 300, // 相对左上角XY坐标 | |||||
| y: 300, | y: 300, | ||||
| scale: 1, | |||||
| zIndex: 3, | |||||
| num: 1 | |||||
| scale: 1, //缩放 | |||||
| zIndex: 3 //层级 | |||||
| }, | }, | ||||
| { | { | ||||
| text: '小div2', | text: '小div2', | ||||
| @@ -144,9 +138,11 @@ export default { | |||||
| event.preventDefault() | event.preventDefault() | ||||
| if (!this.dragging) return | if (!this.dragging) return | ||||
| if (this.domIndex != index) return | if (this.domIndex != index) return | ||||
| // console.log(event.touches[0]) | |||||
| console.log(event.touches[0]) | |||||
| const deltaX = event.touches[0].clientX - this.startX | const deltaX = event.touches[0].clientX - this.startX | ||||
| const deltaY = event.touches[0].clientY - this.startY | const deltaY = event.touches[0].clientY - this.startY | ||||
| console.log(deltaX) | |||||
| this.materialList[index].x += deltaX | this.materialList[index].x += deltaX | ||||
| this.materialList[index].y += deltaY | this.materialList[index].y += deltaY | ||||
| @@ -157,14 +153,13 @@ export default { | |||||
| const sonRect = document | const sonRect = document | ||||
| .getElementById(`item${index}`) | .getElementById(`item${index}`) | ||||
| .getBoundingClientRect() | .getBoundingClientRect() | ||||
| console.log(fatherRect) | |||||
| console.log(sonRect) | |||||
| // 限制X轴 | // 限制X轴 | ||||
| if (this.materialList[index].x < 0) { | if (this.materialList[index].x < 0) { | ||||
| this.materialList[index].x = 0 | this.materialList[index].x = 0 | ||||
| } | } | ||||
| if (sonRect.left > fatherRect.width - sonRect.width / 2) { | if (sonRect.left > fatherRect.width - sonRect.width / 2) { | ||||
| this.materialList[index].x = fatherRect.width - sonRect.width | this.materialList[index].x = fatherRect.width - sonRect.width | ||||
| this.exceed() | |||||
| } | } | ||||
| // 限制Y轴 | // 限制Y轴 | ||||
| if (this.materialList[index].y < 0) { | if (this.materialList[index].y < 0) { | ||||
| @@ -172,8 +167,10 @@ export default { | |||||
| } | } | ||||
| if (sonRect.top > fatherRect.height - sonRect.height / 2) { | if (sonRect.top > fatherRect.height - sonRect.height / 2) { | ||||
| this.materialList[index].y = fatherRect.height - sonRect.height | this.materialList[index].y = fatherRect.height - sonRect.height | ||||
| this.exceed() | |||||
| } | } | ||||
| }, | }, | ||||
| // 控制台 | |||||
| controlImg(type) { | controlImg(type) { | ||||
| if (this.domIndex == -1) { | if (this.domIndex == -1) { | ||||
| Toast('请选择素材') | Toast('请选择素材') | ||||
| @@ -191,6 +188,10 @@ export default { | |||||
| this.materialList[this.domIndex].zIndex -= 1 | this.materialList[this.domIndex].zIndex -= 1 | ||||
| } | } | ||||
| }, | }, | ||||
| // 素材超出显示范围 | |||||
| exceed() { | |||||
| Toast('素材超出显示范围') | |||||
| }, | |||||
| go(url) { | go(url) { | ||||
| this.$router.push(url) | this.$router.push(url) | ||||
| } | } | ||||
| @@ -3,12 +3,12 @@ | |||||
| <div id="top"></div> | <div id="top"></div> | ||||
| <div class="content" ref="fatherBox"> | <div class="content" ref="fatherBox"> | ||||
| <!-- 控制框 --> | <!-- 控制框 --> | ||||
| <div class="control"> | |||||
| <!-- <div class="control"> | |||||
| <div @click="controlImg(1)">放大</div> | <div @click="controlImg(1)">放大</div> | ||||
| <div @click="controlImg(2)">缩小</div> | <div @click="controlImg(2)">缩小</div> | ||||
| <div @click="controlImg(3)">上移一层</div> | <div @click="controlImg(3)">上移一层</div> | ||||
| <div @click="controlImg(4)">下移一层</div> | <div @click="controlImg(4)">下移一层</div> | ||||
| </div> | |||||
| </div> --> | |||||
| <div | <div | ||||
| :id="'item' + index" | :id="'item' + index" | ||||
| @@ -48,6 +48,7 @@ export default { | |||||
| return { | return { | ||||
| inPage: false, | inPage: false, | ||||
| dragging: false, | dragging: false, | ||||
| startDistance: 0, //两指起始位置 | |||||
| startX: 0, | startX: 0, | ||||
| startY: 0, // 鼠标位置x y | startY: 0, // 鼠标位置x y | ||||
| windowWidth: 0, | windowWidth: 0, | ||||
| @@ -123,6 +124,13 @@ export default { | |||||
| onMouseDown(index) { | onMouseDown(index) { | ||||
| this.dragging = true | this.dragging = true | ||||
| this.domIndex = index | this.domIndex = index | ||||
| //双指缩放初始化 | |||||
| if (event.touches[1]) { | |||||
| this.startDistance = this.getDistance( | |||||
| event.touches[0], | |||||
| event.touches[1] | |||||
| ) | |||||
| } | |||||
| // 记录点击瞬间的鼠标坐标 | // 记录点击瞬间的鼠标坐标 | ||||
| this.startX = event.touches[0].clientX | this.startX = event.touches[0].clientX | ||||
| this.startY = event.touches[0].clientY | this.startY = event.touches[0].clientY | ||||
| @@ -140,6 +148,12 @@ export default { | |||||
| if (this.domIndex != index) return | if (this.domIndex != index) return | ||||
| console.log(event.touches[0]) | console.log(event.touches[0]) | ||||
| // 双指缩放 | |||||
| if (event.touches[1]) { | |||||
| const distance = this.getDistance(event.touches[0], event.touches[1]) | |||||
| const scale = distance / this.startDistance | |||||
| this.materialList[index].scale = scale | |||||
| } | |||||
| const deltaX = event.touches[0].clientX - this.startX | const deltaX = event.touches[0].clientX - this.startX | ||||
| const deltaY = event.touches[0].clientY - this.startY | const deltaY = event.touches[0].clientY - this.startY | ||||
| console.log(deltaX) | console.log(deltaX) | ||||
| @@ -148,6 +162,7 @@ export default { | |||||
| this.startX = event.touches[0].clientX | this.startX = event.touches[0].clientX | ||||
| this.startY = event.touches[0].clientY | this.startY = event.touches[0].clientY | ||||
| // 得到父子盒子信息 | // 得到父子盒子信息 | ||||
| const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | ||||
| const sonRect = document | const sonRect = document | ||||
| @@ -192,6 +207,12 @@ export default { | |||||
| exceed() { | exceed() { | ||||
| Toast('素材超出显示范围') | Toast('素材超出显示范围') | ||||
| }, | }, | ||||
| // 计算双指距离 | |||||
| getDistance(touch1, touch2) { | |||||
| const dx = touch1.pageX - touch2.pageX | |||||
| const dy = touch1.pageY - touch2.pageY | |||||
| return Math.sqrt(dx * dx + dy * dy) | |||||
| }, | |||||
| go(url) { | go(url) { | ||||
| this.$router.push(url) | this.$router.push(url) | ||||
| } | } | ||||