| @@ -22,7 +22,7 @@ | |||
| transform: 'scale(' + item.w / proportion + ') ', | |||
| zIndex: item.z, | |||
| top: item.y / proportion + 'px', | |||
| left: item.x / proportion + 'px' | |||
| left: item.x / proportion + 'px', | |||
| }" | |||
| > | |||
| <div>{{ item.text }}</div> | |||
| @@ -34,22 +34,38 @@ | |||
| <!-- 数字人 --> | |||
| <div | |||
| id="virtual" | |||
| @touchmove="onMouseMove1()" | |||
| @touchstart="onMouseDown1()" | |||
| @touchend="onMouseUp1()" | |||
| @touchmove="onMouseMove1" | |||
| @touchstart="onMouseDown1" | |||
| @touchend="onMouseUp1" | |||
| class="material" | |||
| :style="{ | |||
| transformOrigin: 'top left', | |||
| transformOrigin: transformOrigin, | |||
| transform: 'scale(' + materialList.virtual.w / proportion + ') ', | |||
| zIndex: materialList.virtual.z, | |||
| top: materialList.virtual.y / proportion + 'px', | |||
| left: materialList.virtual.x / proportion + 'px' | |||
| left: materialList.virtual.x / proportion + 'px', | |||
| }" | |||
| > | |||
| <!-- <div>{{ item.text }}</div> --> | |||
| <img :src="materialList.virtual.material" alt="" /> | |||
| <!-- 边框 --> | |||
| <!-- <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> | |||
| @@ -57,29 +73,29 @@ | |||
| <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 { | |||
| props: { | |||
| imgUrl: { | |||
| default: false | |||
| default: false, | |||
| // type: String | |||
| }, | |||
| materialList: { | |||
| default: false, | |||
| type: Object | |||
| type: Object, | |||
| }, | |||
| videoType: { | |||
| default: false | |||
| default: false, | |||
| }, | |||
| proportion: { | |||
| default: false | |||
| } | |||
| default: false, | |||
| }, | |||
| }, | |||
| data() { | |||
| return { | |||
| @@ -93,8 +109,10 @@ export default { | |||
| windowHeight: 0, | |||
| scale: 1, | |||
| domIndex: -1, //当前点击的图片 | |||
| domIndex1: -1 //当前点击的数字人 | |||
| } | |||
| domIndex1: -1, //当前点击的数字人 | |||
| transformOrigin: "top left", | |||
| touchStart: {}, | |||
| }; | |||
| }, | |||
| computed: { | |||
| @@ -107,65 +125,65 @@ export default { | |||
| // height: '1920px', | |||
| // transform: 'scale(0.2)', | |||
| backgroundImage: `url(${this.materialList.BGI.material})`, | |||
| backgroundSize: 'cover', | |||
| backgroundPosition: 'center' | |||
| } | |||
| } | |||
| }) | |||
| backgroundSize: "cover", | |||
| backgroundPosition: "center", | |||
| }; | |||
| }, | |||
| }), | |||
| }, | |||
| methods: { | |||
| ...mapActions(['setCharacters']), | |||
| ...mapActions(["setCharacters"]), | |||
| // 鼠标按下事件 | |||
| onMouseDown(index) { | |||
| this.dragging = true | |||
| this.domIndex = 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 | |||
| this.startX = event.touches[0].clientX; | |||
| this.startY = event.touches[0].clientY; | |||
| }, | |||
| // 鼠标抬起 | |||
| onMouseUp(index) { | |||
| this.dragging = false | |||
| this.dragging = false; | |||
| // this.domIndex = -1 | |||
| }, | |||
| // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | |||
| 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]) | |||
| // 双指缩放 | |||
| 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) | |||
| 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 | |||
| .getElementById(`item${index}`) | |||
| .getBoundingClientRect() | |||
| .getBoundingClientRect(); | |||
| // 限制X轴 | |||
| // console.log(fatherRect) | |||
| // console.log(sonRect) | |||
| @@ -191,51 +209,63 @@ export default { | |||
| // 数字人的处理 | |||
| // 鼠标按下事件 | |||
| onMouseDown1() { | |||
| this.domIndex = -2 | |||
| this.dragging = true | |||
| this.domIndex = -2; | |||
| this.dragging = true; | |||
| //双指缩放初始化 | |||
| 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 | |||
| this.startX = event.touches[0].clientX; | |||
| this.startY = event.touches[0].clientY; | |||
| }, | |||
| // 鼠标抬起 | |||
| 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]) | |||
| // 双指缩放 | |||
| 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) | |||
| 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轴 | |||
| // console.log(fatherRect) | |||
| @@ -261,59 +291,89 @@ export default { | |||
| // 控制台 | |||
| controlImg(type) { | |||
| if (this.domIndex == -1) { | |||
| Toast('请选择素材') | |||
| return | |||
| Toast("请选择素材"); | |||
| return; | |||
| } | |||
| if (type == 1) { | |||
| this.materialList[this.domIndex].scale += 0.1 | |||
| this.materialList[this.domIndex].scale += 0.1; | |||
| } | |||
| if (type == 2) { | |||
| this.materialList[this.domIndex].scale -= 0.1 | |||
| this.materialList[this.domIndex].scale -= 0.1; | |||
| } | |||
| if (type == 3) { | |||
| // 如果是点的数字人 | |||
| if (this.domIndex == -2) { | |||
| this.materialList.virtual.z += 1 | |||
| this.materialList.virtual.z += 1; | |||
| 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) { | |||
| this.materialList.scList[this.domIndex].z = 10 | |||
| this.materialList.scList[this.domIndex].z = 10; | |||
| } | |||
| } | |||
| if (type == 4) { | |||
| // 如果是点的数字人 | |||
| if (this.domIndex == -2) { | |||
| this.materialList.virtual.z -= 1 | |||
| this.materialList.virtual.z -= 1; | |||
| 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) { | |||
| this.materialList.scList[this.domIndex].z = 0 | |||
| this.materialList.scList[this.domIndex].z = 0; | |||
| } | |||
| } | |||
| }, | |||
| // 素材超出显示范围 | |||
| 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) { | |||
| 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) { | |||
| this.$router.push(url) | |||
| } | |||
| this.$router.push(url); | |||
| }, | |||
| }, | |||
| watch: { | |||
| // proportion(newValue) { | |||
| @@ -322,13 +382,18 @@ export default { | |||
| }, | |||
| created() {}, | |||
| 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 | |||
| // this.proportionSon = elementWidth / 1080 | |||
| // console.log(elementWidth) | |||
| } | |||
| } | |||
| }, | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| @@ -381,6 +446,34 @@ export default { | |||
| // height: 150px; | |||
| // 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> | |||