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

2024-05-16 09:41:16 +08:00
parent 4d86e782e6
commit 051b9e4f38
24 changed files with 1561 additions and 262 deletions
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -49,10 +49,15 @@
 								</div>
 							</div>
 						</div> -->
+						<!-- <div class="color_setting_operateSingle">
+							<div class="started_btn" @click="setOperate">
+								{{ colorList[selectIndex]?.gradient?.gradientShow? '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>线性</div>
+									<div>Alignment</div>
 								</div>
 								<div class="operate_item_box operate_item_angle">
 									<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event)" @touchstart="mousedownGradientAngle($event)">
@@ -305,31 +310,8 @@ 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 {
@@ -370,7 +352,6 @@ export default defineComponent({
 		},
        //选择不同的色块
        selectColorItem(index,color){
-			console.log(this.colorList);
 			let hex
 			if(color?.rgba?.r){
 				hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
@@ -612,9 +593,15 @@ export default defineComponent({
            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].rgba = ele.rgbValue
+				this.colorList[index].gradient = ele.gradient
+				// if(ele.gradient) this.colorList[index].gradient = ele.gradient
 				// if(ele.gradient) this.colorList[index].gradient = ele.gradient
            });
-            this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
+			if(this.colorList[0]?.gradient && this.colorList[0]?.gradient?.selectIndex>-1 && this.colorList[0]?.gradient?.gradientShow){
+				this.selectColor = {rgba:this.colorList[0].gradient.gradientList[0].rgba,hex:hex} //顔色选择器默认颜色
+			}else{
+				this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
+			}
            this.store.commit('setColorboardList',colorList)
        },
 		addGradient(event){
@@ -680,6 +667,29 @@ export default defineComponent({
 			}
 			window.addEventListener('mousemove',mousedownGradientAngle)
 			window.addEventListener('mouseup',mouseupGradientAngle)
+		},
+		setOperate(){
+			// 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.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)
+			this.setColorboardList(colorList)
 		}
    }
 })
@@ -858,7 +868,6 @@ export default defineComponent({
 					}
 				}
 				.color_setting_block{
-					width: calc(17.5rem*1.2);
 					margin: auto;
 					background: linear-gradient(70deg, #eee4f3, #f3f4e6);

@@ -871,14 +880,16 @@ export default defineComponent({
 						box-shadow:none;
 					}
 					.chrome_color{
-						width: calc(17.5rem*1.2);
+						// width: calc(17.5rem*1.2);
+						width: 24rem;
 						// height: 16.5rem;
 						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;
@@ -1059,9 +1070,11 @@ export default defineComponent({
 						}
 						
 					}
-					
+					.color_setting_operateSingle{
+						text-align: center;
+						margin: 1rem 0;
+					}
 					.color_setting_operate{
-						margin-top: 2rem;
 						*{
 							-webkit-touch-callout: none; /* iOS Safari */
 							-webkit-user-select: none; /* Safari */
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -138,10 +138,10 @@
 				<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
 				<div
 					class="delete_like_file_block left1"
-					:class="[driver__.driver?'hideEvents':'']"
+					:class="[driver__.driver?'hideEvents':'',]"
 				>
 					<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-					<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
+					<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
 				</div>
 				<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 					<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
@@ -933,7 +933,8 @@ export default defineComponent({
                height: calc(10rem*1.2);
            }
 			&:hover .delete_like_file_block{
-				display: block;
+				// display: block;
+				opacity: 1;
 			}
 			
        }
--- a/src/component/HomePage/PrintboardUpload.vue
+++ b/src/component/HomePage/PrintboardUpload.vue
@@ -136,7 +136,7 @@
 							:class="[driver__.driver?'hideEvents':'']"
 						>
 							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-							<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
+							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
 						</div>
 						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
--- a/src/component/HomePage/RobotAssist.vue
+++ b/src/component/HomePage/RobotAssist.vue
@@ -25,7 +25,7 @@
 								class="delete_like_file_block"
 							>
 								<i v-if="imgItem.id == null" class="fi fi-rr-heart" @click.stop="likeFile(imgItem,imgIndex,index)"></i>
-								<i v-else class="fi fi-sr-heart" @click.stop="likeFile(imgItem,imgIndex,index)"></i>
+								<i v-else class="fi fi-sr-heart" :adminLike="!!imgItem.id" @click.stop="likeFile(imgItem,imgIndex,index)"></i>
 							</div>
 							<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 								<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(item.img,imgIndex,index)"></i>
@@ -469,8 +469,14 @@ export default defineComponent({
 					overflow: hidden;
 					margin: 0 5%;
 					margin-bottom: 5%;
+					.delete_like_file_block{
+						cursor: pointer;
+						width: 2rem;
+						height: 2rem;
+					}
 					&:hover .delete_like_file_block{
-						display: block;
+						// display: block;
+						opacity: 1;
 					}
 				}
 				img{
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -166,7 +166,7 @@
 							class="delete_like_file_block left1"
 						>
 							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-							<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
+							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like"  @click.stop="likeFile(item,'noLike')"></i>
 						</div>
 						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
--- a/src/component/HomePage/collectionModal.vue
+++ b/src/component/HomePage/collectionModal.vue
@@ -73,6 +73,7 @@ import { Https } from "@/tool/https";
 import {useStore} from 'vuex'
 import { openGuide,driverObj__ } from "@/tool/guide";
 import GO from "@/tool/GO";
+import {setGradual} from '@/tool/util'
 import { useI18n } from 'vue-i18n'
 // import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
 export default defineComponent({
@@ -96,7 +97,7 @@ export default defineComponent({
 		let position:any = computed(()=>{
 			return store.state.Workspace.workspacePosition
 		})
-		let showCollectionModal=ref(false)
+		let showCollectionModal:any=ref(false)
 		let collectionStep=ref(1)
 		provide('driver__',driver__)
 		let isShowMark = ref(false)
@@ -150,6 +151,12 @@ export default defineComponent({
 			
 			if(this.collectionStep == 3){
 				if(colorBoards.length >= 1){
+					colorBoards.forEach((colorItem:any) => {
+						if(colorItem.gradient){
+							colorItem.gradient.colorImg = setGradual(colorItem.gradient,320,700)
+						}
+					});
+					this.store.commit('setColorboardList',colorBoards)
 				}else{
 					message.info(this.$t('collectionModal.jsContent3'))
 					return
@@ -312,7 +319,6 @@ export default defineComponent({
 				.catch((res) => {
 					this.isShowMark = false
 				});
-			

        }
    }
--- a/src/component/HomePage/layoutMobile.vue
+++ b/src/component/HomePage/layoutMobile.vue
@@ -28,7 +28,7 @@
 				</div>
 				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
 					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @touchstart="setpitch(item,index)" ref="content" >
-						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'zoom':item.zoom}" draggable="false" v-modelImg> 
+						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}" draggable="false" v-modelImg> 
 						<ul v-show="item.setPitch" class="layout_btn" >
 							<li class="layout_btn_top" v-compile.stop="'top'"></li>
 							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
@@ -317,21 +317,22 @@ export default defineComponent({
 		},
 		//操作旋转
 		rotote:{
-			mounted(el){
+			mounted(el,compile){
 				let mouse = true;
 				let angle :any = 0
 				let num:any
 				let x = 0
 				let y = 0
 				let elParent = el.parentNode.parentNode
-				if(document.defaultView){
-					let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
-					num = Number(transform[3])
-				}
+				
 				// 添加鼠标按下事件监听器
 				el.addEventListener('touchstart', (e:any) => {
 					e.stopPropagation()
 					mouse = true;
+					if(document.defaultView){
+						let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
+						num = Number(transform[3])
+					}
 					// let eX = (e.pageX - el.offsetLeft)  + el.offsetLeft
 					// let eY = elParent.offsetTop + el.offsetTop
 					var info = el.getBoundingClientRect();
@@ -345,7 +346,14 @@ export default defineComponent({
 						let x:any = e.targetTouches[0].clientX - X
 						let y:any = Y - e.targetTouches[0].clientY
 						angle = Math.atan2(x,y)*(180 / Math.PI)
-						elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
+						let instance:any = compile.instance
+						instance.layoutList.forEach((item:any) => {
+							if(item.setPitch){
+								angle = angle.toFixed(2)
+								item.angle = angle
+							}
+						});
+						// elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
 						el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
 					}
 					});
@@ -357,40 +365,6 @@ export default defineComponent({
 						// y = e.pageY
 					});
 				});
-				//缩放
-				let timeSwitch = true
-				el.parentNode.addEventListener('mousemove', (e:any) => {
-					el.parentNode.addEventListener('mousewheel',(e:any) => {
-						if(timeSwitch){
-							timeSwitch = false
-							if((e as WheelEvent).deltaY > 0){
-								if(num <= 1){
-									num -= 0.05
-								}else{
-									num -= 0.1
-								}
-							}else{
-								//放大
-								if(num <= 1){
-									num += 0.05
-								}else{
-									num += 0.1
-								}
-							}
-							if(num >= 3){
-								num = 3
-							}else if (num < .2){
-								num = .2
-							}
-							setTimeout(() => {
-								timeSwitch = true
-							}, 100);
-							elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
-						}
-						
-						
-					});
-				});
 			}
 			
 		},
@@ -600,7 +574,11 @@ export default defineComponent({
 				v.setPitch = false
 			})
 			this.layoutList = parentList
-			
+			this.layoutList[0].setPitch = true
+			this.layoutList[0].zoom = this.layoutList[0].zoom?this.layoutList[0].zoom:1
+			this.moodItemScale = this.layoutList[0].zoom*100
+			this.moodIndex = 0
+
 			this.moodbList = this.moodb[parentList.length-1]
 			this.moodbClassName = this.moodb_className
 		},
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -23,7 +23,7 @@
 			<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
 			<div class="img_operate_block">
 				<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
-				<i v-else class="fi fi-sr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
+				<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
 			</div>