更新绘画功能

2024-11-22 09:20:25 +08:00
parent fe3b89d615
commit 5d9dc7b77d
19 changed files with 3643 additions and 565 deletions
--- a/src/component/Canvas/index.vue
+++ b/src/component/Canvas/index.vue
@@ -0,0 +1,187 @@
+<template>
+	<div class="generalCanvas">
+		<div class="argument-box">
+			<argument ref="argument" v-if="canvasObj.canvas"></argument>
+		</div>
+		<div class="canvasBox">
+			<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
+			<div class="canvas">
+				<canvasContent ref="canvasContent"></canvasContent>
+			</div>
+			<div class="detail-box">
+				<detail ref="detail" v-if="canvasObj.canvas"></detail>
+			</div>
+		</div>
+		<div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div>
+	</div>
+	<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
+</template>
+<script>
+import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
+} from "vue";
+import {message} from 'ant-design-vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from "vue-i18n";
+import canvasGeneral from "@/tool/canvasGeneral";
+import tool from "./tool.vue"
+import argument from "./argument.vue"
+import detail from "./detail.vue"
+import canvasContent from "./canvasContent.vue"
+import liquefaction from "@/component/modules/liquefaction.vue";
+
+
+export default defineComponent({
+    components: {
+		tool,
+		argument,
+		detail,
+		canvasContent,
+		liquefaction,
+    },
+    setup(props,{emit}) {
+		const { t } = useI18n();
+		const store = useStore();
+		const isShowMark = ref(false)
+		const component = reactive({
+			argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
+		})
+		let liquefaction = ref(null)
+		let liquefactionData = ref()
+		let groupDashed = ref(null)//用来判断是否需要对group添加img
+		let canvasType = 'export'
+		let canvasObj = reactive(canvasGeneral)
+		provide('canvasType',canvasType)
+		provide('canvasObj',canvasObj)
+		provide('isShowMark',isShowMark)
+		const close = ()=>{
+			component.forEach((item)=>{
+				if(item.value.closeModal)item.value.closeModal()
+			})
+		}
+		
+		let expoet = ()=>{
+			console.log( canvasObj.selectExport());
+			console.log( canvasObj.allExport());
+
+		}
+		const setLiquefaction = async ()=>{//进入液化页面
+			canvasObj.getLiquefactionImgObj().then((data)=>{
+				if(data?.img){
+					liquefactionData.value = data
+					liquefaction.value.init(data.img)
+				}else {
+					message.info(t('exportModel.jsContent6'))
+					return null;
+				}
+			})
+			
+		}
+		const toolLiquefaction = ()=>{//工具点击按钮
+			setLiquefaction()
+		}
+		const submitLiquefaction = (rv)=>{//液化回参
+			canvasObj.setLiquefactionImgObj(liquefactionData.value,rv)
+			// liquefactionData.value.setSrc(rv, (value)=>{
+			// 	// liquefactionData.value.scaleToWidth(originalWidth);
+			// 	// liquefactionData.value.scaleToHeight(originalHeight);
+			// 	delete liquefactionData.value.minioUrl
+			// 	if(groupDashed.value && groupDashed.value._objects.length == 1){
+			// 		value.set({
+			// 			left:-groupDashed.value.width/2,	
+			// 			top:-groupDashed.value.height/2,
+			// 		})
+			// 		groupDashed.value.insertAt(value)
+			// 		// canvasObj.addDashedImg(value)
+			// 	}
+			// 	canvasObj.canvas.renderAll();
+			// 	canvasObj.updateCanvasState()
+			// });
+		}
+        onMounted(() => {
+		});
+		onBeforeUnmount(()=>{
+			// canvasGeneral.canvasClear()
+		})
+        return {
+			isShowMark,
+			liquefaction,
+			canvasObj,
+			close,
+			expoet,
+			toolLiquefaction,
+			submitLiquefaction,
+        };
+    },
+    data(prop) {
+        return {
+		};
+    },
+	computed: {
+	},
+    watch: {
+      
+    },
+    mounted() {},
+
+    methods: {
+		
+	},
+});
+</script>
+<style lang="less" scoped>
+.generalCanvas{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	.argument-box,
+	.canvasBox,
+	.detail-box{
+		:deep(i){
+			font-size: 2.5rem;
+			cursor: pointer;
+			width: 3rem;
+			height: 3rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-shrink: 0;
+			transition: all .3s;
+			margin-bottom: .5rem;
+			&.active{
+				border: 1px solid;
+				border-radius: .4rem;
+			}
+			&.icon-xiala{
+				transform: rotate(-90deg);
+			}
+			&.icon-xialaActive{
+				transform: rotate(90deg);
+			}
+		}
+	}
+	.argument-box{
+		margin-left: 4rem;
+		height: 4rem;
+		margin-bottom: 1rem;
+	}
+	.canvasBox{
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		.canvas{
+			flex: 1;
+			overflow: hidden;
+		}
+	}
+	.detail-box{
+		width: 20%;
+		margin-left: 1rem;
+	}
+}
+</style>