@@ -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%;
diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index cea786b2..e1cc36f4 100644
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -213,6 +213,8 @@
Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge