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

fix

Browse Source
This commit is contained in:
X1627315083
2024-05-22 10:45:52 +08:00
parent a757eebded
commit 5d7ccd08da
14 changed files with 652 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/component/Detail/DesignDetailAlter.vue
View File

@@ -201,7 +201,7 @@
<div>Alignment</div>
</div>
<div class="operate_item_box operate_item_angle">
<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event)" @touchstart="mousedownGradientAngle($event)">
<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event,'mousedown')" @touchstart="mousedownGradientAngle($event,'touchstart')">
<div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
</div>
</div>
@@ -212,7 +212,7 @@
<div class="color_setting_operate_item color_setting_operate_input">
<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':colorList[selectIndex]?.gradient?`linear-gradient(90deg,${setGradient(colorList[selectIndex].gradient)})`:'none'}">
</div>
<div v-for="item,index in colorList[selectIndex].gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == colorList[selectIndex].gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index)" @touchstart="mousedownGradient($event,item,index)"></div>
<div v-for="item,index in colorList[selectIndex].gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == colorList[selectIndex].gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index,'mousedown')" @touchstart="mousedownGradient($event,item,index,'touchstart')"></div>
</div>
</div>
</div>
@@ -881,7 +881,13 @@ export default defineComponent({
}
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
},
mousedownGradient(event,item,index){
mousedownGradient(event,item,index,str){
let moible = isMoible()
if(moible && str == 'mousedown'){
return
}else if(!moible && str == 'touchstart'){
return
}
event.stopPropagation();
this.colorList[this.selectIndex].gradient.selectIndex = index
let gradientRgba = item.rgba
@@ -889,25 +895,41 @@ export default defineComponent({
let hex = this.rgbaToHex(rgba)
this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
// isMoible() true为移动端
let gradientWidth = document.querySelector('.detail_modal_body_select .color_setting_operate_bg').clientWidth
let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
let position = {
x:event.x,
x:moible?event.touches[0].screenX:event?.x,
left:event.target.style.left?event.target.style.left.split('%')[0]:0
}
let mousedownGradient = (e)=>{
let left = (e.x - position.x)/gradientWidth*100+Number(position.left)
let left = ((moible?e.touches[0].screenX:e.x) - position.x)/gradientWidth*100+Number(position.left)
left = (left<0?0:left>100?100:left)
item.left = left+'%'
}
let mouseupGradient = ()=>{
window.removeEventListener('mousemove',mousedownGradient)
window.removeEventListener('mouseup',mouseupGradient)
if(moible){
window.removeEventListener('touchmove',mousedownGradient)
window.removeEventListener('touchend',mouseupGradient)
}else{
window.removeEventListener('mousemove',mousedownGradient)
window.removeEventListener('mouseup',mouseupGradient)
}
}
if(moible){
window.addEventListener('touchmove',mousedownGradient)
window.addEventListener('touchend',mouseupGradient)
}else{
window.addEventListener('mousemove',mousedownGradient)
window.addEventListener('mouseup',mouseupGradient)
}
window.addEventListener('mousemove',mousedownGradient)
window.addEventListener('mouseup',mouseupGradient)
// event.target.addEventListener('touchmove',)
},
mousedownGradientAngle(event){
mousedownGradientAngle(event,str){
let moible = isMoible()
if(moible && str == 'mousedown'){
return
}else if(!moible && str == 'touchstart'){
return
}
event.stopPropagation();
// isMoible() true为移动端
let domPosition = event.target.getBoundingClientRect()
@@ -916,34 +938,33 @@ export default defineComponent({
y:domPosition.y+domPosition.height/2,
}
let angle
let mousedownGradientAngle = (e)=>{
let X = position.x
let Y = position.y
let x = e.x - X
let y = Y - e.y
let x = (moible?e.touches[0].clientX:e?.x) - X
let y = Y -( moible?e.touches[0].clientY:e?.y)
angle = Math.atan2(x,y)*(180 / Math.PI)
// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
this.colorList[this.selectIndex].gradient.angle = angle
}
let mouseupGradientAngle = ()=>{
window.removeEventListener('mousemove',mousedownGradientAngle)
window.removeEventListener('mouseup',mouseupGradientAngle)
if(moible){
window.removeEventListener('touchmove',mousedownGradientAngle)
window.removeEventListener('touchend',mouseupGradientAngle)
}else{
window.removeEventListener('mousemove',mousedownGradientAngle)
window.removeEventListener('mouseup',mouseupGradientAngle)
}
}
if(moible){
window.addEventListener('touchmove',mousedownGradientAngle)
window.addEventListener('touchend',mouseupGradientAngle)
}else{
window.addEventListener('mousemove',mousedownGradientAngle)
window.addEventListener('mouseup',mouseupGradientAngle)
}
window.addEventListener('mousemove',mousedownGradientAngle)
window.addEventListener('mouseup',mouseupGradientAngle)
},
deleteGradientItem(){
if(this.colorList[this.selectIndex].gradient.gradientList.length <= 2)return
this.colorList[this.selectIndex].gradient.gradientList.splice(this.colorList[this.selectIndex].gradient.selectIndex,1)
},
addGradient(event){
let gradientWidth = event.target.clientWidth
let left = event.offsetX/gradientWidth
this.colorList[this.selectIndex].gradient.gradientList.push({
rgba:this.selectColor.rgba,
left:left.toFixed(2)*100+'%'
})
},
//通过tcx获取颜色
getTcxColor(){