Browse Source

图片放大缩小

master
HolyKnightIX 1 year ago
parent
commit
4aeb912892
3 changed files with 187 additions and 94 deletions
  1. BIN
      dist.zip
  2. BIN
      src/assets/icon/Scale.png
  3. +187
    -94
      src/components/editPosition.vue

BIN
dist.zip View File


BIN
src/assets/icon/Scale.png View File

Before After
Width: 129  |  Height: 128  |  Size: 2.9 KiB

+ 187
- 94
src/components/editPosition.vue View File

@@ -22,7 +22,7 @@
transform: 'scale(' + item.w / proportion + ') ', transform: 'scale(' + item.w / proportion + ') ',
zIndex: item.z, zIndex: item.z,
top: item.y / proportion + 'px', top: item.y / proportion + 'px',
left: item.x / proportion + 'px'
left: item.x / proportion + 'px',
}" }"
> >
<div>{{ item.text }}</div> <div>{{ item.text }}</div>
@@ -34,22 +34,38 @@
<!-- 数字人 --> <!-- 数字人 -->
<div <div
id="virtual" id="virtual"
@touchmove="onMouseMove1()"
@touchstart="onMouseDown1()"
@touchend="onMouseUp1()"
@touchmove="onMouseMove1"
@touchstart="onMouseDown1"
@touchend="onMouseUp1"
class="material" class="material"
:style="{ :style="{
transformOrigin: 'top left',
transformOrigin: transformOrigin,
transform: 'scale(' + materialList.virtual.w / proportion + ') ', transform: 'scale(' + materialList.virtual.w / proportion + ') ',
zIndex: materialList.virtual.z, zIndex: materialList.virtual.z,
top: materialList.virtual.y / proportion + 'px', top: materialList.virtual.y / proportion + 'px',
left: materialList.virtual.x / proportion + 'px'
left: materialList.virtual.x / proportion + 'px',
}" }"
> >
<!-- <div>{{ item.text }}</div> --> <!-- <div>{{ item.text }}</div> -->
<img :src="materialList.virtual.material" alt="" /> <img :src="materialList.virtual.material" alt="" />
<!-- 边框 --> <!-- 边框 -->
<!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> <!-- <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> </div>
</div> </div>
@@ -57,29 +73,29 @@


<script> <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 { export default {
props: { props: {
imgUrl: { imgUrl: {
default: false
default: false,
// type: String // type: String
}, },
materialList: { materialList: {
default: false, default: false,
type: Object
type: Object,
}, },
videoType: { videoType: {
default: false
default: false,
}, },
proportion: { proportion: {
default: false
}
default: false,
},
}, },
data() { data() {
return { return {
@@ -93,8 +109,10 @@ export default {
windowHeight: 0, windowHeight: 0,
scale: 1, scale: 1,
domIndex: -1, //当前点击的图片 domIndex: -1, //当前点击的图片
domIndex1: -1 //当前点击的数字人
}
domIndex1: -1, //当前点击的数字人
transformOrigin: "top left",
touchStart: {},
};
}, },


computed: { computed: {
@@ -107,65 +125,65 @@ export default {
// height: '1920px', // height: '1920px',
// transform: 'scale(0.2)', // transform: 'scale(0.2)',
backgroundImage: `url(${this.materialList.BGI.material})`, backgroundImage: `url(${this.materialList.BGI.material})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
}
}
})
backgroundSize: "cover",
backgroundPosition: "center",
};
},
}),
}, },


methods: { methods: {
...mapActions(['setCharacters']),
...mapActions(["setCharacters"]),
// 鼠标按下事件 // 鼠标按下事件
onMouseDown(index) { onMouseDown(index) {
this.dragging = true
this.domIndex = index
this.dragging = true;
this.domIndex = index;
//双指缩放初始化 //双指缩放初始化
if (event.touches[1]) { if (event.touches[1]) {
this.startDistance = this.getDistance( this.startDistance = this.getDistance(
event.touches[0], event.touches[0],
event.touches[1] 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) { onMouseUp(index) {
this.dragging = false
this.dragging = false;
// this.domIndex = -1 // this.domIndex = -1
}, },
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑
onMouseMove(index) { 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]) // console.log(event.touches[0])


// 双指缩放 // 双指缩放
if (event.touches[1]) { 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) // 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 const sonRect = document
.getElementById(`item${index}`) .getElementById(`item${index}`)
.getBoundingClientRect()
.getBoundingClientRect();
// 限制X轴 // 限制X轴
// console.log(fatherRect) // console.log(fatherRect)
// console.log(sonRect) // console.log(sonRect)
@@ -191,51 +209,63 @@ export default {
// 数字人的处理 // 数字人的处理
// 鼠标按下事件 // 鼠标按下事件
onMouseDown1() { onMouseDown1() {
this.domIndex = -2
this.dragging = true
this.domIndex = -2;
this.dragging = true;
//双指缩放初始化 //双指缩放初始化
if (event.touches[1]) { if (event.touches[1]) {
this.startDistance = this.getDistance( this.startDistance = this.getDistance(
event.touches[0], event.touches[0],
event.touches[1] 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() { 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]) // 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) // 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轴 // 限制X轴
// console.log(fatherRect) // console.log(fatherRect)
@@ -261,59 +291,89 @@ export default {
// 控制台 // 控制台
controlImg(type) { controlImg(type) {
if (this.domIndex == -1) { if (this.domIndex == -1) {
Toast('请选择素材')
return
Toast("请选择素材");
return;
} }
if (type == 1) { if (type == 1) {
this.materialList[this.domIndex].scale += 0.1
this.materialList[this.domIndex].scale += 0.1;
} }
if (type == 2) { if (type == 2) {
this.materialList[this.domIndex].scale -= 0.1
this.materialList[this.domIndex].scale -= 0.1;
} }
if (type == 3) { if (type == 3) {
// 如果是点的数字人 // 如果是点的数字人
if (this.domIndex == -2) { if (this.domIndex == -2) {
this.materialList.virtual.z += 1
this.materialList.virtual.z += 1;
if (this.materialList.virtual.z >= 10) { 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) { 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 (type == 4) {
// 如果是点的数字人 // 如果是点的数字人
if (this.domIndex == -2) { if (this.domIndex == -2) {
this.materialList.virtual.z -= 1
this.materialList.virtual.z -= 1;
if (this.materialList.virtual.z <= 0) { 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) { if (this.materialList.scList[this.domIndex].z <= 0) {
this.materialList.scList[this.domIndex].z = 0
this.materialList.scList[this.domIndex].z = 0;
} }
} }
}, },
// 素材超出显示范围 // 素材超出显示范围
exceed() { 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) { 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) { go(url) {
this.$router.push(url)
}
this.$router.push(url);
},
}, },
watch: { watch: {
// proportion(newValue) { // proportion(newValue) {
@@ -322,13 +382,18 @@ export default {
}, },
created() {}, created() {},
mounted() { 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 // const elementWidth = document.getElementById('pageBody').clientHeight
// this.proportionSon = elementWidth / 1080 // this.proportionSon = elementWidth / 1080
// console.log(elementWidth) // console.log(elementWidth)
}
}
},
};
</script> </script>


<style lang="scss" scoped> <style lang="scss" scoped>
@@ -381,6 +446,34 @@ export default {
// height: 150px; // height: 150px;
// background-color: red; // 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> </style>

Loading…
Cancel
Save