| @@ -22,7 +22,7 @@ | |||||
| transform: 'scale(' + item.w / proportion + ') ', | transform: 'scale(' + item.w / proportion + ') ', | ||||
| zIndex: item.z, | zIndex: item.z, | ||||
| top: item.y / proportion + 'px', | top: item.y / proportion + 'px', | ||||
| left: item.x / proportion + 'px' | |||||
| left: item.x / proportion + 'px', | |||||
| }" | }" | ||||
| > | > | ||||
| <div>{{ item.text }}</div> | <div>{{ item.text }}</div> | ||||
| @@ -34,22 +34,38 @@ | |||||
| <!-- 数字人 --> | <!-- 数字人 --> | ||||
| <div | <div | ||||
| id="virtual" | id="virtual" | ||||
| @touchmove="onMouseMove1()" | |||||
| @touchstart="onMouseDown1()" | |||||
| @touchend="onMouseUp1()" | |||||
| @touchmove="onMouseMove1" | |||||
| @touchstart="onMouseDown1" | |||||
| @touchend="onMouseUp1" | |||||
| class="material" | class="material" | ||||
| :style="{ | :style="{ | ||||
| transformOrigin: 'top left', | |||||
| transformOrigin: transformOrigin, | |||||
| transform: 'scale(' + materialList.virtual.w / proportion + ') ', | transform: 'scale(' + materialList.virtual.w / proportion + ') ', | ||||
| zIndex: materialList.virtual.z, | zIndex: materialList.virtual.z, | ||||
| top: materialList.virtual.y / proportion + 'px', | top: materialList.virtual.y / proportion + 'px', | ||||
| left: materialList.virtual.x / proportion + 'px' | |||||
| left: materialList.virtual.x / proportion + 'px', | |||||
| }" | }" | ||||
| > | > | ||||
| <!-- <div>{{ item.text }}</div> --> | <!-- <div>{{ item.text }}</div> --> | ||||
| <img :src="materialList.virtual.material" alt="" /> | <img :src="materialList.virtual.material" alt="" /> | ||||
| <!-- 边框 --> | <!-- 边框 --> | ||||
| <!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> | <!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> | ||||
| <div | |||||
| id="circle" | |||||
| class="outSide" | |||||
| @touchmove="scaleMoving" | |||||
| @touchstart="scaleStart" | |||||
| @touchend="scaleEnd" | |||||
| > | |||||
| <div id="circle" class="circle bottomRight"> | |||||
| <img | |||||
| id="circle" | |||||
| class="sacleIcon" | |||||
| src="../assets/icon/Scale.png" | |||||
| alt="" | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -57,29 +73,29 @@ | |||||
| <script> | <script> | ||||
| // 组件 | // 组件 | ||||
| import Vue from 'vue' | |||||
| import { Toast } from 'vant' | |||||
| import { mapState, mapActions } from 'vuex' | |||||
| import Vue from "vue"; | |||||
| import { Toast } from "vant"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| // 工具 | // 工具 | ||||
| import { scrollToID } from '../utils' | |||||
| import { scrollToID } from "../utils"; | |||||
| Vue.use(Toast) | |||||
| Vue.use(Toast); | |||||
| export default { | export default { | ||||
| props: { | props: { | ||||
| imgUrl: { | imgUrl: { | ||||
| default: false | |||||
| default: false, | |||||
| // type: String | // type: String | ||||
| }, | }, | ||||
| materialList: { | materialList: { | ||||
| default: false, | default: false, | ||||
| type: Object | |||||
| type: Object, | |||||
| }, | }, | ||||
| videoType: { | videoType: { | ||||
| default: false | |||||
| default: false, | |||||
| }, | }, | ||||
| proportion: { | proportion: { | ||||
| default: false | |||||
| } | |||||
| default: false, | |||||
| }, | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| @@ -93,8 +109,10 @@ export default { | |||||
| windowHeight: 0, | windowHeight: 0, | ||||
| scale: 1, | scale: 1, | ||||
| domIndex: -1, //当前点击的图片 | domIndex: -1, //当前点击的图片 | ||||
| domIndex1: -1 //当前点击的数字人 | |||||
| } | |||||
| domIndex1: -1, //当前点击的数字人 | |||||
| transformOrigin: "top left", | |||||
| touchStart: {}, | |||||
| }; | |||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| @@ -107,65 +125,65 @@ export default { | |||||
| // height: '1920px', | // height: '1920px', | ||||
| // transform: 'scale(0.2)', | // transform: 'scale(0.2)', | ||||
| backgroundImage: `url(${this.materialList.BGI.material})`, | backgroundImage: `url(${this.materialList.BGI.material})`, | ||||
| backgroundSize: 'cover', | |||||
| backgroundPosition: 'center' | |||||
| } | |||||
| } | |||||
| }) | |||||
| backgroundSize: "cover", | |||||
| backgroundPosition: "center", | |||||
| }; | |||||
| }, | |||||
| }), | |||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| ...mapActions(['setCharacters']), | |||||
| ...mapActions(["setCharacters"]), | |||||
| // 鼠标按下事件 | // 鼠标按下事件 | ||||
| onMouseDown(index) { | onMouseDown(index) { | ||||
| this.dragging = true | |||||
| this.domIndex = index | |||||
| this.dragging = true; | |||||
| this.domIndex = index; | |||||
| //双指缩放初始化 | //双指缩放初始化 | ||||
| if (event.touches[1]) { | if (event.touches[1]) { | ||||
| this.startDistance = this.getDistance( | this.startDistance = this.getDistance( | ||||
| event.touches[0], | event.touches[0], | ||||
| event.touches[1] | event.touches[1] | ||||
| ) | |||||
| ); | |||||
| } | } | ||||
| // 记录点击瞬间的鼠标坐标 | // 记录点击瞬间的鼠标坐标 | ||||
| this.startX = event.touches[0].clientX | |||||
| this.startY = event.touches[0].clientY | |||||
| this.startX = event.touches[0].clientX; | |||||
| this.startY = event.touches[0].clientY; | |||||
| }, | }, | ||||
| // 鼠标抬起 | // 鼠标抬起 | ||||
| onMouseUp(index) { | onMouseUp(index) { | ||||
| this.dragging = false | |||||
| this.dragging = false; | |||||
| // this.domIndex = -1 | // this.domIndex = -1 | ||||
| }, | }, | ||||
| // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | ||||
| onMouseMove(index) { | onMouseMove(index) { | ||||
| // 禁止默认事件--下拉 | // 禁止默认事件--下拉 | ||||
| event.preventDefault() | |||||
| if (!this.dragging) return | |||||
| if (this.domIndex != index) return | |||||
| event.preventDefault(); | |||||
| if (!this.dragging) return; | |||||
| if (this.domIndex != index) return; | |||||
| // console.log(event.touches[0]) | // console.log(event.touches[0]) | ||||
| // 双指缩放 | // 双指缩放 | ||||
| if (event.touches[1]) { | if (event.touches[1]) { | ||||
| const distance = this.getDistance(event.touches[0], event.touches[1]) | |||||
| const scale = (distance / this.startDistance).toFixed(2) | |||||
| this.materialList.scList[index].w = scale | |||||
| this.materialList.scList[index].h = scale | |||||
| const distance = this.getDistance(event.touches[0], event.touches[1]); | |||||
| const scale = (distance / this.startDistance).toFixed(2); | |||||
| this.materialList.scList[index].w = scale; | |||||
| this.materialList.scList[index].h = scale; | |||||
| } | } | ||||
| const deltaX = event.touches[0].clientX - this.startX | |||||
| const deltaY = event.touches[0].clientY - this.startY | |||||
| const deltaX = event.touches[0].clientX - this.startX; | |||||
| const deltaY = event.touches[0].clientY - this.startY; | |||||
| // console.log(deltaX) | // console.log(deltaX) | ||||
| this.materialList.scList[index].x += deltaX.toFixed(0) * this.proportion | |||||
| this.materialList.scList[index].y += deltaY.toFixed(0) * this.proportion | |||||
| this.materialList.scList[index].x += deltaX.toFixed(0) * this.proportion; | |||||
| this.materialList.scList[index].y += deltaY.toFixed(0) * this.proportion; | |||||
| this.startX = event.touches[0].clientX | |||||
| this.startY = event.touches[0].clientY | |||||
| this.startX = event.touches[0].clientX; | |||||
| this.startY = event.touches[0].clientY; | |||||
| // 得到父子盒子信息 | // 得到父子盒子信息 | ||||
| const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | |||||
| const fatherRect = this.$refs.fatherBox.getBoundingClientRect(); | |||||
| // 子盒子信息 | // 子盒子信息 | ||||
| const sonRect = document | const sonRect = document | ||||
| .getElementById(`item${index}`) | .getElementById(`item${index}`) | ||||
| .getBoundingClientRect() | |||||
| .getBoundingClientRect(); | |||||
| // 限制X轴 | // 限制X轴 | ||||
| // console.log(fatherRect) | // console.log(fatherRect) | ||||
| // console.log(sonRect) | // console.log(sonRect) | ||||
| @@ -191,51 +209,63 @@ export default { | |||||
| // 数字人的处理 | // 数字人的处理 | ||||
| // 鼠标按下事件 | // 鼠标按下事件 | ||||
| onMouseDown1() { | onMouseDown1() { | ||||
| this.domIndex = -2 | |||||
| this.dragging = true | |||||
| this.domIndex = -2; | |||||
| this.dragging = true; | |||||
| //双指缩放初始化 | //双指缩放初始化 | ||||
| if (event.touches[1]) { | if (event.touches[1]) { | ||||
| this.startDistance = this.getDistance( | this.startDistance = this.getDistance( | ||||
| event.touches[0], | event.touches[0], | ||||
| event.touches[1] | event.touches[1] | ||||
| ) | |||||
| ); | |||||
| } | } | ||||
| // 记录点击瞬间的鼠标坐标 | // 记录点击瞬间的鼠标坐标 | ||||
| this.startX = event.touches[0].clientX | |||||
| this.startY = event.touches[0].clientY | |||||
| this.startX = event.touches[0].clientX; | |||||
| this.startY = event.touches[0].clientY; | |||||
| }, | }, | ||||
| // 鼠标抬起 | // 鼠标抬起 | ||||
| onMouseUp1() { | onMouseUp1() { | ||||
| this.dragging = false | |||||
| this.startDistance = 0 | |||||
| this.dragging = false; | |||||
| this.startDistance = 0; | |||||
| console.log( | |||||
| this.materialList.virtual.x, | |||||
| this.materialList.virtual.y, | |||||
| "position now" | |||||
| ); | |||||
| // Toast.success( | |||||
| // this.materialList.virtual.x + "," + this.materialList.virtual.y | |||||
| // ); | |||||
| }, | }, | ||||
| // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | ||||
| onMouseMove1() { | |||||
| onMouseMove1(e) { | |||||
| // 右下角缩放 | |||||
| if (e.target.id == "circle") return; | |||||
| // 禁止默认事件--下拉 | // 禁止默认事件--下拉 | ||||
| event.preventDefault() | |||||
| if (!this.dragging) return | |||||
| event.preventDefault(); | |||||
| if (!this.dragging) 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).toFixed(2) | |||||
| this.materialList.virtual.w = scale | |||||
| this.materialList.virtual.h = scale | |||||
| } | |||||
| // if (event.touches[1]) { | |||||
| // const distance = this.getDistance(event.touches[0], event.touches[1]); | |||||
| // const scale = (distance / this.startDistance).toFixed(2); | |||||
| // this.materialList.virtual.w = scale; | |||||
| // this.materialList.virtual.h = scale; | |||||
| // } | |||||
| // 得到父子盒子信息 | // 得到父子盒子信息 | ||||
| const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | |||||
| const fatherRect = this.$refs.fatherBox.getBoundingClientRect(); | |||||
| // 子盒子信息 | // 子盒子信息 | ||||
| const sonRect = document.getElementById(`virtual`).getBoundingClientRect() | |||||
| const sonRect = document | |||||
| .getElementById(`virtual`) | |||||
| .getBoundingClientRect(); | |||||
| const deltaX = event.touches[0].clientX - this.startX | |||||
| const deltaY = event.touches[0].clientY - this.startY | |||||
| const deltaX = event.touches[0].clientX - this.startX; | |||||
| const deltaY = event.touches[0].clientY - this.startY; | |||||
| // console.log(deltaX) | // console.log(deltaX) | ||||
| this.materialList.virtual.x += deltaX.toFixed(0) * this.proportion | |||||
| this.materialList.virtual.y += deltaY.toFixed(0) * this.proportion | |||||
| this.materialList.virtual.x += deltaX.toFixed(0) * this.proportion; | |||||
| this.materialList.virtual.y += deltaY.toFixed(0) * this.proportion; | |||||
| this.startX = event.touches[0].clientX | |||||
| this.startY = event.touches[0].clientY | |||||
| this.startX = event.touches[0].clientX; | |||||
| this.startY = event.touches[0].clientY; | |||||
| // 限制X轴 | // 限制X轴 | ||||
| // console.log(fatherRect) | // console.log(fatherRect) | ||||
| @@ -261,59 +291,89 @@ export default { | |||||
| // 控制台 | // 控制台 | ||||
| controlImg(type) { | controlImg(type) { | ||||
| if (this.domIndex == -1) { | if (this.domIndex == -1) { | ||||
| Toast('请选择素材') | |||||
| return | |||||
| Toast("请选择素材"); | |||||
| return; | |||||
| } | } | ||||
| if (type == 1) { | if (type == 1) { | ||||
| this.materialList[this.domIndex].scale += 0.1 | |||||
| this.materialList[this.domIndex].scale += 0.1; | |||||
| } | } | ||||
| if (type == 2) { | if (type == 2) { | ||||
| this.materialList[this.domIndex].scale -= 0.1 | |||||
| this.materialList[this.domIndex].scale -= 0.1; | |||||
| } | } | ||||
| if (type == 3) { | if (type == 3) { | ||||
| // 如果是点的数字人 | // 如果是点的数字人 | ||||
| if (this.domIndex == -2) { | if (this.domIndex == -2) { | ||||
| this.materialList.virtual.z += 1 | |||||
| this.materialList.virtual.z += 1; | |||||
| if (this.materialList.virtual.z >= 10) { | if (this.materialList.virtual.z >= 10) { | ||||
| this.materialList.virtual.z = 10 | |||||
| this.materialList.virtual.z = 10; | |||||
| } | } | ||||
| return | |||||
| return; | |||||
| } | } | ||||
| // 点的素材 | // 点的素材 | ||||
| this.materialList.scList[this.domIndex].z += 1 | |||||
| this.materialList.scList[this.domIndex].z += 1; | |||||
| if (this.materialList.scList[this.domIndex].z >= 10) { | if (this.materialList.scList[this.domIndex].z >= 10) { | ||||
| this.materialList.scList[this.domIndex].z = 10 | |||||
| this.materialList.scList[this.domIndex].z = 10; | |||||
| } | } | ||||
| } | } | ||||
| if (type == 4) { | if (type == 4) { | ||||
| // 如果是点的数字人 | // 如果是点的数字人 | ||||
| if (this.domIndex == -2) { | if (this.domIndex == -2) { | ||||
| this.materialList.virtual.z -= 1 | |||||
| this.materialList.virtual.z -= 1; | |||||
| if (this.materialList.virtual.z <= 0) { | if (this.materialList.virtual.z <= 0) { | ||||
| this.materialList.virtual.z = 0 | |||||
| this.materialList.virtual.z = 0; | |||||
| } | } | ||||
| return | |||||
| return; | |||||
| } | } | ||||
| // 点的素材 | // 点的素材 | ||||
| this.materialList.scList[this.domIndex].z -= 1 | |||||
| this.materialList.scList[this.domIndex].z -= 1; | |||||
| if (this.materialList.scList[this.domIndex].z <= 0) { | if (this.materialList.scList[this.domIndex].z <= 0) { | ||||
| this.materialList.scList[this.domIndex].z = 0 | |||||
| this.materialList.scList[this.domIndex].z = 0; | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| // 素材超出显示范围 | // 素材超出显示范围 | ||||
| exceed() { | exceed() { | ||||
| Toast('素材超出显示范围') | |||||
| Toast("素材超出显示范围"); | |||||
| }, | }, | ||||
| scaleMoving(e) { | |||||
| // 禁止默认事件--下拉 | |||||
| event.preventDefault(); | |||||
| const x = e.changedTouches[0].clientX; | |||||
| const y = e.changedTouches[0].clientY; | |||||
| // 变化大小,true为变小,false为变大 | |||||
| const flag = Math.sign(x - this.touchStart.pageX) == -1 ? true : false; | |||||
| console.log(flag, "flag"); | |||||
| console.log(this.proportion); | |||||
| if (!flag) { | |||||
| this.materialList.virtual.w += 0.008; | |||||
| } else { | |||||
| this.materialList.virtual.w -= 0.008; | |||||
| } | |||||
| }, | |||||
| scaleStart(e) { | |||||
| const x = e.changedTouches[0].clientX; | |||||
| const y = e.changedTouches[0].clientY; | |||||
| this.touchStart = { | |||||
| pageX: x, | |||||
| pageY: y, | |||||
| }; | |||||
| console.log(this.touchStart, "touchStart"); | |||||
| }, | |||||
| scaleEnd(e) {}, | |||||
| // 计算双指距离 | // 计算双指距离 | ||||
| getDistance(touch1, touch2) { | getDistance(touch1, touch2) { | ||||
| const dx = touch1.pageX - touch2.pageX | |||||
| const dy = touch1.pageY - touch2.pageY | |||||
| return Math.sqrt(dx * dx + dy * dy) | |||||
| 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); | |||||
| }, | |||||
| }, | }, | ||||
| watch: { | watch: { | ||||
| // proportion(newValue) { | // proportion(newValue) { | ||||
| @@ -322,13 +382,18 @@ export default { | |||||
| }, | }, | ||||
| created() {}, | created() {}, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true | |||||
| scrollToID('top') | |||||
| this.inPage = true; | |||||
| scrollToID("top"); | |||||
| console.log( | |||||
| this.materialList.virtual.x, | |||||
| this.materialList.virtual.y, | |||||
| "position now" | |||||
| ); | |||||
| // const elementWidth = document.getElementById('pageBody').clientHeight | // const elementWidth = document.getElementById('pageBody').clientHeight | ||||
| // this.proportionSon = elementWidth / 1080 | // this.proportionSon = elementWidth / 1080 | ||||
| // console.log(elementWidth) | // console.log(elementWidth) | ||||
| } | |||||
| } | |||||
| }, | |||||
| }; | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| @@ -381,6 +446,34 @@ export default { | |||||
| // height: 150px; | // height: 150px; | ||||
| // background-color: red; | // background-color: red; | ||||
| } | } | ||||
| border: 3px solid #09ff00; | |||||
| .outSide { | |||||
| position: absolute; | |||||
| width: 85px; | |||||
| height: 85px; | |||||
| bottom: 0; | |||||
| right: 0; | |||||
| transform: translate(50%, 50%); | |||||
| .circle { | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| width: 35px; | |||||
| height: 35px; | |||||
| line-height: 35px; | |||||
| border-radius: 50% 50%; | |||||
| background-color: #fff; | |||||
| border: 1px solid #969696; | |||||
| text-align: center; | |||||
| .sacleIcon { | |||||
| width: 65%; | |||||
| height: 65%; | |||||
| transform: rotate(90deg); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| </style> | </style> | ||||