|
|
@@ -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; |
|
|
|