Bläddra i källkod

图片放大缩小

master
HolyKnightIX 1 år sedan
förälder
incheckning
4aeb912892
3 ändrade filer med 187 tillägg och 94 borttagningar
  1. Binär
      dist.zip
  2. Binär
      src/assets/icon/Scale.png
  3. +187
    -94
      src/components/editPosition.vue

Binär
dist.zip Visa fil


Binär
src/assets/icon/Scale.png Visa fil

Före Efter
Bredd: 129  |  Höjd: 128  |  Storlek: 2.9 KiB

+ 187
- 94
src/components/editPosition.vue Visa fil

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

Laddar…
Avbryt
Spara