|
- <template>
- <div v-if="proportion" :class="inPage ? 'page active' : 'page'" id="pageBody">
- <div class="content" :style="bgStyle" ref="fatherBox">
- <!-- 控制框 -->
- <!-- <div class="control">
- <div @click="controlImg(1)">放大</div>
- <div @click="controlImg(2)">缩小</div>
- <div @click="controlImg(3)">上移一层</div>
- <div @click="controlImg(4)">下移一层</div>
- </div> -->
-
- <div
- :id="'item' + index"
- @touchmove="onMouseMove(index)"
- @touchstart="onMouseDown(index)"
- @touchend="onMouseUp(index)"
- v-for="(item, index) in materialList.scList"
- :key="index"
- class="material"
- :style="{
- transformOrigin: 'top left',
- transform: 'scale(' + item.w + ') ',
- zIndex: item.z,
- top: item.y + 'px',
- left: item.x + 'px'
- }"
- >
- <div>{{ item.text }}</div>
- <img :src="item.material" alt="" />
- <!-- 边框 -->
- <div :class="domIndex == index ? 'active' : ''"></div>
- </div>
-
- <!-- 数字人 -->
- <div
- id="virtual"
- @touchmove="onMouseMove1()"
- @touchstart="onMouseDown1()"
- @touchend="onMouseUp1()"
- class="material"
- :style="{
- transformOrigin: 'top left',
- transform: 'scale(' + materialList.virtual.w / proportion + ') ',
- zIndex: materialList.virtual.z,
- top: materialList.virtual.y / 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>
- </div>
- </div>
- </template>
-
- <script>
- // 组件
- import Vue from 'vue'
- import { Toast } from 'vant'
- import { mapState, mapActions } from 'vuex'
- // 工具
- import { scrollToID } from '../utils'
-
- Vue.use(Toast)
- export default {
- props: {
- imgUrl: {
- default: false
- // type: String
- },
- materialList: {
- default: false,
- type: Object
- },
- videoType: {
- default: false
- },
- proportion: {
- default: false
- }
- },
- data() {
- return {
- inPage: false,
- dragging: false,
- proportionSon: null,
- startDistance: 0, //两指起始位置
- startX: 0,
- startY: 0, // 鼠标位置x y
- windowWidth: 0,
- windowHeight: 0,
- scale: 1,
- domIndex: -1, //当前点击的图片
- domIndex1: -1 //当前点击的数字人
- }
- },
-
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters,
- //动态计算样式
- bgStyle() {
- if (this.videoType == 1) {
- return {
- // width: '1080px',
- // height: '1920px',
- // transform: 'scale(0.2)',
- backgroundImage: `url(${this.materialList.BGI.material})`,
- backgroundSize: 'cover',
- backgroundPosition: 'center'
- }
- }
- if (this.videoType == 2) {
- return {
- // width: '1920px',
- // height: '1080px',
- // transform: 'scale(0.2)',
- backgroundImage: `url(${this.materialList.BGI.material})`,
- backgroundSize: 'cover',
- backgroundPosition: 'center'
- }
- }
- }
- })
- },
-
- methods: {
- ...mapActions(['setCharacters']),
- // 鼠标按下事件
- onMouseDown(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
- },
- // 鼠标抬起
- onMouseUp(index) {
- this.dragging = false
- // this.domIndex = -1
- },
- // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑
- onMouseMove(index) {
- // 禁止默认事件--下拉
- 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 deltaX = event.touches[0].clientX - this.startX
- const deltaY = event.touches[0].clientY - this.startY
- // console.log(deltaX)
- this.materialList.scList[index].x += deltaX
- this.materialList.scList[index].y += deltaY
-
- this.startX = event.touches[0].clientX
- this.startY = event.touches[0].clientY
-
- // 得到父子盒子信息
- const fatherRect = this.$refs.fatherBox.getBoundingClientRect()
- // 子盒子信息
- const sonRect = document
- .getElementById(`item${index}`)
- .getBoundingClientRect()
- // 限制X轴
- // console.log(fatherRect)
- // console.log(sonRect)
- if (this.materialList.scList[index].x < -sonRect.width) {
- this.materialList.scList[index].x = 0
- this.exceed()
- }
- if (this.materialList.scList[index].x > fatherRect.width) {
- this.materialList.scList[index].x = 0
- this.exceed()
- }
- // 限制Y轴
- if (this.materialList.scList[index].y < -sonRect.height) {
- this.materialList.scList[index].y = 0
- this.exceed()
- }
- if (this.materialList.scList[index].y > fatherRect.height) {
- this.materialList.scList[index].y = 0
- this.exceed()
- }
- },
-
- // 数字人的处理
- // 鼠标按下事件
- onMouseDown1() {
- 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
- },
- // 鼠标抬起
- onMouseUp1() {
- this.dragging = false
- },
- // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑
- onMouseMove1() {
- // 禁止默认事件--下拉
- 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
- }
- // 得到父子盒子信息
- const fatherRect = this.$refs.fatherBox.getBoundingClientRect()
- // 子盒子信息
- const sonRect = document.getElementById(`virtual`).getBoundingClientRect()
-
- 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.startX = event.touches[0].clientX
- this.startY = event.touches[0].clientY
-
- // 限制X轴
- // console.log(fatherRect)
- // console.log(sonRect)
- // if (this.materialList.virtual.x < -sonRect.width) {
- // this.materialList.virtual.x = 0
- // this.exceed()
- // }
- // if (this.materialList.virtual.x > fatherRect.width) {
- // this.materialList.virtual.x = 0
- // this.exceed()
- // }
- // // 限制Y轴
- // if (this.materialList.virtual.y < -sonRect.height) {
- // this.materialList.virtual.y = 0
- // this.exceed()
- // }
- // if (this.materialList.virtual.y > fatherRect.height) {
- // this.materialList.virtual.y = 0
- // this.exceed()
- // }
- },
- // 控制台
- controlImg(type) {
- if (this.domIndex == -1) {
- Toast('请选择素材')
- return
- }
- if (type == 1) {
- this.materialList[this.domIndex].scale += 0.1
- }
- if (type == 2) {
- this.materialList[this.domIndex].scale -= 0.1
- }
- if (type == 3) {
- // 如果是点的数字人
- if (this.domIndex == -2) {
- this.materialList.virtual.z += 1
- if (this.materialList.virtual.z >= 10) {
- this.materialList.virtual.z = 10
- }
- return
- }
- // 点的素材
- this.materialList.scList[this.domIndex].z += 1
- if (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
- if (this.materialList.virtual.z <= 0) {
- this.materialList.virtual.z = 0
- }
- return
- }
- // 点的素材
- this.materialList.scList[this.domIndex].z -= 1
- if (this.materialList.scList[this.domIndex].z <= 0) {
- this.materialList.scList[this.domIndex].z = 0
- }
- }
- },
- // 素材超出显示范围
- exceed() {
- Toast('素材超出显示范围')
- },
- // 计算双指距离
- getDistance(touch1, touch2) {
- 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)
- }
- },
- watch: {
- // proportion(newValue) {
- // this.proportionSon = newValue
- // }
- },
- created() {},
- mounted() {
- this.inPage = true
- scrollToID('top')
- // const elementWidth = document.getElementById('pageBody').clientHeight
- // this.proportionSon = elementWidth / 1080
- // console.log(elementWidth)
- }
- }
- </script>
-
- <style lang="scss" scoped>
- * {
- box-sizing: content-box !important;
- }
-
- .page {
- transform: translateX(30%);
- opacity: 0;
- transition: all 0.5s; // global-transition
- &.active {
- opacity: 1;
- transform: translateX(0);
- }
- height: 100%;
- width: 100%;
- position: fixed;
- top: 0;
- left: 0;
- }
- .content {
- position: relative;
- width: 100%;
- height: 100%;
- // width: 1080px;
- // height: 1920px;
- // transform: scale(0.3, 0.3);
- // transform-origin: top left;
- // background-color: green;
-
- overflow: hidden;
- .active {
- position: absolute;
- top: -10px;
- left: -10px;
- width: 100%;
- height: 100%;
- border: 10px solid rgba(0, 0, 0, 0.5);
- }
- .material {
- position: absolute;
- top: 0;
- left: 0;
- // width: 150px;
- // height: 140px;
- // background-color: red;
- img {
- // width: 216px;
- // height: 150px;
- // background-color: red;
- }
- }
- }
- </style>
|