소스 검색

移动缩放demo移植

master
congzc 2 년 전
부모
커밋
590ac6e14c
6개의 변경된 파일390개의 추가작업 그리고 29개의 파일을 삭제
  1. +1
    -1
      src/api/login.js
  2. +312
    -0
      src/components/editPosition.vue
  3. +2
    -1
      src/views/login/login.vue
  4. +35
    -9
      src/views/model/editModel.vue
  5. +17
    -16
      src/views/model/editPosition-my.vue
  6. +23
    -2
      src/views/model/editPosition.vue

+ 1
- 1
src/api/login.js 파일 보기

@@ -68,7 +68,7 @@ export function doSendPhoneCode(data) {
export function doUpdPass(loginParams) {
return request({
url: `/api/user/updPass`,
method: 'get',
method: 'post',
data: loginParams
})
}


+ 312
- 0
src/components/editPosition.vue 파일 보기

@@ -0,0 +1,312 @@
<template>
<div :class="inPage ? 'page active' : 'page'">
<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"
:key="index"
class="material"
:style="{
transform: 'scale(' + item.scale + ') ',
zIndex: item.zIndex,
top: item.y + 'px',
left: item.x + 'px'
}"
>
<div>{{ item.text }}</div>
<img :src="item.url" alt="" />
<!-- 边框 -->
<div :class="domIndex == 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
}
// scList: {
// default: false,
// type: Array
// }
},
data() {
return {
inPage: false,
dragging: false,
startDistance: 0, //两指起始位置
startX: 0,
startY: 0, // 鼠标位置x y
windowWidth: 0,
windowHeight: 0,
scale: 1,
domIndex: -1, //当前点击的图片
materialList: [
{
text: '小div1',
url: 'img/BG@2x.b0cf224b.png',
x: 10, // 相对左上角XY坐标
y: 190,
scale: 1, //缩放
zIndex: 1 //层级
},
{
text: '小div2',
url: 'img/BG@2x.b0cf224b.png',
x: 100,
y: 0,
scale: 1,
zIndex: 2
},
{
text: '小div3',
url: require('../assets/img/bg.png'),
x: 0,
y: 100,
scale: 1,
zIndex: 3
},
{
text: '小div4',
url: require('../assets/img/cn.jpeg'),
x: 100,
y: 100,
scale: 1,
zIndex: 4
},
{
text: '小div5',
url: require('../assets/img/ft.png'),
x: 100,
y: 280,
scale: 1,
zIndex: 5
}
]
}
},

computed: {
...mapState({
characters: (state) => state.publicObj.characters,
//动态计算样式
bgStyle() {
return {
backgroundImage: `url(${this.imgUrl})`,
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: {
...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
this.materialList[index].scale = scale
}
const deltaX = event.touches[0].clientX - this.startX
const deltaY = event.touches[0].clientY - this.startY
// console.log(deltaX)
this.materialList[index].x += deltaX
this.materialList[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[index].x < -sonRect.width) {
this.materialList[index].x = 0
this.exceed()
}
if (this.materialList[index].x > fatherRect.width) {
this.materialList[index].x = 0
this.exceed()
}
// 限制Y轴
if (this.materialList[index].y < -sonRect.height) {
this.materialList[index].y = 0
this.exceed()
}
if (this.materialList[index].y > fatherRect.height) {
this.materialList[index].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) {
this.materialList[this.domIndex].zIndex += 1
}
if (type == 4) {
this.materialList[this.domIndex].zIndex -= 1
}
},
// 素材超出显示范围
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)
}
},
created() {},
mounted() {
this.inPage = true
scrollToID('top')
}
}
</script>

<style lang="scss" scoped>
* {
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;
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%;
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: 150px;
height: 150px;
// background-color: red;
}
}
}
</style>

+ 2
- 1
src/views/login/login.vue 파일 보기

