Procházet zdrojové kódy

素材删除与缩放

master
HolyKnightIX před 1 rokem
rodič
revize
e9a4b28f1e
2 změnil soubory, kde provedl 153 přidání a 22 odebrání
  1. binární
      src/assets/icon/delete.png
  2. +153
    -22
      src/components/editPosition.vue

binární
src/assets/icon/delete.png Zobrazit soubor

Před Za
Šířka: 128  |  Výška: 128  |  Velikost: 3.6 KiB

+ 153
- 22
src/components/editPosition.vue Zobrazit soubor

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


Načítá se…
Zrušit
Uložit