| @@ -1,5 +1,10 @@ | |||
| <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="control"> | |||
| @@ -25,19 +30,46 @@ | |||
| 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 | |||
| id="virtual" | |||
| @touchmove="onMouseMove1" | |||
| @touchstart="onMouseDown1" | |||
| @touchend="onMouseUp1" | |||
| class="material" | |||
| @touchmove="virtualTouchMoving" | |||
| @touchstart="virtualTouchStart" | |||
| @touchend="virtualTouchUp" | |||
| :class="isFcous ? 'material fcous' : 'material'" | |||
| :style="{ | |||
| transformOrigin: transformOrigin, | |||
| transform: 'scale(' + materialList.virtual.w / proportion + ') ', | |||
| @@ -47,15 +79,16 @@ | |||
| }" | |||
| > | |||
| <!-- <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 | |||
| v-if="isFcous" | |||
| id="circle" | |||
| class="outSide" | |||
| @touchmove="scaleMoving" | |||
| @touchstart="scaleStart" | |||
| @touchend="scaleEnd" | |||
| @touchmove="scaleMovingVirtual" | |||
| @touchstart="scaleStartVirtual" | |||
| @touchend="scaleEndVirtual" | |||
| > | |||
| <div id="circle" class="circle bottomRight"> | |||
| <img | |||
| @@ -112,6 +145,8 @@ export default { | |||
| domIndex1: -1, //当前点击的数字人 | |||
| transformOrigin: "top left", | |||
| touchStart: {}, | |||
| isFcous: false, | |||
| scaleNum: 0.015, // 缩放系数,数值越大缩放灵敏度越高,反之亦然 | |||
| }; | |||
| }, | |||
| @@ -134,9 +169,30 @@ export default { | |||
| methods: { | |||
| ...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) { | |||
| this.dragging = true; | |||
| this.isFcous = false; | |||
| this.domIndex = index; | |||
| //双指缩放初始化 | |||
| if (event.touches[1]) { | |||
| @@ -160,6 +216,7 @@ export default { | |||
| event.preventDefault(); | |||
| if (!this.dragging) return; | |||
| if (this.domIndex != index) return; | |||
| if (event.target.id == "iCircle") return; | |||
| // 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.isFcous = true; | |||
| this.dragging = true; | |||
| //双指缩放初始化 | |||
| if (event.touches[1]) { | |||
| @@ -223,7 +286,7 @@ export default { | |||
| this.startY = event.touches[0].clientY; | |||
| }, | |||
| // 鼠标抬起 | |||
| onMouseUp1() { | |||
| virtualTouchUp() { | |||
| this.dragging = false; | |||
| this.startDistance = 0; | |||
| console.log( | |||
| @@ -236,7 +299,7 @@ export default { | |||
| // ); | |||
| }, | |||
| // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | |||
| onMouseMove1(e) { | |||
| virtualTouchMoving(e) { | |||
| // 右下角缩放 | |||
| if (e.target.id == "circle") return; | |||
| // 禁止默认事件--下拉 | |||
| @@ -336,7 +399,8 @@ export default { | |||
| Toast("素材超出显示范围"); | |||
| }, | |||
| scaleMoving(e) { | |||
| scaleMovingMaterial(index) { | |||
| const e = event; | |||
| // 禁止默认事件--下拉 | |||
| event.preventDefault(); | |||
| const x = e.changedTouches[0].clientX; | |||
| @@ -347,13 +411,27 @@ export default { | |||
| console.log(flag, "flag"); | |||
| console.log(this.proportion); | |||
| 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 { | |||
| 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 y = e.changedTouches[0].clientY; | |||
| this.touchStart = { | |||
| @@ -363,7 +441,52 @@ export default { | |||
| 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) { | |||
| @@ -432,7 +555,7 @@ export default { | |||
| left: -10px; | |||
| width: 100%; | |||
| height: 100%; | |||
| border: 10px solid rgba(0, 0, 0, 0.5); | |||
| border: 10px solid #66f73b; | |||
| } | |||
| .material { | |||
| position: absolute; | |||
| @@ -446,7 +569,15 @@ export default { | |||
| // height: 150px; | |||
| // background-color: red; | |||
| } | |||
| border: 3px solid #09ff00; | |||
| .itemDelete { | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| transform: translate(-50%, -50%); | |||
| } | |||
| &.fcous { | |||
| border: 10px solid #66f73b; | |||
| } | |||
| .outSide { | |||
| position: absolute; | |||
| width: 185px; | |||