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

注释渐变色功能和作品广场

Browse Source
This commit is contained in:
X1627315083
2024-05-16 09:41:16 +08:00
parent 4d86e782e6
commit 051b9e4f38
24 changed files with 1561 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -190,6 +190,31 @@
</div>
</div> -->
<!-- <div class="color_setting_operateSingle">
<div class="started_btn" @click="setOperate">
{{ colorList[selectIndex]?.gradient?.gradientList>1? 'Gradual Change':'Single'}}
</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>Alignment</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>
</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>
@@ -285,6 +310,7 @@ export default defineComponent({
let openClick = ref(1);
let searchPictureName = ref('')
let total = ref(0)
let pageSize = ref(10)
let currentPage = ref(1)
@@ -305,6 +331,34 @@ export default defineComponent({
let sketchCatecoryList = computed(()=>{
return store.state.Workspace.workspacePosition
})
let colorList = ref([{},{},{},{},{},{},{},{},{}])
let selectIndex = ref(0)
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,
})
provide('colorList',colorList)
provide('selectIndex',selectIndex)
let {t} = useI18n()
return{
store,
@@ -329,6 +383,9 @@ export default defineComponent({
driver__,
body,
sketchCatecoryList,
colorList,
selectIndex,
gradient,
t,
}
},
@@ -362,7 +419,6 @@ export default defineComponent({
tcxColor:'',
selectColorList: [],
colorFileList: [],
selectIndex:0,
indicator : h(LoadingOutlined, {
style: {
fontSize: '2.4rem',
@@ -416,22 +472,63 @@ 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}`
}
}
},
mounted(){
},
watch:{
selectColor(newVal,oldVal){
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
// selectColor(newVal,oldVal){
// this.colorList[this.selectIndex] = newVal
// let colorList = this.colorList.filter((v) => v && Object.keys(v).length)
clearInterval(this.getPantongNameTime)
this.getPantongNameTime = setTimeout(() => {
this.getPantongName(newVal.rgba)
}, 100);
},
// clearInterval(this.getPantongNameTime)
// this.getPantongNameTime = setTimeout(() => {
// this.getPantongName(newVal.rgba)
// }, 100);
// },
selectColor:{
handler(newVal,oldVal){
if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
this.colorList[this.selectIndex] = {}
return
}
this.colorList[this.selectIndex].rgba = newVal.rgba
this.colorList[this.selectIndex].hex = newVal.hex
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,
}
}
// console.log(JSON.parse(JSON.stringify(this.colorList)),JSON.parse(JSON.stringify(newVal)));
clearInterval(this.getPantongNameTime)
this.getPantongNameTime = setTimeout(() => {
this.getPantongName(newVal.rgba)
}, 100);
},
immediate: true
},
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.upload.gender = newVal?.sexEnum?.name
@@ -480,7 +577,8 @@ export default defineComponent({
b:Number(arr.b),
a:Number(arr.a?arr.a:1),
},
hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1]),
gradient:this.current.gradient
}
this.uploadList = []
if (num == 1) {
@@ -496,6 +594,19 @@ export default defineComponent({
this.clothesList = []
this.getLibraryList()
}
this.store.state.UploadFilesModule.allBoardData.colorBoards.forEach((item,index) => {
this.colorList[index+1] = {
gradient:item.gradient,
rgba:item.rgbValue,
tcx:item.tcx,
name:item.name,
}
if(item.gradient){
this.colorList[index+1].gradient = item.gradient
}else{
delete this.colorList[index+1].gradient
}
})
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.init(num)
this.workspaceCom = computed(()=>{
@@ -567,7 +678,7 @@ export default defineComponent({
terminate(){
let DesignDetailEnd = this.$refs.DesignDetailEnd
this.select = false
DesignDetailEnd.selectIndex = 0
this.selectIndex = 0
DesignDetailEnd.type_ = 0
this.colorFileList = []
this.selectColorList = []
@@ -581,7 +692,7 @@ export default defineComponent({
this.uploadList = []
this.apparelList = []
this.printList = []
DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{},{}]
this.colorList = [{},{},{},{},{},{},{},{},{}]
// DesignDetailEnd.colorList = [{}]
DesignDetailEnd.sketchImg={}
this.terminate()
@@ -749,7 +860,92 @@ export default defineComponent({
).catch(res=>{
});
},
setOperate(){
console.log(this.selectColor);
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.selectColor = {rgba:this.colorList[this.selectIndex].gradient.gradientList[0].rgba}
this.colorList[this.selectIndex].gradient = ''
}
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
},
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('.detail_modal_body_select .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)
},
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(){
if(!this.tcxColor){
@@ -764,10 +960,9 @@ 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
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
this.pantongName = rv.name
let colorList =DesignDetailEnd.colorList.filter((v) => Object.keys(v).length)
this.setColorboardList(colorList)
let colorList =this.colorList.filter((v) => Object.keys(v).length)
this.getColorBg = true
}else{
message.info(this.t('DesignDetailAlter.jsContent6'))
@@ -794,8 +989,8 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
.then((rv) => {
if (rv) {
this.selectColor.tcx = rv[0].tcx
this.selectColor.name = rv[0].name
this.colorList[this.selectIndex].tcx = rv[0].tcx
this.colorList[this.selectIndex].name = rv[0].name
resolve();
}
})
@@ -804,19 +999,7 @@ export default defineComponent({
});
});
},
setColorboardList(colorList){
let newColorList = colorList.map((v)=>{
let data = {
id:'',
name:'',
rgbValue:v
}
return data
})
},
fileUploadChange(data){
let file = data.file
let fileData = file.originFileObj
@@ -1129,6 +1312,7 @@ export default defineComponent({
.detail_color{
// height: calc(100% - 5.4rem*1.2));
&.detail_color::-webkit-scrollbar{display: none;}
height: 100%;
overflow-y: auto;
overflow-x: hidden;
@@ -1273,10 +1457,9 @@ export default defineComponent({
}
}
.color_setting_block{
width: calc(17.5rem*1.2);
margin: auto;
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
width: 24rem;
border-radius: calc(1rem*1.2);
overflow: hidden;
// box-shadow: 2px 2px 8px #000;
@@ -1286,14 +1469,15 @@ export default defineComponent({
box-shadow:none;
}
.chrome_color{
width: calc(17.5rem*1.2);
width: 24rem;
// height: 16.5rem*1.2);
overflow: hidden;
.vc-chrome-saturation-wrap{
height: 100%;
width: calc(16rem*1.2);
height: calc(16rem*1.2);
// width: calc(16rem*1.2);
width: 100%;
height: calc(14rem*1.2);
max-height: calc(17rem*1.2);
max-width: calc(17rem*1.2);
margin: calc(.7rem*1.2) auto;
@@ -1424,6 +1608,98 @@ export default defineComponent({
height: calc(1rem*1.2);
}
}
.color_setting_operateSingle{
text-align: center;
margin: 1rem 0;
}
.color_setting_operate{
*{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.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%;
width: 4rem;
height: 4rem;
border: solid 2px #39215b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
>div{
height: 100%;
width: 1rem;
position: relative;
pointer-events:none;
}
>div::before{
position: absolute;
content: "";
top: 0.2rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #39215b;
}
}
}
}
.color_setting_operate_input{
width: 80%;
// padding: 0 10%;
margin: 1.2rem 10%;
border-radius: 10%;
position: relative;
height: 2.5rem;
.color_setting_operate_bg{
border-radius: .5rem;
width: 100%;
height: 2.5rem;
background: #fff;
position: absolute;
}
}
.color_setting_operate_btn{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
left: 0;
width: 1rem;
height: 110%;
border: .2rem solid;
border-radius: .5rem;
cursor: pointer;
box-sizing: content-box;
z-index: 2;
&.active{
border: .3rem solid;
}
}
.color_setting_operate_btn:hover{
border: .3rem solid;
}
}
.sileder_color{
margin-top:calc(1.3rem*1.2);