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

colorboard可以选择渐变色

Browse Source
This commit is contained in:
X1627315083
2024-04-25 12:58:10 +08:00
parent 2c5775e77c
commit 6e183074f3
5 changed files with 97 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/component/HomePage/ColorboardUpload.vue
View File

@@ -6,7 +6,7 @@
</div> </div>
<div class="modal_img"> <div class="modal_img">
<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" > <div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}"> <div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
</div> </div>
</div> </div>
<div> <div>
@@ -49,25 +49,25 @@
</div> </div>
</div> </div>
</div> --> </div> -->
<div class="color_setting_operate" v-show="gradientShow"> <div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
<div class="color_setting_operate_item color_setting_operate_control"> <div class="color_setting_operate_item color_setting_operate_control">
<div class="operate_item_box"> <div class="operate_item_box">
<div>线性</div> <div>线性</div>
</div> </div>
<div class="operate_item_box operate_item_angle"> <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)" @touchstart="mousedownGradientAngle($event)">
<div :style="{'transform':`rotate(${gradient.angle}deg)`}"></div> <div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
</div> </div>
<!-- <input type="number"> --> <!-- <input type="number"> -->
</div> </div>
<div class="operate_item_box"> <div class="operate_item_box operate_item_delete">
<div>删除</div> <i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
</div> </div>
</div> </div>
<div class="color_setting_operate_item color_setting_operate_input"> <div class="color_setting_operate_item color_setting_operate_input">
<div class="color_setting_operate_bg" :style="{'background-image':`linear-gradient(90deg,${setGradient(gradient)})`}"> <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>
<div v-for="item,index in gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == 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)" @touchstart="mousedownGradient($event,item,index)"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -159,7 +159,7 @@ export default defineComponent({
}, },
setup(){ setup(){
let fileList = ref([]) let fileList = ref([])
let colorList = [{},{},{},{},{},{},{},{}] let colorList = ref([{},{},{},{},{},{},{},{}])
let selectColor = ref({ let selectColor = ref({
rgba:{}, rgba:{},
}) //顔色选择器默认颜色 }) //顔色选择器默认颜色
@@ -189,8 +189,8 @@ export default defineComponent({
], ],
angle:45, angle:45,
selectIndex:-1, selectIndex:-1,
gradientShow:false,
}) })
let gradientShow = ref(false)
return { return {
fileList, fileList,
colorList, colorList,
@@ -199,7 +199,6 @@ export default defineComponent({
driver__, driver__,
t, t,
gradient, gradient,
gradientShow,
} }
}, },
watch:{ watch:{
@@ -212,25 +211,21 @@ export default defineComponent({
// }, // },
selectColor:{ selectColor:{
handler(newVal,oldVal){ handler(newVal,oldVal){
this.colorList[this.selectIndex] = newVal.rgba if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
let colorList =this.colorList.filter((v) => v && Object.keys(v).length) this.colorList[this.selectIndex] = {}
if(this.gradient.selectIndex>-1 && this.gradientShow){ return
this.gradient.gradientList[this.gradient.selectIndex].color = `rgb(${newVal.rgba.r},${newVal.rgba.g},${newVal.rgba.b})` }
this.gradient.gradientList[this.gradient.selectIndex].rgba = { this.colorList[this.selectIndex].rgba = newVal.rgba
if(this.colorList[this.selectIndex]?.gradient && this.colorList[this.selectIndex]?.gradient?.selectIndex>-1 && this.colorList[this.selectIndex]?.gradient?.gradientShow){
this.colorList[this.selectIndex].gradient.gradientList[this.colorList[this.selectIndex].gradient.selectIndex].rgba = {
r:newVal.rgba.r, r:newVal.rgba.r,
g:newVal.rgba.g, g:newVal.rgba.g,
b:newVal.rgba.b, b:newVal.rgba.b,
a:1, a:1,
} }
} }
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient)) let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
if(this.gradientShow){
// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
}else{
this.colorList[this.selectIndex].gradient = ''
}
this.setColorboardList(colorList) this.setColorboardList(colorList)
// this.clearSelectColor()
}, },
immediate: true immediate: true
}, },
@@ -259,7 +254,6 @@ export default defineComponent({
setGradient(){ setGradient(){
// return this.setGradientAngle(gradient) // return this.setGradientAngle(gradient)
return (gradient)=>{ return (gradient)=>{
console.log(gradient,'222');
let gradientStr = '' let gradientStr = ''
gradient.gradientList.sort((a, b) => { gradient.gradientList.sort((a, b) => {
let aArr = a.left.split('%')[0] let aArr = a.left.split('%')[0]
@@ -272,7 +266,6 @@ export default defineComponent({
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
}) })
console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`);
return `${gradientStr}` return `${gradientStr}`
} }
@@ -317,10 +310,11 @@ export default defineComponent({
dropperDom.appendChild(backIcon); dropperDom.appendChild(backIcon);
colorDom.addEventListener('click',()=>{ colorDom.addEventListener('click',()=>{
// this.colorList[this.selectIndex] // this.colorList[this.selectIndex]
console.log(123123123123); this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
this.gradient.selectIndex = 0 this.gradient.selectIndex = 0
this.gradientShow = !this.gradientShow this.gradient.gradientShow = true
if(this.gradientShow){ this.colorList[this.selectIndex].rgba = this.selectColor.rgba
if(!this.colorList[this.selectIndex].gradient ){
if(this.selectColor.rgba.r){ if(this.selectColor.rgba.r){
this.gradient.gradientList[this.gradient.selectIndex].rgba = { this.gradient.gradientList[this.gradient.selectIndex].rgba = {
r:this.selectColor.rgba.r, r:this.selectColor.rgba.r,
@@ -329,12 +323,14 @@ export default defineComponent({
a:1, a:1,
} }
} }
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient)) this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
}else{ }else{
this.colorList[this.selectIndex].gradient = '' this.colorList[this.selectIndex].gradient = ''
} }
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
}) })
backIcon.addEventListener('click', async ()=>{ backIcon.addEventListener('click', async ()=>{
try { try {
const dropper = new EyeDropper(); const dropper = new EyeDropper();
@@ -374,10 +370,9 @@ export default defineComponent({
}, },
//选择不同的色块 //选择不同的色块
selectColorItem(index,color){ selectColorItem(index,color){
this.gradientShow = false
let hex let hex
if(color?.r){ if(color?.rgba?.r){
hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1]) hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
}else{ }else{
hex = '#FFFFFF' hex = '#FFFFFF'
} }
@@ -390,8 +385,9 @@ export default defineComponent({
if(this.driver__.driver){ if(this.driver__.driver){
driverObj__.moveNext() driverObj__.moveNext()
} }
if(color.r){ if(color?.rgba?.r){
this.selectColor = {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex} this.selectColor.rgba = {r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1}
this.selectColor.hex = hex
} }
}, },
@@ -408,7 +404,7 @@ export default defineComponent({
let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a?rv.a:1]) let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a?rv.a:1])
this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''} this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
this.selectColor = this.reviewColor this.selectColor = this.reviewColor
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b} this.colorList[this.selectIndex].rgba = {r:rv.r, g:rv.g, b:rv.b}
this.pantongName = rv.name this.pantongName = rv.name
let colorList =this.colorList.filter((v) => Object.keys(v).length) let colorList =this.colorList.filter((v) => Object.keys(v).length)
this.setColorboardList(colorList) this.setColorboardList(colorList)
@@ -522,7 +518,6 @@ export default defineComponent({
return hex; return hex;
}, },
setUplpadColor(color){ setUplpadColor(color){
this.selectColor = ''
nextTick().then(()=>{ nextTick().then(()=>{
this.selectColor = color this.selectColor = color
if(this.driver__.driver){ if(this.driver__.driver){
@@ -601,7 +596,9 @@ export default defineComponent({
let data = { let data = {
id:'', id:'',
name:'', name:'',
rgbValue:v rgbValue:v.rgba,
gradient:v.gradient,
} }
return data return data
}) })
@@ -613,16 +610,28 @@ export default defineComponent({
let hex let hex
colorList.forEach((ele, index) => { colorList.forEach((ele, index) => {
hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1]) hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
this.colorList[index].rgba = ele.rgbValue
this.colorList[index] = ele.rgbValue // if(ele.gradient) this.colorList[index].gradient = ele.gradient
}); });
this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色 this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
this.store.commit('setColorboardList',colorList) this.store.commit('setColorboardList',colorList)
},
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+'%'
})
},
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)
}, },
mousedownGradient(event,item,index){ mousedownGradient(event,item,index){
event.stopPropagation(); event.stopPropagation();
this.gradient.selectIndex = index this.colorList[this.selectIndex].gradient.selectIndex = index
let gradientRgba = this.gradient.gradientList[index].rgba let gradientRgba = item.rgba
let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1] let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
let hex = this.rgbaToHex(rgba) let hex = this.rgbaToHex(rgba)
this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色 this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
@@ -635,7 +644,6 @@ export default defineComponent({
let mousedownGradient = (e)=>{ let mousedownGradient = (e)=>{
let left = (e.x - position.x)/gradientWidth*100+Number(position.left) let left = (e.x - position.x)/gradientWidth*100+Number(position.left)
left = (left<0?0:left>100?100:left) left = (left<0?0:left>100?100:left)
// event.target.style.left = (left<0?0:left>100?100:left)+'%'
item.left = left+'%' item.left = left+'%'
} }
let mouseupGradient = ()=>{ let mouseupGradient = ()=>{
@@ -649,21 +657,21 @@ export default defineComponent({
mousedownGradientAngle(event){ mousedownGradientAngle(event){
event.stopPropagation(); event.stopPropagation();
// isMoible() true为移动端 // isMoible() true为移动端
console.log(event.target.getBoundingClientRect());
let domPosition = event.target.getBoundingClientRect() let domPosition = event.target.getBoundingClientRect()
console.log(domPosition.x+domPosition.width/2);
let position = { let position = {
x:domPosition.x+domPosition.width/2, x:domPosition.x+domPosition.width/2,
y:domPosition.y+domPosition.height/2, y:domPosition.y+domPosition.height/2,
} }
let angle = this.gradient.angle let angle
let mousedownGradientAngle = (e)=>{ let mousedownGradientAngle = (e)=>{
let X = position.x let X = position.x
let Y = position.y let Y = position.y
let x = e.x - X let x = e.x - X
let y = Y - e.y let y = Y - e.y
angle = Math.atan2(x,y)*(180 / Math.PI) angle = Math.atan2(x,y)*(180 / Math.PI)
this.gradient.angle = angle // this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
this.colorList[this.selectIndex].gradient.angle = angle
} }
let mouseupGradientAngle = ()=>{ let mouseupGradientAngle = ()=>{
window.removeEventListener('mousemove',mousedownGradientAngle) window.removeEventListener('mousemove',mousedownGradientAngle)
@@ -1052,6 +1060,7 @@ export default defineComponent({
} }
.color_setting_operate{ .color_setting_operate{
margin-top: 2rem;
*{ *{
-webkit-touch-callout: none; /* iOS Safari */ -webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */ -webkit-user-select: none; /* Safari */
@@ -1062,8 +1071,20 @@ export default defineComponent({
.color_setting_operate_item{ .color_setting_operate_item{
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center;
.operate_item_box{
}
} }
.color_setting_operate_control{ .color_setting_operate_control{
.operate_item_delete,.operate_item_angle{
cursor: pointer;
}
.operate_item_delete{
i{
display: flex;
font-size: 3rem;
}
}
.operate_item_angle{ .operate_item_angle{
.operate_item_angle_box{ .operate_item_angle_box{
border-radius: 50%; border-radius: 50%;

6
src/component/HomePage/ExportModel.vue
View File

@@ -213,6 +213,8 @@
<div><span class="icon iconfont icon-zhuyi"></span>Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge</div> <div><span class="icon iconfont icon-zhuyi"></span>Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge</div>
</div> </div>
</div> --> </div> -->
<!-- <div @click="toSvg()">2312312312</div> -->
<div class="mark_loading" v-show="isShowMark"> <div class="mark_loading" v-show="isShowMark">
<a-spin size="large" /> <a-spin size="large" />
</div> </div>
@@ -1599,9 +1601,13 @@ export default defineComponent({
}); });
} }
let toSvg = ()=>{
// console.log(canvas.toSvg());
}
onMounted(() => {}); onMounted(() => {});
return { return {
t, t,
toSvg,
showUpgradePlan,//当前弹窗是否打开 showUpgradePlan,//当前弹窗是否打开
canvasWH,//画布初始宽高 canvasWH,//画布初始宽高
credits,//积分 用来判断HD导出积分是否够用 credits,//积分 用来判断HD导出积分是否够用

1
src/component/HomePage/ExportNewCoolection.vue
View File

@@ -122,7 +122,6 @@ export default defineComponent({
}, },
methods: { methods: {
dragstart (e:any, index:any) { dragstart (e:any, index:any) {
console.log(12312312312312);
this.dragIdx = index this.dragIdx = index
}, },

24
src/component/HomePage/NewCollectionReview.vue
View File

@@ -35,8 +35,9 @@
<div class="img_block_item"> <div class="img_block_item">
<div class="color_item" v-for="(color) in allBoardData?.colorBoards" :key="color"> <div class="color_item" v-for="(color) in allBoardData?.colorBoards" :key="color">
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div> <div class="color_content" v-if="!color?.gradient" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
<div class="color_content_body"> <div class="color_content" v-else :style="{height:'11rem','background-image':color?.gradient?`linear-gradient(${color?.gradient.angle}deg,${setGradient(color?.gradient)}`:'none'}"></div>
<div class="color_content_body" v-if="!color?.gradient">
<div class="color_des">{{color.tcx}}</div> <div class="color_des">{{color.tcx}}</div>
<div class="color_des">{{color.name}}</div> <div class="color_des">{{color.name}}</div>
</div> </div>
@@ -122,7 +123,26 @@ export default defineComponent({
}, },
}, },
computed: {
setGradient(){
return (gradient:any)=>{
let gradientStr = ''
gradient.gradientList.sort((a:any, b:any) => {
let aArr = a.left.split('%')[0]
let bArr = b.left.split('%')[0]
return aArr - bArr;
});
gradient.gradientList.forEach((item:any,index:any)=>{
let str = ','
if(gradient.gradientList.length == index+1)str = ''
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
})
return `${gradientStr}`
}
}
},
mounted () { mounted () {
}, },
methods: { methods: {

1
src/views/HomeView/HomeView.vue
View File

@@ -586,6 +586,7 @@ export default defineComponent({
v: hsv[2], v: hsv[2],
}); });
} }
return new Promise((resolve: any, reject: any) => { return new Promise((resolve: any, reject: any) => {
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data) Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
.then((rv: any) => { .then((rv: any) => {