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 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 @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>
@@ -49,25 +49,25 @@
</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="operate_item_box">
<div>线性</div>
</div>
<div class="operate_item_box operate_item_angle">
<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>
<!-- <input type="number"> -->
</div>
<div class="operate_item_box">
<div>删除</div>
<div class="operate_item_box operate_item_delete">
<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
</div>
</div>
<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 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>
@@ -159,7 +159,7 @@ export default defineComponent({
},
setup(){
let fileList = ref([])
let colorList = [{},{},{},{},{},{},{},{}]
let colorList = ref([{},{},{},{},{},{},{},{}])
let selectColor = ref({
rgba:{},
}) //顔色选择器默认颜色
@@ -189,8 +189,8 @@ export default defineComponent({
],
angle:45,
selectIndex:-1,
gradientShow:false,
})
let gradientShow = ref(false)
return {
fileList,
colorList,
@@ -199,7 +199,6 @@ export default defineComponent({
driver__,
t,
gradient,
gradientShow,
}
},
watch:{
@@ -212,25 +211,21 @@ export default defineComponent({
// },
selectColor:{
handler(newVal,oldVal){
this.colorList[this.selectIndex] = newVal.rgba
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
if(this.gradient.selectIndex>-1 && this.gradientShow){
this.gradient.gradientList[this.gradient.selectIndex].color = `rgb(${newVal.rgba.r},${newVal.rgba.g},${newVal.rgba.b})`
this.gradient.gradientList[this.gradient.selectIndex].rgba = {
if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
this.colorList[this.selectIndex] = {}
return
}
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,
g:newVal.rgba.g,
b:newVal.rgba.b,
a:1,
}
}
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
if(this.gradientShow){
// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
}else{
this.colorList[this.selectIndex].gradient = ''
}
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
// this.clearSelectColor()
},
immediate: true
},
@@ -259,7 +254,6 @@ export default defineComponent({
setGradient(){
// return this.setGradientAngle(gradient)
return (gradient)=>{
console.log(gradient,'222');
let gradientStr = ''
gradient.gradientList.sort((a, b) => {
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}`
})
console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`);
return `${gradientStr}`
}
@@ -317,10 +310,11 @@ export default defineComponent({
dropperDom.appendChild(backIcon);
colorDom.addEventListener('click',()=>{
// 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.gradientShow = !this.gradientShow
if(this.gradientShow){
this.gradient.gradientShow = true
this.colorList[this.selectIndex].rgba = this.selectColor.rgba
if(!this.colorList[this.selectIndex].gradient ){
if(this.selectColor.rgba.r){
this.gradient.gradientList[this.gradient.selectIndex].rgba = {
r:this.selectColor.rgba.r,
@@ -329,12 +323,14 @@ export default defineComponent({
a:1,
}
}
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
}else{
this.colorList[this.selectIndex].gradient = ''
}
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
})
backIcon.addEventListener('click', async ()=>{
try {
const dropper = new EyeDropper();
@@ -374,10 +370,9 @@ export default defineComponent({
},
//选择不同的色块
selectColorItem(index,color){
this.gradientShow = false
let hex
if(color?.r){
hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
if(color?.rgba?.r){
hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
}else{
hex = '#FFFFFF'
}
@@ -390,8 +385,9 @@ export default defineComponent({
if(this.driver__.driver){
driverObj__.moveNext()
}
if(color.r){
this.selectColor = {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex}
if(color?.rgba?.r){
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])
this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
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
let colorList =this.colorList.filter((v) => Object.keys(v).length)
this.setColorboardList(colorList)
@@ -522,7 +518,6 @@ export default defineComponent({
return hex;
},
setUplpadColor(color){
this.selectColor = ''
nextTick().then(()=>{
this.selectColor = color
if(this.driver__.driver){
@@ -601,7 +596,9 @@ export default defineComponent({
let data = {
id:'',
name:'',
rgbValue:v
rgbValue:v.rgba,
gradient:v.gradient,
}
return data
})
@@ -613,16 +610,28 @@ export default defineComponent({
let hex
colorList.forEach((ele, index) => {
hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
this.colorList[index] = ele.rgbValue
this.colorList[index].rgba = 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)
},
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){
event.stopPropagation();
this.gradient.selectIndex = index
let gradientRgba = this.gradient.gradientList[index].rgba
this.colorList[this.selectIndex].gradient.selectIndex = index
let gradientRgba = item.rgba
let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
let hex = this.rgbaToHex(rgba)
this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
@@ -635,7 +644,6 @@ export default defineComponent({
let mousedownGradient = (e)=>{
let left = (e.x - position.x)/gradientWidth*100+Number(position.left)
left = (left<0?0:left>100?100:left)
// event.target.style.left = (left<0?0:left>100?100:left)+'%'
item.left = left+'%'
}
let mouseupGradient = ()=>{
@@ -649,21 +657,21 @@ export default defineComponent({
mousedownGradientAngle(event){
event.stopPropagation();
// isMoible() true为移动端
console.log(event.target.getBoundingClientRect());
let domPosition = event.target.getBoundingClientRect()
console.log(domPosition.x+domPosition.width/2);
let position = {
x:domPosition.x+domPosition.width/2,
y:domPosition.y+domPosition.height/2,
}
let angle = this.gradient.angle
let angle
let mousedownGradientAngle = (e)=>{
let X = position.x
let Y = position.y
let x = e.x - X
let y = Y - e.y
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 = ()=>{
window.removeEventListener('mousemove',mousedownGradientAngle)
@@ -1052,6 +1060,7 @@ export default defineComponent({
}
.color_setting_operate{
margin-top: 2rem;
*{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
@@ -1062,8 +1071,20 @@ export default defineComponent({
.color_setting_operate_item{
display: flex;
justify-content: space-around;
align-items: center;
.operate_item_box{
}
}
.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_box{
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>
</div> -->
<!-- <div @click="toSvg()">2312312312</div> -->
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
@@ -1599,9 +1601,13 @@ export default defineComponent({
});
}
let toSvg = ()=>{
// console.log(canvas.toSvg());
}
onMounted(() => {});
return {
t,
toSvg,
showUpgradePlan,//当前弹窗是否打开
canvasWH,//画布初始宽高
credits,//积分 用来判断HD导出积分是否够用

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

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

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

@@ -35,8 +35,9 @@
<div class="img_block_item">
<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_body">
<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" 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.name}}</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 () {
},
methods: {

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

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