fix

2025-04-01 15:25:15 +08:00
parent 70ed89049a
commit b6e5f05f06
101 changed files with 11533 additions and 1015 deletions
--- a/src/component/HomePage/index/model/deReconstruction/canvas/canvasContent.vue
+++ b/src/component/HomePage/index/model/deReconstruction/canvas/canvasContent.vue
@@ -0,0 +1,118 @@
+<template>
+	<div class="canvasContent_box">
+		<div class="canvasContent" ref="canvasScaleDom">
+			<div class="generalCanvas_center canvas" ref="canvasDom">
+				<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
+	import { Modal,message } from 'ant-design-vue';
+	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+	import { useI18n } from 'vue-i18n'
+	import { useStore } from "vuex";
+	export default defineComponent({
+		component:{},
+		setup(props,{emit}){
+			const store = useStore();
+			let {t} = useI18n()
+			let canvasType = inject('canvasType')
+			let canvasGeneral:any = inject('canvasObj')
+			const data:any = reactive({
+				canvasDom:null,
+				isShowMark:false,
+				pencilbtnStyle:{},
+				isCanva:false,
+				selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			})
+			const dataDom = reactive({
+				canvasScaleDom:null as any,
+			})
+			const createCanvas = ()=>{
+				console.log(123123,data.isCanvas)
+				if(data.isCanva)return
+				nextTick(async ()=>{
+					let width = dataDom.canvasScaleDom.offsetWidth
+					let canvasSize = {width,height:width}
+					data.isCanva = true
+					let img = data.selectObject.model.url
+					await canvasGeneral.canvasInit(data.canvasDom,canvasSize,img,'',{noErasable:true})
+					let oldCanvas = store.state.HomeStoreModule.canvasData.deReconstruction
+					if(oldCanvas)canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
+					// if(oldCanvas)canvasGeneral.canvas.loadFromJSON(oldCanvas, () => {});
+				})
+			}
+			const openMode = (data:any)=>{
+				let {yes,no} = data
+				console.log(yes,no);
+				Modal.confirm({
+						title: '是否栅格化',
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							yes()
+						},
+						onCancel(){
+							no()
+						}
+					});
+				yes()
+			}
+			const openSetData = ()=>{
+				createCanvas()
+			}
+			onMounted(()=>{
+			})
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				...toRefs(dataDom),
+				openSetData,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasContent_box{
+	height: 100%;
+	width: 100%;
+	// padding: 2rem;
+	background: #e6e6e6;
+	.canvasContent{
+		height: 100%;
+		width: 100%;
+		position: relative;
+	}
+}
+
+.generalCanvas_center{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	overflow: hidden;
+	&.canvas{
+	}
+	.editFrontBack_pencilbtn{
+		position: absolute;
+		z-index: 1;
+		border-radius: 50%;
+		border: 1px solid #000;
+		pointer-events: none;
+		transform: translate(-50%,-50%);
+	}
+	:deep(.canvas-container){
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+	}
+}
+
+</style>