aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

注释渐变色功能和作品广场

Browse Source
This commit is contained in:
X1627315083
2024-05-16 09:41:16 +08:00
parent 4d86e782e6
commit 051b9e4f38
24 changed files with 1561 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/component/HomePage/layoutMobile.vue
View File

@@ -28,7 +28,7 @@
</div>
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @touchstart="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'zoom':item.zoom}" draggable="false" v-modelImg>
<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}" draggable="false" v-modelImg>
<ul v-show="item.setPitch" class="layout_btn" >
<li class="layout_btn_top" v-compile.stop="'top'"></li>
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
@@ -317,21 +317,22 @@ export default defineComponent({
},
//操作旋转
rotote:{
mounted(el){
mounted(el,compile){
let mouse = true;
let angle :any = 0
let num:any
let x = 0
let y = 0
let elParent = el.parentNode.parentNode
if(document.defaultView){
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
num = Number(transform[3])
}
// 添加鼠标按下事件监听器
el.addEventListener('touchstart', (e:any) => {
e.stopPropagation()
mouse = true;
if(document.defaultView){
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
num = Number(transform[3])
}
// let eX = (e.pageX - el.offsetLeft) + el.offsetLeft
// let eY = elParent.offsetTop + el.offsetTop
var info = el.getBoundingClientRect();
@@ -345,7 +346,14 @@ export default defineComponent({
let x:any = e.targetTouches[0].clientX - X
let y:any = Y - e.targetTouches[0].clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
let instance:any = compile.instance
instance.layoutList.forEach((item:any) => {
if(item.setPitch){
angle = angle.toFixed(2)
item.angle = angle
}
});
// elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
}
});
@@ -357,40 +365,6 @@ export default defineComponent({
// y = e.pageY
});
});
//缩放
let timeSwitch = true
el.parentNode.addEventListener('mousemove', (e:any) => {
el.parentNode.addEventListener('mousewheel',(e:any) => {
if(timeSwitch){
timeSwitch = false
if((e as WheelEvent).deltaY > 0){
if(num <= 1){
num -= 0.05
}else{
num -= 0.1
}
}else{
//放大
if(num <= 1){
num += 0.05
}else{
num += 0.1
}
}
if(num >= 3){
num = 3
}else if (num < .2){
num = .2
}
setTimeout(() => {
timeSwitch = true
}, 100);
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
}
});
});
}
},
@@ -600,7 +574,11 @@ export default defineComponent({
v.setPitch = false
})
this.layoutList = parentList
this.layoutList[0].setPitch = true
this.layoutList[0].zoom = this.layoutList[0].zoom?this.layoutList[0].zoom:1
this.moodItemScale = this.layoutList[0].zoom*100
this.moodIndex = 0
this.moodbList = this.moodb[parentList.length-1]
this.moodbClassName = this.moodb_className
},