| @@ -1,5 +1,10 @@ | |||||
| <template> | <template> | ||||
| <div v-if="proportion" :class="inPage ? 'page active' : 'page'" id="pageBody"> | |||||
| <div | |||||
| v-if="proportion" | |||||
| :class="inPage ? 'page active' : 'page'" | |||||
| id="pageBody" | |||||
| @touchstart="globalClick" | |||||
| > | |||||
| <div class="content" :style="bgStyle" ref="fatherBox"> | <div class="content" :style="bgStyle" ref="fatherBox"> | ||||
| <!-- 控制框 --> | <!-- 控制框 --> | ||||
| <!-- <div class="control"> | <!-- <div class="control"> | ||||
| @@ -25,19 +30,46 @@ | |||||
| left: item.x / proportion + 'px', | left: item.x / proportion + 'px', | ||||
| }" | }" | ||||
| > | > | ||||
| <div>{{ item.text }}</div> | |||||
| <img :src="item.material" alt="" /> | |||||
| <div id="itemText">{{ item.text }}</div> | |||||
| <img id="itemImg" :src="item.material" alt="" /> | |||||
| <!-- 边框 --> | <!-- 边框 --> | ||||
| <div :class="domIndex == index ? 'active' : ''"></div> | |||||
| <div id="itemBorder" :class="domIndex == index ? 'active' : ''"></div> | |||||
| <div | |||||
| v-if="domIndex == index" | |||||
| id="itemDelete" | |||||
| class="itemDelete" | |||||
| @touchstart="delItem(index)" | |||||
| > | |||||
| <img id="itemDelete" src="../assets/icon/delete.png" alt="" /> | |||||
| </div> | |||||
| <div | |||||
| v-if="domIndex == index" | |||||
| id="iCircle" | |||||
| class="outSide" | |||||
| @touchmove="scaleMovingMaterial(index)" | |||||
| @touchstart="scaleStartMaterial" | |||||
| @touchend="scaleEndMaterial" | |||||
| > | |||||
| <div id="iCircle" class="circle bottomRight"> | |||||
| <img | |||||
| id="iCircle" | |||||
| class="sacleIcon" | |||||
| src="../assets/icon/Scale.png" | |||||
| alt="" | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | </div> | ||||
| <!-- 数字人 --> | <!-- 数字人 --> | ||||
| <div | <div | ||||
| id="virtual" | id="virtual" | ||||
| @touchmove="onMouseMove1" | |||||
| @touchstart="onMouseDown1" | |||||
| @touchend="onMouseUp1" | |||||
| class="material" | |||||
| @touchmove="virtualTouchMoving" | |||||
| @touchstart="virtualTouchStart" | |||||
| @touchend="virtualTouchUp" | |||||
| :class="isFcous ? 'material fcous' : 'material'" | |||||
| :style="{ | :style="{ | ||||
| transformOrigin: transformOrigin, | transformOrigin: transformOrigin, | ||||
| transform: 'scale(' + materialList.virtual.w / proportion + ') ', | transform: 'scale(' + materialList.virtual.w / proportion + ') ', | ||||
| @@ -47,15 +79,16 @@ | |||||
| }" | }" | ||||
| > | > | ||||
| <!-- <div>{{ item.text }}</div> --> | <!-- <div>{{ item.text }}</div> --> | ||||
| <img :src="materialList.virtual.material" alt="" /> | |||||
| <img id="virtualImg" :src="materialList.virtual.material" alt="" /> | |||||
| <!-- 边框 --> | <!-- 边框 --> | ||||
| <!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> | <!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> | ||||
| <div | <div | ||||
| v-if="isFcous" | |||||
| id="circle" | id="circle" | ||||
| class="outSide" | class="outSide" | ||||
| @touchmove="scaleMoving" | |||||
| @touchstart="scaleStart" | |||||
| @touchend="scaleEnd" | |||||
| @touchmove="scaleMovingVirtual" | |||||
| @touchstart="scaleStartVirtual" | |||||
| @touchend="scaleEndVirtual" | |||||
| > | > | ||||
| <div id="circle" class="circle bottomRight"> | <div id="circle" class="circle bottomRight"> | ||||
| <img | <img | ||||
| @@ -112,6 +145,8 @@ export default { | |||||
| domIndex1: -1, //当前点击的数字人 | domIndex1: -1, //当前点击的数字人 | ||||
| transformOrigin: "top left", | transformOrigin: "top left", | ||||
| touchStart: {}, | touchStart: {}, | ||||
| isFcous: false, | |||||
| scaleNum: 0.015, // 缩放系数,数值越大缩放灵敏度越高,反之亦然 | |||||
| }; | }; | ||||
| }, | }, | ||||
| @@ -134,9 +169,30 @@ export default { | |||||
| methods: { | methods: { | ||||
| ...mapActions(["setCharacters"]), | ...mapActions(["setCharacters"]), | ||||
| // 组件 | |||||
| globalClick(e) { | |||||
| console.log(e.target.id); | |||||
| // 当点击区域不是数字人时,取消数字人的聚焦框 | |||||
| if ( | |||||
| !( | |||||
| e.target.id == "virtual" || | |||||
| e.target.id == "virtualImg" || | |||||
| e.target.id == "circle" | |||||
| ) | |||||
| ) { | |||||
| this.isFcous = false; | |||||
| } | |||||
| // 当点击区域不是素材时,取消素材的聚焦框 | |||||
| if (e.target.id[0] != "i") { | |||||
| this.domIndex = -2; | |||||
| } | |||||
| }, | |||||
| // 鼠标按下事件 | // 鼠标按下事件 | ||||
| onMouseDown(index) { | onMouseDown(index) { | ||||
| this.dragging = true; | this.dragging = true; | ||||
| this.isFcous = false; | |||||
| this.domIndex = index; | this.domIndex = index; | ||||
| //双指缩放初始化 | //双指缩放初始化 | ||||
| if (event.touches[1]) { | if (event.touches[1]) { | ||||
| @@ -160,6 +216,7 @@ export default { | |||||
| event.preventDefault(); | event.preventDefault(); | ||||
| if (!this.dragging) return; | if (!this.dragging) return; | ||||
| if (this.domIndex != index) return; | if (this.domIndex != index) return; | ||||
| if (event.target.id == "iCircle") return; | |||||
| // console.log(event.touches[0]) | // console.log(event.touches[0]) | ||||
| // 双指缩放 | // 双指缩放 | ||||
| @@ -206,10 +263,16 @@ export default { | |||||
| // } | // } | ||||
| }, | }, | ||||
| delItem(index) { | |||||
| console.log(index, "index"); | |||||
| this.materialList.scList.splice(index, 1); | |||||
| }, | |||||
| // 数字人的处理 | // 数字人的处理 | ||||
| // 鼠标按下事件 | // 鼠标按下事件 | ||||
| onMouseDown1() { | |||||
| virtualTouchStart() { | |||||
| this.domIndex = -2; | this.domIndex = -2; | ||||
| this.isFcous = true; | |||||
| this.dragging = true; | this.dragging = true; | ||||
| //双指缩放初始化 | //双指缩放初始化 | ||||
| if (event.touches[1]) { | if (event.touches[1]) { | ||||
| @@ -223,7 +286,7 @@ export default { | |||||
| this.startY = event.touches[0].clientY; | this.startY = event.touches[0].clientY; | ||||
| }, | }, | ||||
| // 鼠标抬起 | // 鼠标抬起 | ||||
| onMouseUp1() { | |||||
| virtualTouchUp() { | |||||
| this.dragging = false; | this.dragging = false; | ||||
| this.startDistance = 0; | this.startDistance = 0; | ||||
| console.log( | console.log( | ||||
| @@ -236,7 +299,7 @@ export default { | |||||
| // ); | // ); | ||||
| }, | }, | ||||
| // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | ||||
| onMouseMove1(e) { | |||||
| virtualTouchMoving(e) { | |||||
| // 右下角缩放 | // 右下角缩放 | ||||
| if (e.target.id == "circle") return; | if (e.target.id == "circle") return; | ||||
| // 禁止默认事件--下拉 | // 禁止默认事件--下拉 | ||||
| @@ -336,7 +399,8 @@ export default { | |||||
| Toast("素材超出显示范围"); | Toast("素材超出显示范围"); | ||||
| }, | }, | ||||
| scaleMoving(e) { | |||||
| scaleMovingMaterial(index) { | |||||
| const e = event; | |||||
| // 禁止默认事件--下拉 | // 禁止默认事件--下拉 | ||||
| event.preventDefault(); | event.preventDefault(); | ||||
| const x = e.changedTouches[0].clientX; | const x = e.changedTouches[0].clientX; | ||||
| @@ -347,13 +411,27 @@ export default { | |||||
| console.log(flag, "flag"); | console.log(flag, "flag"); | ||||
| console.log(this.proportion); | console.log(this.proportion); | ||||
| if (!flag) { | if (!flag) { | ||||
| this.materialList.virtual.w += 0.008; | |||||
| // 限制最大缩放系数 | |||||
| if (this.materialList.scList[index].w > 1.3) return; | |||||
| this.materialList.scList[index].w += this.scaleNum; | |||||
| // 更新坐标位置 | |||||
| this.touchStart = { | |||||
| pageX: x, | |||||
| pageY: y, | |||||
| }; | |||||
| } else { | } else { | ||||
| this.materialList.virtual.w -= 0.008; | |||||
| // 限制最小缩放系数 | |||||
| if (this.materialList.scList[index].w < 0.4) return; | |||||
| this.materialList.scList[index].w -= this.scaleNum; | |||||
| // 更新坐标位置 | |||||
| this.touchStart = { | |||||
| pageX: x, | |||||
| pageY: y, | |||||
| }; | |||||
| } | } | ||||
| }, | }, | ||||
| scaleStart(e) { | |||||
| scaleStartMaterial(e) { | |||||
| const x = e.changedTouches[0].clientX; | const x = e.changedTouches[0].clientX; | ||||
| const y = e.changedTouches[0].clientY; | const y = e.changedTouches[0].clientY; | ||||
| this.touchStart = { | this.touchStart = { | ||||
| @@ -363,7 +441,52 @@ export default { | |||||
| console.log(this.touchStart, "touchStart"); | console.log(this.touchStart, "touchStart"); | ||||
| }, | }, | ||||
| scaleEnd(e) {}, | |||||
| scaleEndMaterial(e) {}, | |||||
| scaleMovingVirtual(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) { | |||||
| // 限制最大缩放系数 | |||||
| if (this.materialList.virtual.w > 1.3) return; | |||||
| this.materialList.virtual.w += this.scaleNum; | |||||
| // 更新坐标位置 | |||||
| this.touchStart = { | |||||
| pageX: x, | |||||
| pageY: y, | |||||
| }; | |||||
| } else { | |||||
| // 限制最小缩放系数 | |||||
| if (this.materialList.virtual.w < 0.4) return; | |||||
| this.materialList.virtual.w -= this.scaleNum; | |||||
| // 更新坐标位置 | |||||
| this.touchStart = { | |||||
| pageX: x, | |||||
| pageY: y, | |||||
| }; | |||||
| } | |||||
| }, | |||||
| scaleStartVirtual(e) { | |||||
| const x = e.changedTouches[0].clientX; | |||||
| const y = e.changedTouches[0].clientY; | |||||
| this.touchStart = { | |||||
| pageX: x, | |||||
| pageY: y, | |||||
| }; | |||||
| console.log(this.touchStart, "touchStart"); | |||||
| }, | |||||
| scaleEndVirtual(e) { | |||||
| console.log(this.materialList.virtual.w, "w"); | |||||
| }, | |||||
| // 计算双指距离 | // 计算双指距离 | ||||
| getDistance(touch1, touch2) { | getDistance(touch1, touch2) { | ||||
| @@ -432,7 +555,7 @@ export default { | |||||
| left: -10px; | left: -10px; | ||||
| width: 100%; | width: 100%; | ||||
| height: 100%; | height: 100%; | ||||
| border: 10px solid rgba(0, 0, 0, 0.5); | |||||
| border: 10px solid #66f73b; | |||||
| } | } | ||||
| .material { | .material { | ||||
| position: absolute; | position: absolute; | ||||
| @@ -446,7 +569,15 @@ export default { | |||||
| // height: 150px; | // height: 150px; | ||||
| // background-color: red; | // background-color: red; | ||||
| } | } | ||||
| border: 3px solid #09ff00; | |||||
| .itemDelete { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| transform: translate(-50%, -50%); | |||||
| } | |||||
| &.fcous { | |||||
| border: 10px solid #66f73b; | |||||
| } | |||||
| .outSide { | .outSide { | ||||
| position: absolute; | position: absolute; | ||||
| width: 185px; | width: 185px; | ||||