aida_front/src/component/Canvas/canvasContent.vue

<template>
	<div class="canvasContent_box">
		<div class="canvasContent" ref="canvasScaleDom">
			<!-- <div v-if="isPresuppose" class="generalCanvas_center presuppose">
				<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
				<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
				<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
			</div> -->
			<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,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
	import { Modal,message } from 'ant-design-vue';
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
	import { useStore } from "vuex";
	import { useI18n } from 'vue-i18n'
	export default defineComponent({
		component:{},
		setup(){
			const store = useStore();
			let {t} = useI18n()
			let canvasType = inject('canvasType')
			let canvasGeneral:any = inject('canvasObj')
			const data:any = reactive({
				canvasScaleDom:null,
				canvasDom:null,
				isShowMark:false,
				pencilbtnStyle:{},
				
			})
			const createCanvas = (canvasSize:any)=>{
				return new Promise(async (resolve,reject)=>{
					data.isPresuppose = false
					await nextTick(async ()=>{
						await canvasGeneral.canvasInit(data.canvasDom,{
							width:data.canvasDom.offsetWidth,
							height:data.canvasDom.offsetHeight,
						},'','','',2000)
						resolve('')	
					})
				})
				
			}
			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()
				
			}
			// canvasGeneral.openMode.fun = openMode
			const setPresuppose = (presuppose:any)=>{
				let canvasDomSize = {
					width:data.canvasScaleDom.offsetWidth,
					height:data.canvasScaleDom.offsetHeight,
				}
				let width,height
				let scale = [0,0]
				if(presuppose == '16/9'){
					// scale[0] = 16
					// scale[1] = 9
					width = 1600
					height = 900
				}else if(presuppose == '1/1'){
					// scale[0] = 1
					// scale[1] = 1
					width = 1000
					height = 1000
				}else if(presuppose == '9/16'){
				    // scale[0] = 9
					// scale[1] = 16
					width = 900
					height = 1600
				}
				// let mbHeight = canvasDomSize.width / scale[0] * scale[1]
				// if(mbHeight < canvasDomSize.height){
				// 	width = canvasDomSize.width
				// 	height = mbHeight
				// }else{
				// 	width = canvasDomSize.height / scale[1] * scale[0]
				// 	height = canvasDomSize.height
				// }
				let canvasSize = {width,height}
				createCanvas(canvasSize)
			}
			const openSetData =async ()=>{
				let oldCanvas = store.state.HomeStoreModule.canvasData?.canvas
				if(oldCanvas){
					await canvasGeneral.createCanvas(data.canvasDom,{
							width:data.canvasDom.offsetWidth,
							height:data.canvasDom.offsetHeight,
						},2000)
					canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
				}else{
					await createCanvas({})
				}
			}
			onMounted(()=>{
			})
			return {
				canvasGeneral,
				...toRefs(data),
				setPresuppose,
				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{
	}
	&.presuppose{
		display: flex;
		align-items: center;
		justify-content: center;
		> div{
			border: 1rem solid #6b6b6b;
			color: #6b6b6b;
			display: flex;
			margin-right: 2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3rem;
			font-weight: 900;
			cursor: pointer;
			border-radius: 4px;
			&:last-child{
				margin-right: 0;
			}
			&.presuppose16-9{
				height: calc(30rem / 16 * 9);
				width: 30rem;
			}
			&.presuppose1-1{
				height: 30rem;
				width: 30rem;
			}
			&.presuppose9-16{
				height: 30rem;
				width: calc(30rem / 16 * 9);
			}
		}
	}
	.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>