congzc 1 year ago
parent
commit
a5e1cc2b62
4 changed files with 98 additions and 77 deletions
  1. +71
    -65
      src/components/editPosition.vue
  2. +0
    -5
      src/views/model/chooseModel.vue
  3. +24
    -5
      src/views/model/editModel.vue
  4. +3
    -2
      src/views/myPage/myPage.vue

+ 71
- 65
src/components/editPosition.vue View File

@@ -1,5 +1,5 @@
<template>
<div :class="inPage ? 'page active' : 'page'">
<div v-if="proportion" :class="inPage ? 'page active' : 'page'" id="pageBody">
<div class="content" :style="bgStyle" ref="fatherBox">
<!-- 控制框 -->
<!-- <div class="control">
@@ -18,6 +18,7 @@
:key="index"
class="material"
:style="{
transformOrigin: 'top left',
transform: 'scale(' + item.w + ') ',
zIndex: item.z,
top: item.y + 'px',
@@ -38,10 +39,11 @@
@touchend="onMouseUp1()"
class="material"
:style="{
transform: 'scale(' + materialList.virtual.w + ') ',
transformOrigin: 'top left',
transform: 'scale(' + materialList.virtual.w / proportion + ') ',
zIndex: materialList.virtual.z,
top: materialList.virtual.y + 'px',
left: materialList.virtual.x + 'px'
top: materialList.virtual.y / proportion + 'px',
left: materialList.virtual.x / proportion + 'px'
}"
>
<!-- <div>{{ item.text }}</div> -->
@@ -63,12 +65,6 @@ import { scrollToID } from '../utils'

Vue.use(Toast)
export default {
// watch: {
// materialList(newValue, oldValue) {
// console.log(`count变化了,新值为${newValue},旧值为${oldValue}`)
// this.materialList = newValue
// }
// },
props: {
imgUrl: {
default: false
@@ -77,12 +73,19 @@ export default {
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
@@ -99,25 +102,28 @@ export default {
characters: (state) => state.publicObj.characters,
//动态计算样式
bgStyle() {
return {
backgroundImage: `url(${this.materialList.BGI.material})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
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'
}
}
}
})
// imageStyles() {
// return this.images.map((image, index) => {
// return {
// zIndex: index,
// width: `${image.width}px`,
// height: `${image.height}px`,
// position: 'absolute',
// top: `${image.y}px`,
// left: `${image.x}px`,
// };
// });
// },
},

methods: {
@@ -228,39 +234,40 @@ export default {
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
this.materialList.virtual.y += deltaY
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

// 得到父子盒子信息
const fatherRect = this.$refs.fatherBox.getBoundingClientRect()
// 子盒子信息
const sonRect = document.getElementById(`virtual`).getBoundingClientRect()
// 限制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()
}
// 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) {
@@ -319,10 +326,18 @@ export default {
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>
@@ -331,20 +346,7 @@ export default {
* {
box-sizing: content-box !important;
}
.control {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-around;
width: 200px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #fff;
z-index: 999999;
}

.page {
transform: translateX(30%);
opacity: 0;
@@ -363,7 +365,11 @@ export default {
position: relative;
width: 100%;
height: 100%;
background-color: green;
// width: 1080px;
// height: 1920px;
// transform: scale(0.3, 0.3);
// transform-origin: top left;
// background-color: green;

overflow: hidden;
.active {
@@ -382,7 +388,7 @@ export default {
// height: 140px;
// background-color: red;
img {
// width: 150px;
// width: 216px;
// height: 150px;
// background-color: red;
}


+ 0
- 5
src/views/model/chooseModel.vue View File

@@ -93,11 +93,6 @@ export default {
this.phase = num
},

// chooseType(num) {
// this.type = num;
// this.loadModeList(num);
// },

selectModel(id) {
this.getModeDetail(id)
// if (this.currentId != id) {


+ 24
- 5
src/views/model/editModel.vue View File

@@ -7,13 +7,16 @@
<!-- 展示图片 -->
<div class="shouModelImg">
<div
id="editPosition"
class="editPosition"
:class="videoType == 2 ? 'verticalmodel' : ''"
>
<EditPosition
ref="EditPosition"
:proportion="proportion"
:imgUrl="imgUrl"
:materialList="materialList"
:videoType="videoType"
></EditPosition>
</div>
<!-- <img :src="imgUrl" alt="" /> -->
@@ -392,6 +395,7 @@ export default {
return {
pageNum: 1,
pageSize: 20,
proportion: null, //编辑页面的比例
videoType: null, //判断横屏2还是竖屏1
audioUrl: null, // 声音试听
inPage: false,
@@ -848,16 +852,26 @@ export default {
this.$router.push(url)
}
},
async created() {
created() {},
async mounted() {
this.inPage = true
scrollToID('top')

await this.getDetailById(this.$route.query.id)
this.getSystemBGIList()
this.getMyBGIListApi()
this.getSystemScList()
this.getMyScListApi()
},
mounted() {
this.inPage = true
scrollToID('top')

const elementWidth = document.getElementById('editPosition').clientWidth
console.log(elementWidth)
if (this.videoType == 1) {
this.proportion = 1920 / elementWidth
console.log(this.proportion)
} else if (this.videoType == 2) {
this.proportion = 1080 / elementWidth
console.log(this.proportion)
}
}
// beforeRouteLeave(to, from, next) {
// let that = this
@@ -879,8 +893,11 @@ export default {
<style lang="scss" scoped>
.editPosition {
position: relative;
// transform: scale(0.2);
width: 216px;
height: 384px;
// width: 1080px;
// height: 1920px;
border-radius: 12px;
overflow: hidden;
background-color: pink;
@@ -888,6 +905,8 @@ export default {
.verticalmodel {
width: 384px !important;
height: 216px !important;
// width: 1920px !important;
// height: 1080px !important;
margin-bottom: 50px;
}
.CutImg {


+ 3
- 2
src/views/myPage/myPage.vue View File

@@ -25,7 +25,7 @@
</div>
<!-- 具体内容 -->
<!-- 列表样式--大图 -->
<div v-if="videoList.length == 0">暂无数据</div>
<div v-if="videoList.length == 0">暂无数据123</div>

<!-- 新 修改v-if-->
<waterfall
@@ -336,6 +336,7 @@ export default {
try {
const res = await getVideoList(pageNum, pageSize, videoType)
console.log(res, '获取作品列表')

this.videoList = res.data.list
this.total = res.data.total
} catch (error) {
@@ -419,7 +420,6 @@ export default {
}
}
.page {
width: 100%;
transform: translateX(30%);
opacity: 0;
transition: all 0.5s; // global-transition
@@ -704,6 +704,7 @@ export default {
// 瀑布流
.waterFall {
width: 350px;

::v-deep .vue-waterfall-column {
width: 50% !important;
margin: 0 !important;


Loading…
Cancel
Save