液化

src/component/HomePage/ExportModel.vue

@@ -179,7 +179,7 @@
 								<input type="file" @change="uploadImage">
 							</label>
 							<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
-						<i @click="setLiquefaction()">液化</i>
+						<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
 					</div>
 					<!-- <div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
 						<div class="exportCanvasBox_left_tool_item">
@@ -506,7 +506,7 @@ export default defineComponent({
 					canvas.loadFromJSON(oldExportCanvas, () => {});
 					isShowMark.value = false
 				}else{
-					nextTick(async ()=>{
+					await nextTick(async ()=>{
 						for (const item of arr) {
 							for (const key in allBoardData.value) {
 								if (item == key) {
@@ -588,50 +588,16 @@ export default defineComponent({
 															} else {
 																position = sketchGroupingItem[sketchXyIndex.minIndex];
 															}
+														
 														}
-														setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
-														position.height = img.height * scaleWH + margin;
-														if (key == "sketchboardFiles") {
-															if (sketchGroupingItem.length <3) {
-																sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
-															}
-															if (sketchGroupingItem.length >2) {
-																let sketchXyIndex = {
-																	maxIndex: 0,
-																	maxNum: 0,
-																	minNum: 999999,
-																	minIndex: 0,
-																};
-																sketchGroupingItem.forEach(
-																	(sketchItem,sketchIndex) => {
-																		if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
-																			sketchXyIndex.minNum = sketchItem.y + sketchItem.height
-																			sketchXyIndex.minIndex = sketchIndex;
-																		}
-																		if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
-																			sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
-																			sketchXyIndex.maxIndex = sketchIndex;
-																		}
-																	}
-																);
-																sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
-																// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
-																if (allBoardData.value[key].length == allItemIndex + 1) {
-																	maxHeight = sketchXyIndex.maxNum
-																} else {
-																	position = sketchGroupingItem[sketchXyIndex.minIndex];
-																}
-															}
-														}
-														if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
+													}
+													if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
 														}else{
 															position.x += img.width * scaleWH + margin;
 														}
-														let str = `${img.width} + ${scaleWH}`
 														img.lock_rotation = true;
 														oldKey = key;
 														resolve()
-													}
 													canvas.add(img);
 													
 												},{ crossOrigin: "Anonymous" });
@@ -1984,43 +1950,31 @@ export default defineComponent({
 		}
 
 		//液化
+		//当前选择的液化对象
+		let liquefactionData = ref(null)
 		let liquefaction = ref(null)
 		let submitLiquefaction = (rv)=>{
-
+			const originalWidth = liquefactionData.width * liquefactionData.scaleX; // 保存原始宽度
+			const originalHeight = liquefactionData.height * liquefactionData.scaleY; // 保存原始高度
+			console.log(liquefactionData);
+			liquefactionData.setSrc(rv, function() {
+				liquefactionData.scaleToWidth(originalWidth);
+				liquefactionData.scaleToHeight(originalHeight);
+				delete liquefactionData.minioUrl
+				canvas.renderAll();
+				updateCanvasState()
+			});
 		}
 		let setLiquefaction = ()=>{
-			const selectedObject = canvas.getActiveObjects();
-			if (selectedObject.length > 0) {
-				// 创建一个新的画布用于生成图片
-				const tempCanvas = new fabric.Canvas();
-				tempCanvas.setDimensions({
-				width: selectedObject.width,
-				height: selectedObject.height,
-				});
-				let cloneCount = 0;
-				selectedObject.forEach((obj) => {
-                    obj.clone((clonedObject) => {
-                        tempCanvas.add(clonedObject);
-                        clonedObject.set({ left: obj.left, top: obj.top }); // 设置位置
-                        cloneCount++;
-
-                        // 当所有对象都克隆完成后生成图片
-                        if (cloneCount === selectedObject.length) {
-                            const dataURL = tempCanvas.toDataURL();
-							console.log(dataURL);
-                            console.log('Image URL:', dataURL);
-                            // 可以根据需要使用 dataURL，例如显示在 img 标签中
-                        }
-                    });
-                });
-
-				// 生成图片的地址
-				
+			const activeObjects = canvas.getActiveObjects(); // 获取选中的对象
+			if (activeObjects.length === 1 && activeObjects[0].type === 'image') {
+				liquefactionData = activeObjects[0]
+				liquefaction.value.init(activeObjects[0])
 			} else {
 				console.log('No object selected.');
+				message.info(useI18.t('exportModel.jsContent6'))
 				return null;
 			}
-			// liquefaction.value.init()
 		}
         onMounted(() => {
 			let arr = [

src/component/HomePage/Generate.vue

@@ -174,7 +174,7 @@
 				<a-spin size="large" />
 			</div>
         </div>
-		<scaleImage ref="scaleImage" :isCanvas="true" :workspace="workspace"></scaleImage>
+		<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :workspace="workspace"></scaleImage>
 		<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
     </div>
 </template>

src/component/HomePage/MoodboardUpload.vue

@@ -440,15 +440,16 @@ export default defineComponent({
 				// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
 				let layout:any = this.$refs.layout
 				if(this.layoutList.length <= 0){
-					await this.layout()
+					// await this.layout()
+					let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
+					this.layoutList = arr
 				}
 				if(window.screen.width<1300){
 					layout.isMobile = true
 				}else{
 					layout.isMobile = false
 				}
-				// let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
-				// this.layoutList = arr
+				
 				layout.init()
 			}else{
 				message.info(this.t('MoodboardUpload.jsContent5'))
@@ -503,14 +504,12 @@ export default defineComponent({
 						class:this.moodb_className,
 					}
 					this.store.commit("setDisposeMoodboardPosition", obj);
-					let moodboardPosition = this.store.state.UploadFilesModule.moodboardPosition
 					domTurnImg(layoutCentent).then((rv)=>{
 						let file = rv
 						let param = new FormData(); 
 						param.append('inPin','0')
 						param.append('level1Type','Moodboard')
 						param.append('gender','')
-						param.append('moodboardPosition',JSON.stringify(moodboardPosition))
 						param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
 						param.append('file',file);
 						let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}

src/component/HomePage/layout.vue

@@ -29,11 +29,8 @@
 					</div>
 				</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" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content" >
+					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content" >
 						<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}) rotateZ(${item.angle}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg> 
-						<div>
-							
-						</div>
 						<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>
@@ -704,7 +701,7 @@ export default defineComponent({
 			this.layoutList = parentList
 			this.moodbList = this.moodb[parentList.length-1]
 			this.moodbClassName = this.styleObj?.class?this.styleObj?.class:[]
-			this.moodItemScale = this.layoutList[0].zoom*100
+			this.moodItemScale = (this.layoutList?.[0]?this.layoutList[0].zoom:1)*100
 
 			this.initDomStyle()
 			
@@ -750,14 +747,21 @@ export default defineComponent({
 		changeTemplateModal(){
 			this.layout = !this.layout
 		},
-		setIndex(arr:any){
-			const nums = arr.map((obj:any) => obj.num);
-			const sortedNums = [...nums].sort((a, b) => a - b);
-			GO.zIndex = sortedNums[sortedNums.length - 1] + 1
-			const numToNewValue = new Map();
-			sortedNums.forEach((num, index) => numToNewValue.set(num, index + 1));
-			arr.forEach((obj:any) => {
-				obj.num = numToNewValue.get(obj.num);
+		setIndex(styleArr:any){
+			let arr = JSON.parse(JSON.stringify(styleArr))
+			const nums = arr.map((obj:any,index:any) => {
+				obj.num = index
+				return {
+					num: obj.num,
+					zIndex: obj['z-index']?obj['z-index']:1
+				}
+			});
+			const sortedNums = nums.sort((a, b) => a.zIndex - b.zIndex);
+			
+			GO.zIndex = sortedNums.length + 1
+			// GO.zIndex = sortedNums[sortedNums.length - 1].zIndex + 1
+			sortedNums.forEach((item:any,index:any) => {
+				arr[item.num]['z-index'] = index + 1
 			});
 			return arr
 		},
@@ -788,6 +792,7 @@ export default defineComponent({
 		initStyle(dom:any,style:any){
 			if(!style)return
 			for (const [property, value] of Object.entries(style)) {
+				
 				dom.style.setProperty(property, value);
 			}
 		},
@@ -812,21 +817,19 @@ export default defineComponent({
         //提交模板
         submitTemplate() {
 			this.loadingShow = true
-			this.setIndex(this.styleObj.domStyle)//index统一排序设置值
+			this.styleObj.domStyle = this.setIndex(this.styleObj.domStyle)//index统一排序设置值
 			this.store.commit("setDisposeMoodboardPosition", this.styleObj);
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
 			nextTick().then(async ()=>{
 				let layoutCentent = document.getElementById('layoutCentent')
-				let moodboardPosition = this.store.state.UploadFilesModule.moodboardPosition
 				domTurnImg(layoutCentent).then((rv)=>{
 					let file =rv
 					let param = new FormData(); 
 					param.append('inPin','0')
 					param.append('gender','')
 					param.append('level1Type','Moodboard')
-					param.append('moodboardPosition',moodboardPosition)
 					param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
 					param.append('file',file);
 					let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}

src/component/HomePage/scaleImage.vue

@@ -130,13 +130,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref ,toRefs,computed,reactive, nextTick} from "vue";
+import { defineComponent, h, ref ,toRefs,createVNode,reactive, nextTick} from "vue";
 import { Https } from "@/tool/https";
+import { Modal } from "ant-design-vue";
 // import domTurnImg from '@/tool/domTurnImg'
 import { useStore } from "vuex";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { downloadIamge } from "@/tool/util";
 import { getCookie,setCookie } from "@/tool/cookie";
-
+import { useI18n } from "vue-i18n";
 import generalMiniCanvas from "@/component/modules/generalMiniCanvas.vue";
 export default defineComponent({
 	components:{generalMiniCanvas},
@@ -313,8 +315,24 @@ export default defineComponent({
 					rv.category = scaleImageList.value[scaleImageIndex.value]?.category
 					rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue
 					delete rv.url
-					scaleImageList.value.unshift(rv)
-					loadingShow.value = false
+					Modal.confirm({
+						title: useI18n().t('scaleImage.overlayOrNot'),
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							scaleImageList.value[scaleImageIndex.value] = rv
+							loadingShow.value = false
+							scaleImage.value = false
+						},
+						onCancel(){
+							scaleImageList.value.unshift(rv)
+							loadingShow.value = false
+							scaleImage.value = false
+						}
+					});
 				}
 			).catch(res=>{
 				loadingShow.value = false

src/component/modules/liquefaction.vue

@@ -3,7 +3,7 @@
         class="liquefaction generalModel"
         v-model:visible="liqufeaction"
         :footer="null"
-        width="50%"
+        width="78%"
         :maskClosable="false"
         :centered="true"
         :closable="false"
@@ -17,254 +17,295 @@
 		</div>
 		
 		<div class="liquefaction_center">
+			<div class="liquefaction_canvas_box">
+				<canvas id="c"></canvas>
+				<div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
+				<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div>
+			</div>
+			<div class="liquefaction_parameter">
+				<div class="liquefaction_parameter_item">
+					<div class="liquefaction_parameter_item_title">
+						<span>{{ $t('exportModel.Size') }}</span>
+						<input type="number" v-model="routes" @change="routesChange('routes')">
+					</div>
+					<div class="liquefaction_parameter_item_input">
+						<input type="range" v-model="routes" @change="routesChange('routes')">
+					</div>
+				</div>
+				<div class="liquefaction_parameter_item">
+					<div class="liquefaction_parameter_item_title">
+						<span>{{ $t('exportModel.density') }}</span>
+						<input type="number" v-model="density" @change="routesChange('density')">
+					</div>
+					<div class="liquefaction_parameter_item_input">
+						<input type="range" v-model="density" @change="routesChange('density')">
+					</div>
+				</div>
+				<div class="liquefaction_parameter_item">
+					<div class="generage_btn started_btn" @click="cancelDsign">取消</div>
+					<div class="generage_btn started_btn" @click="submit">确定</div>
+				</div>
+			</div>
 			
 		</div>
     </a-modal>
-	<!-- <div class="mark_loading" v-show="loadingShow">
-		<a-spin size="large" />
-	</div> -->
 </template>
 <script>
 import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
-import { Https } from "@/tool/https";
-import { formatTime } from "@/tool/util";
-import { setCookie, getCookie } from "@/tool/cookie";
-import { Modal, message } from "ant-design-vue";
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import allOrder from "@/component/Pay/allOrder.vue";
-import creditsDetail from "@/component/Pay/creditsDetail.vue";
-import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
 import { useI18n } from "vue-i18n";
 import { getMousePosition } from "@/tool/mdEvent";
 export default defineComponent({
     components: {
-		creditsDetail,
-		allOrder,
     },
-	emits: ['setSloganData'],
+	emits: ['submitLiquefaction'],
     setup(props,{emit}) {
-        let presentState = ref('paypal');
-        let liqufeaction = ref(false);
-        let loadingShow = ref(false);
-        let { t } = useI18n();
-        let canvas = reactive({});
-		let scale = 2;
-		let ratio = [1,1]
-		let exportWH = 512
-		let pencilbtnStyle = ref({
-			background:'',
-			width:0+'px',
-			height:0+'px',
-			display:'none',
-			left:0+'px',
-			top:0+'px',
+        // let presentState = ref('paypal');
+		let liqufeaction = ref(false);
+		let liqufeactionData = reactive({
+			routes: 90,//移动框大小
+			density: 80,//移动大小
 		})
-		let canvasBtn = reactive({
-			canvasState:'move',
-			canvasPencilWidth:{
-				pencil:4,
-				eraser:4,
+		let arrows = ref({
+			show:false,
+			domStyle:{
+				left:0,
+				top:0,
+				width:0,
+				height:0,
 			},
-			spreadState:false,
+			jiantouStyle:{
+				height:'1px',
+				transform:`translateY(-100%) rotate(${90}deg)`,
+			}
 		})
-		let canvasWH = ref(0);
-		onMounted(()=>{
-		})
-		let exportUrl = ''
-		let reverseCanvasState = ref([])//存放canvas操作
-		let normalCanvasState = ref([])//存放canvas操作
-		let canvasState = ref()//存放canvas操作
-		let keyDown = []//监听键盘的 keydown 和 keyup 事件
-		let init = (data)=>{
-			console.log(data);
-			console.log(123);
+		let canvas
+		let canvasImgData = {
+			width:0,
+			height:0,
+		}
+		let downX
+		let downY
+		let init = async (data)=>{
+			liqufeaction.value = true
+			await new Promise((resolve, reject) => {
+				nextTick(()=>{
+					resolve()
+				})
+			})
+			let img = new Image()
+			img.setAttribute('crossOrigin', 'Anonymous')
+			img.onload = () => {
+				let canvasBox = document.querySelector('.liquefaction .liquefaction_canvas_box')
+				let width = canvasBox.offsetHeight / img.height * img.width
+				canvas = document.getElementById('c')
+				canvas.width = width
+				canvas.height = canvasBox.offsetHeight
+				let optfor = false
+				const context = canvas.getContext('2d');
+				context.drawImage(img, 1, 1, canvas.width, canvas.height);
+				let imgData = context.getImageData(0, 0, canvas.width, canvas.height)
+				
+				let canvasDownX
+				let canvasDownY
+				let distance = 0
+				let angle
+				let mousedown = (event)=>{
+					let e = getMousePosition(event,false)
+					down(e)
+				}
+				let touchdown = (event)=>{
+					let e = getMousePosition(event,true)
+					down(e)
+				}
+				let down = (event)=> {
+					let canvasPosition = canvas.getBoundingClientRect()
+					let maxX = canvasPosition.width + canvasPosition.x
+					let minX = canvasPosition.x
+					let maxY = canvasPosition.height + canvasPosition.y
+					let minY = canvasPosition.y
+					if (event.clientX > minX && event.clientX < maxX && event.clientY > minY && event.clientY < maxY) {
+						downX = event.clientX
+						downY = event.clientY
+						canvasDownX = downX - minX
+						canvasDownY = downY - minY
+					}
+					optfor = true
+					arrows.value.jiantouStyle.height = distance + 'px'
+					arrows.value.jiantouStyle.left = event.clientX - canvasBox.getBoundingClientRect().left + 'px'
+					arrows.value.jiantouStyle.top = event.clientY - canvasBox.getBoundingClientRect().top + 'px'
+					arrows.value.domStyle.width = liqufeactionData.routes * 2 + 'px'
+					arrows.value.domStyle.height = liqufeactionData.routes * 2 + 'px'
+					arrows.value.domStyle.left = event.clientX - canvasBox.getBoundingClientRect().left - liqufeactionData.routes + 'px'
+					arrows.value.domStyle.top = event.clientY - canvasBox.getBoundingClientRect().top - liqufeactionData.routes + 'px'
+					arrows.value.show = true
+					let mouseup = ()=>{
+						if(!optfor)return
+						if(distance != 0){
+							let {upDownX, upDownY} = calculateTargetCoordinates(canvasDownX, canvasDownY,distance,angle)
+							liquify(imgData, canvasDownX, canvasDownY, upDownX, upDownY, liqufeactionData.routes, liqufeactionData.density)
+						}
+						distance = 0
+						arrows.value.show = false
+						context.putImageData(imgData, 0, 0);
+						optfor = false
+						canvasBox.removeEventListener('mousemove', mouseMove);
+						canvasBox.removeEventListener('touchmove', touchmove);
+						document.removeEventListener('mouseup', mouseup);
+						document.removeEventListener('touchend', mouseup);
+					}
+					canvasBox.addEventListener('mousemove', mouseMove);
+					canvasBox.addEventListener('touchmove', touchmove);
+					document.addEventListener('mouseup', mouseup);
+					document.addEventListener('touchend', mouseup);
+				}
+				let mouseMove = (event)=>{
+					let e = getMousePosition(event,false)
+					move(e)
+				}
+				let touchmove = (event)=>{
+					let e = getMousePosition(event,true)
+					move(e)
+				}
+				let move = function (moveEvent) {
+					let height = distanceFun(downX , downY , moveEvent.clientX , moveEvent.clientY)
+					if(optfor){
+						let height = distanceFun(downX , downY , moveEvent.clientX , moveEvent.clientY)
+						angle = angleFun(downX , downY , moveEvent.clientX , moveEvent.clientY)
+
+						if(height < liqufeactionData.routes){
+							distance = height
+							arrows.value.jiantouStyle.height = height + 'px'
+						}
+						arrows.value.jiantouStyle.transform = `translateY(-100%) rotate(${angle+90}deg)`
+						
+					}
+				}
+				// canvas.addEventListener('mousedown', down);
+				canvasBox.addEventListener('mousedown', mousedown);
+				canvasBox.addEventListener('touchstart', touchdown);
+			}
+			img.src = data._element.src
         }
-		let canvasKeyDown = (event) => {
-			if(keyDown.indexOf(event.key)>-1){
-			}else{
-				keyDown.push(event.code)
-				if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
-					historyState('reverse')
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
-					historyState('')
+		let distanceSqr = (x1, y1, x2, y2) => sqr(x1 - x2) + sqr(y1 - y2); 
+		let sqr = (x) => x * x;; 
+		let eachCircleDot = (imageData, ox, oy, r, callback)=>{
+			var imgWidth = imageData.width,
+				imgHeight = imageData.height,
+				data = imageData.data,
+				left = ox - r,
+				right = ox + r,
+				top = oy - r,
+				bottom = oy + r,
+				dotRedOffset, dotGreenOffset, dotBlueOffset, alphaOffset;
+			for (var x = left; x < right; x++){
+				for (var y = top; y < bottom; y++){
+					if (distanceSqr(x, y, ox, oy) <= sqr(r)) {
+
+						dotRedOffset = y * imgWidth * 4 + x * 4;
+						dotGreenOffset = dotRedOffset + 1;
+						dotBlueOffset = dotGreenOffset + 1;
+						alphaOffset = dotBlueOffset + 1;
+
+						callback(
+							// 当前点的坐标
+							{ x: x, y: y },
+							// 点的RGBA四个分量对应字节的下标
+							{
+								r: dotRedOffset,
+								g: dotGreenOffset,
+								b: dotBlueOffset,
+								a: alphaOffset,
+							},
+							// 传进来的ImageData的data部分
+							data
+
+						);
+
+					}
+
 				}
 			}
 		}
-		let canvasKeyUp = (event) =>{
-				keyDown = keyDown.filter(function(item) {
-					return event.code !== item;
-				})
-				
+		let copyImageDataBuff = (imgData)=>{
+			var data = imgData.data,
+				imgDataBuff = [];
+			for (var i in data){
+				imgDataBuff[i] = data[i];
 			}
-		let clearCanvas = ()=>{
-		    canvasBtn.canvasState = 'move'
-		    canvasBtn.spreadState = false
-			document.removeEventListener("keydown", canvasKeyDown);
-			document.removeEventListener("keyup", canvasKeyUp);
+			return imgDataBuff;
 		}
-		let rgba = 'rgba(0, 0, 0, 1)'
-		let mouseMove = (event)=>{
-			let e = getMousePosition(event,false)
-			setCanvasMove(e)
+		let moveDot = (imgData, dataBuff, x, y, srcX, srcY)=> {
+
+			var imgWidth = imgData.width,
+				imgHeight = imgData.height,
+				data = imgData.data;
+
+			// // 进行边界检查，确保不超出图像范围
+			x = Math.max(0, Math.min(Math.round(x), imgWidth - 1));
+			y = Math.max(0, Math.min(Math.round(y), imgHeight - 1));
+			srcX = Math.max(0, Math.min(Math.round(srcX), imgWidth - 1));
+			srcY = Math.max(0, Math.min(Math.round(srcY), imgHeight - 1));
+			srcX = Math.round(srcX);
+			srcY = Math.round(srcY);
+
+			var targetStartOffset = y * imgWidth * 4 + x * 4,
+				srcStartOffset = srcY * imgWidth * 4 + srcX * 4;
+			for (var i = 0; i < 4; i++)
+				data[targetStartOffset + i] = dataBuff[srcStartOffset + i];
 		}
-		let touchmove = (event)=>{
-			let e = getMousePosition(event,true)
-			setCanvasMove(e)
-		}
-		let setCanvasMove = (event)=>{
-			if(canvas.isDrawingMode){
-				canvas.setCursor('none');
-			}
-			let canvasCenterBox = document.querySelector(".liquefaction .exportCanvasBox_center_box");
-			if(!canvasCenterBox)return
-			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
-			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
-			pencilbtnStyle.value.left = parentX + "px"
-			pencilbtnStyle.value.top =  parentY+'px'
-		}
-		let setOperation = (str)=>{
-			canvasBtn.canvasState = str
-			if(str == 'move'){
-				setMove()
-				pencilbtnStyle.value.display = `none`
-			}else if(str == 'pencil'){
-				setPencil()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'eraser'){
-				setEraser()
-				pencilbtnStyle.value.display = `block`
-			}
-		}
-		let setMove = ()=>{
-			canvas.isDrawingMode = false
-			canvas.forEachObject((obj) =>obj.selectable = true);
-		}
-		let setPencil = ()=>{
-			canvas.isDrawingMode = true//开启绘画模式
-			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			canvas.freeDrawingBrush.color = rgba
-			pencilbtnStyle.value.background = rgba
-			canvas.freeDrawingBrush.isEraser = false
-			setPencilWidth()
-		}
-		let setEraser = ()=>{
-			canvas.isDrawingMode = true
-			let eraser = new fabric.EraserBrush(canvas)
-            canvas.freeDrawingBrush = eraser
-			canvas.requestRenderAll();
-			canvas.freeDrawingBrush.isEraser = true
-			pencilbtnStyle.value.background = `rgb(255,255,255)`
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			setPencilWidth()
-		}
-		let deleteObj = ()=> {
-			// if(!canvas.getActiveObjects()){
-			// 	return
-			// }
-			let target = canvas.getActiveObjects()
-			target.forEach((item)=>{
-				canvas.fxRemove(item, {
-					onComplete(){
-					canvas.discardActiveObject(); // 丢弃当前选中的对象
-					canvas.renderAll(); // 重新渲染 Canvas
-					}
-				})
-				canvas.FX_DURATION = 300
-			})
-		}
-		let setTimeOutWidth
-		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOutWidth)
-			setTimeOutWidth = setTimeout(()=>{
-				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
-				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-			},300)
-		}
-		let updateCanvasState = (str) =>{
-			if(str != 'mouseUp'){
-			}
-			const canvasAsJson = JSON.stringify(canvas.toJSON());
-			normalCanvasState.value.push(canvasAsJson);
-		}
-		//撤回
-		let historyState = (str)=> {
-			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
-				let obj = reverseCanvasState.value.pop()
-				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
-				canvasState.value = obj 
-				normalCanvasState.value.push(obj);
-			}else if(str == '' && normalCanvasState.value.length > 1){
-				let obj = normalCanvasState.value.pop()
-				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
-				reverseCanvasState.value.push(obj);
-			}else{
-				return
-			}
-			canvas.loadFromJSON(canvasState.value, () => {});
-		}
-		let setSubmit = ()=>{
-			var allObjects = canvas.getObjects('path');
-			// if(allObjects.length == 0){
-			// 	return message.info(t('addDetails.jsContent1'))
-			// }
-			var canvasDom = document.createElement("canvas");
-			let exportCanvas = new fabric.Canvas(canvasDom, {
-				backgroundColor: "rgba(255, 255, 255,1)",
-				width: exportWH * ratio[0],
-				height: exportWH * ratio[1],
-				isDrawingMode: false, // 开启绘图模式
+		let liquify = (imgData, cx, cy, mx, my, r, strenth) => {
+			var imgDataBuff = copyImageDataBuff(imgData);
+			eachCircleDot(imgData, cx, cy, r, function (posi) {
+				var tx = posi.x,
+					ty = posi.y;
+				var u = transFormula(cx, cy, mx, my, tx, ty, r, strenth);
+				moveDot(imgData, imgDataBuff, tx, ty, u.x, u.y);
+				function transFormula(cx, cy, mx, my, tx, ty, r, strenth) {
+					strenth = strenth || 100;
+					var relativity = sqr(r) - distanceSqr(tx, ty, cx, cy);
+					var distanceMovedSqr = distanceSqr(mx, my, cx, cy);
+					var rate = sqr(relativity / (relativity + distanceMovedSqr * (100 / strenth)));
+					var ux = tx - rate * (mx - cx),
+						uy = ty - rate * (my - cy);
+					return { x: ux, y: uy };
+				}
 			});
-			canvas.backgroundImage.clone((back)=>{
-				back.set({
-					scaleX:1,
-					scaleY:1,
-					left:back.left*scale,
-					top:back.top*scale ,
-				})
-				exportCanvas.backgroundImage = back
-				allObjects.forEach((item,index)=>{
-					// let obj = fabric.util.object.clone(item);
-					if(item.type == 'circle')return
-					let obj 
-					item.clone((cloned)=>{
-						obj = cloned
-					})
-					obj.set(
-						{
-							scaleX:(item.scaleX?item.scaleX:1)*scale,
-							scaleY:(item.scaleY?item.scaleY:1)*scale,
-							left:item.left*scale,
-							top:item.top*scale,
-						}
-					)
-					exportCanvas.add(obj)
-				})
-				let data = exportCanvas.toDataURL('jpg')
-				cancelDsign()
-				clearCanvas()
-				emit('setSloganData',data)
-			})
+		}
+		let distanceFun = (x1, y1, x2, y2) => {
+			return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
+		}
+		let angleFun = (x1, y1, x2, y2) => {
+			return Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI);
+		}
+		let calculateTargetCoordinates = (x1, y1, distance, angleDegrees) => {
+			let angleRad = angleDegrees * (Math.PI / 180);
+			let x2 = x1 + distance * Math.cos(angleRad);
+			let y2 = y1 + distance * Math.sin(angleRad);
+			return { upDownX: x2, upDownY: y2 };
 		}
 		let cancelDsign = ()=>{
-			document.removeEventListener('keydown',canvasKeyDown);
-			document.removeEventListener('keyup', canvasKeyUp);
 			liqufeaction.value = false
 		}
+		let routesChange = (str)=>{
+			liqufeactionData[str] = Math.round(liqufeactionData[str]/10)*10;
+			if (liqufeactionData[str] < 10) {
+				liqufeactionData[str] = 10; // 设置为最小值
+			} else if (liqufeactionData[str] > 100) {
+				liqufeactionData[str] = 100; // 设置为最大值
+			}
+		}
+		let submit = ()=>{
+			emit('submitLiquefaction',canvas.toDataURL('image/png'))
+			cancelDsign()
+		}
         return {
-            presentState,
             liqufeaction,
-			loadingShow,
-            t,
-			pencilbtnStyle,
-			...toRefs(canvasBtn),
+			...toRefs(liqufeactionData),
+			arrows,
 			init,
-			setOperation,
-			setPencilWidth,
-			historyState,
-			setSubmit,
 			cancelDsign,
+			routesChange,
+			submit,
         };
     },
     data() {
@@ -279,6 +320,83 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .liquefaction {
-    
+	background: #f9fafb;
+    .liquefaction_center{
+		height: 100%;
+		display: flex;
+		align-items: center;
+		.liquefaction_canvas_box{
+			background: #fff;
+			height: 90%;
+			width: 80%;
+			text-align: center;
+			// overflow-x: auto;
+			position: relative;
+			overflow-y: hidden;
+		}
+		.liquefaction_parameter{
+			padding-top: 5rem;
+			height: 100%;
+			flex: 1;
+			.liquefaction_parameter_item{
+				display: flex;
+				flex-direction: column;
+				.liquefaction_parameter_item_title{
+					display: flex;
+					justify-content: space-between;
+					input{
+						width: 30%;
+						text-align: right;
+					}
+				}
+				.liquefaction_parameter_item_input{
+					width: 100%;
+					input{
+						width: 100%;
+					}
+				}
+			}
+			.liquefaction_parameter_item:last-child{
+				margin-top: 20px;
+				text-align: center;
+				div{
+					margin-bottom: 1rem;
+				}
+			}
+		}
+		.moveDom {
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			box-sizing: border-box;
+			border: 1px solid;
+			position: absolute;
+			pointer-events: none;
+		}
+
+		.jiantouDom {
+			position: absolute;
+			width: 2px;
+			height: 1px;
+			background-color: #000;
+			transform-origin: center bottom;
+			transform: translateY(-100%);
+			pointer-events: none;
+		}
+
+		.jiantouDom::before {
+			content: "";
+			display: block;
+			position: absolute;
+			width: 10px;
+			height: 10px;
+			left: 50%;
+			transform: translateX(-50%) rotate(45deg);
+			border-top: 2px solid #000;
+			border-left: 2px solid #000;
+			pointer-events: none;
+		}
+		
+	}
 }
 </style>