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

Merge branch 'localDevelop' into develop

Browse Source
This commit is contained in:
X1627315083
2024-05-09 13:41:47 +08:00
parent f3e4acc940 6e183074f3
commit 747b1d7e66
3 changed files with 200 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
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})`}">
<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,7 +49,27 @@
</div>
</div>
</div> -->
<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(${colorList[selectIndex].gradient.angle}deg)`}"></div>
</div>
<!-- <input type="number"> -->
</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" @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>
</div>
</div>
<!-- <div class="color_review_block">
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
@@ -139,7 +159,7 @@ export default defineComponent({
},
setup(){
let fileList = ref([])
let colorList = [{},{},{},{},{},{},{},{}]
let colorList = ref([{},{},{},{},{},{},{},{}])
let selectColor = ref({
rgba:{},
}) //顔色选择器默认颜色
@@ -147,7 +167,30 @@ export default defineComponent({
})
let driver__ = inject('driver__')
let {t} = useI18n()
let gradient = ref({
gradientList:[
{
rgba:{
r:117,
g:119,
b:255,
a:1,
},
left:'0%'
},{
rgba:{
r:0,
g:222,
b:152,
a:1,
},
left:'100%'
},
],
angle:45,
selectIndex:-1,
gradientShow:false,
})
return {
fileList,
colorList,
@@ -155,6 +198,7 @@ export default defineComponent({
selectColorList,
driver__,
t,
gradient,
}
},
watch:{
@@ -167,11 +211,21 @@ export default defineComponent({
// },
selectColor:{
handler(newVal,oldVal){
this.colorList[this.selectIndex] = newVal.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,
}
}
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
// this.clearSelectColor()
},
immediate: true
},
@@ -197,6 +251,25 @@ export default defineComponent({
return data
}
},
setGradient(){
// return this.setGradientAngle(gradient)
return (gradient)=>{
let gradientStr = ''
gradient.gradientList.sort((a, b) => {
let aArr = a.left.split('%')[0]
let bArr = b.left.split('%')[0]
return aArr - bArr;
});
gradient.gradientList.forEach((item,index)=>{
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}`
}
}
},
data(){
return{
@@ -232,9 +305,32 @@ export default defineComponent({
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
let colorDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-color-wrap')[0]
// console.log(colorDom);
dropperDom.appendChild(backIcon);
colorDom.addEventListener('click',()=>{
// this.colorList[this.selectIndex]
this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
this.gradient.selectIndex = 0
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,
g:this.selectColor.rgba.g,
b:this.selectColor.rgba.b,
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();
@@ -274,9 +370,10 @@ export default defineComponent({
},
//选择不同的色块
selectColorItem(index,color){
console.log(this.colorList);
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'
}
@@ -289,8 +386,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
}
},
@@ -307,7 +405,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)
@@ -421,7 +519,6 @@ export default defineComponent({
return hex;
},
setUplpadColor(color){
this.selectColor = ''
nextTick().then(()=>{
this.selectColor = color
if(this.driver__.driver){
@@ -500,7 +597,9 @@ export default defineComponent({
let data = {
id:'',
name:'',
rgbValue:v
rgbValue:v.rgba,
gradient:v.gradient,
}
return data
})
@@ -512,12 +611,76 @@ 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.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} //顔色选择器默认颜色
// isMoible() true为移动端
let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
let position = {
x: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)
left = (left<0?0:left>100?100:left)
item.left = left+'%'
}
let mouseupGradient = ()=>{
window.removeEventListener('mousemove',mousedownGradient)
window.removeEventListener('mouseup',mouseupGradient)
}
window.addEventListener('mousemove',mousedownGradient)
window.addEventListener('mouseup',mouseupGradient)
// event.target.addEventListener('touchmove',)
},
mousedownGradientAngle(event){
event.stopPropagation();
// isMoible() true为移动端
let domPosition = event.target.getBoundingClientRect()
let position = {
x:domPosition.x+domPosition.width/2,
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
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)
}
window.addEventListener('mousemove',mousedownGradientAngle)
window.addEventListener('mouseup',mouseupGradientAngle)
}
}
})
</script>
@@ -898,6 +1061,7 @@ export default defineComponent({
}
.color_setting_operate{
margin-top: 2rem;
*{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
@@ -908,8 +1072,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%;

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

@@ -214,6 +214,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>
@@ -1610,13 +1612,14 @@ export default defineComponent({
});
}
let toSvg = () =>{
console.log(canvas.toSVG());
let toSvg = ()=>{
// console.log(canvas.toSvg());
}
onMounted(() => {});
return {
toSvg,
t,
toSvg,
showUpgradePlan,//当前弹窗是否打开
canvasWH,//画布初始宽高
credits,//积分 用来判断HD导出积分是否够用

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

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