@@ -134,7 +134,7 @@
</el-col>
<el-col :span="9">
<!-- <div class="yzmImg" v-html="codeImg"></div> -->
<img class="yzmImg" :src="codeImg" alt="" />
<img v-if="showCodeImg" class="yzmImg" :src="codeImg" alt="" />
</el-col>
<el-col :span="2">
<i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i>
@@ -533,6 +533,7 @@ export default {
try {
const res = await doUpdPass(data)
console.log(res)
Toast.success('修改密码成功')
this.loginType = 1
} catch (error) {
console.log(error, 'error')


+ 35
- 9
src/views/model/editModel.vue 파일 보기

@@ -6,13 +6,16 @@
<div class="content">
<!-- 展示图片 -->
<div v-if="imgUrl" class="shouModelImg">
<img :src="imgUrl" alt="" />
<div class="editPosition">
<EditPosition ref="EditPosition" :imgUrl="imgUrl"></EditPosition>
</div>
<!-- <img :src="imgUrl" alt="" /> -->
<!-- 字幕 -->
<div
<!-- <div
v-html="textareaContent"
v-show="showSubtitle"
class="shouModelImg-subtitle"
></div>
></div> -->
</div>
<!-- 文字 -->
<div class="addText">
@@ -51,9 +54,9 @@
<!-- 合成按钮 -->
<div class="makeVideo" @click="submit">立即制作</div>
<!-- 上移下移 -->
<div v-if="false" class="upAndBottomBtn">
<div class="upAndBottomBtn">
<div class="moveLayer">
<div class="btnContent">
<div class="btnContent" @click="$refs.EditPosition.controlImg(3)">
<img
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388"
alt=""
@@ -62,7 +65,10 @@
</div>
</div>
<div class="moveLayer below">
<div class="btnContent active">
<div
class="btnContent active"
@click="$refs.EditPosition.controlImg(4)"
>
<img
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd"
alt=""
@@ -327,6 +333,7 @@ import { Toast } from 'vant'
import { mapState, mapActions } from 'vuex'
import HeadTop from './../../components/common/head.vue'
import CutImg from '../../components/CutImg.vue'
import EditPosition from '../../components/editPosition.vue'

// 工具
import { scrollToID } from '../../utils'
@@ -348,13 +355,24 @@ Vue.use(Toast)
export default {
components: {
HeadTop,
CutImg
CutImg,
EditPosition
},
data() {
return {
audioUrl: null, // 声音试听
inPage: false,
imgUrl: null,
imgUrl: false,
sclist: [
{
text: '小div1',
url: 'img/BG@2x.b0cf224b.png',
x: 300, // 相对左上角XY坐标
y: 300,
scale: 1, //缩放
zIndex: 3 //层级
}
], //素材列表
modelId: null,
mouldSmId: null,
saveID: null, // 作品id
@@ -586,6 +604,14 @@ export default {
</script>

<style lang="scss" scoped>
.editPosition {
position: relative;
width: 200px;
height: 350px;
border-radius: 12px;
overflow: hidden;
background-color: pink;
}
.CutImg {
}
.page {
@@ -741,7 +767,7 @@ export default {
}

.active {
opacity: 0.5;
// opacity: 0.5;
}
}
}


+ 17
- 16
src/views/model/editPosition-my.vue 파일 보기

@@ -19,15 +19,10 @@
:key="index"
class="material"
:style="{
transform:
'scale(' +
item.scale +
') translate(' +
item.x +
'px, ' +
item.y +
'px)',
zIndex: item.zIndex
transform: 'scale(' + item.scale + ') ',
zIndex: item.zIndex,
top: item.y + 'px',
left: item.x + 'px'
}"
>
<div>{{ item.text }}</div>
@@ -63,11 +58,10 @@ export default {
{
text: '小div1',
url: 'img/BG@2x.b0cf224b.png',
x: 300,
x: 300, // 相对左上角XY坐标
y: 300,
scale: 1,
zIndex: 3,
num: 1
scale: 1, //缩放
zIndex: 3 //层级
},
{
text: '小div2',
@@ -144,9 +138,11 @@ export default {
event.preventDefault()
if (!this.dragging) return
if (this.domIndex != index) return
// console.log(event.touches[0])
console.log(event.touches[0])

const deltaX = event.touches[0].clientX - this.startX
const deltaY = event.touches[0].clientY - this.startY
console.log(deltaX)
this.materialList[index].x += deltaX
this.materialList[index].y += deltaY

@@ -157,14 +153,13 @@ export default {
const sonRect = document
.getElementById(`item${index}`)
.getBoundingClientRect()
console.log(fatherRect)
console.log(sonRect)
// 限制X轴
if (this.materialList[index].x < 0) {
this.materialList[index].x = 0
}
if (sonRect.left > fatherRect.width - sonRect.width / 2) {
this.materialList[index].x = fatherRect.width - sonRect.width
this.exceed()
}
// 限制Y轴
if (this.materialList[index].y < 0) {
@@ -172,8 +167,10 @@ export default {
}
if (sonRect.top > fatherRect.height - sonRect.height / 2) {
this.materialList[index].y = fatherRect.height - sonRect.height
this.exceed()
}
},
// 控制台
controlImg(type) {
if (this.domIndex == -1) {
Toast('请选择素材')
@@ -191,6 +188,10 @@ export default {
this.materialList[this.domIndex].zIndex -= 1
}
},
// 素材超出显示范围
exceed() {
Toast('素材超出显示范围')
},
go(url) {
this.$router.push(url)
}


+ 23
- 2
src/views/model/editPosition.vue 파일 보기

@@ -3,12 +3,12 @@
<div id="top"></div>
<div class="content" ref="fatherBox">
<!-- 控制框 -->
<div class="control">
<!-- <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> -->

<div
:id="'item' + index"
@@ -48,6 +48,7 @@ export default {
return {
inPage: false,
dragging: false,
startDistance: 0, //两指起始位置
startX: 0,
startY: 0, // 鼠标位置x y
windowWidth: 0,
@@ -123,6 +124,13 @@ export default {
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
@@ -140,6 +148,12 @@ export default {
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
this.materialList[index].scale = scale
}
const deltaX = event.touches[0].clientX - this.startX
const deltaY = event.touches[0].clientY - this.startY
console.log(deltaX)
@@ -148,6 +162,7 @@ export default {

this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY

// 得到父子盒子信息
const fatherRect = this.$refs.fatherBox.getBoundingClientRect()
const sonRect = document
@@ -192,6 +207,12 @@ export default {
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)
}


불러오는 중...
취소
저장