aida_front/src/component/Canvas/tool.vue

<template>
   <div class="canvasTool">
		<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
		<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
		<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
		<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture'}"></i>
		<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
		<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
		<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
		<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
		<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
		<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
		<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
		<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
		<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
		<div class="label_item uploadImage">
			<i class="icon fi fi-br-upload" ></i>
			<input type="file" @change="uploadImage">
		</div>
		<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
		<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
		<div class="btnModal" v-show="isMove" :style="moveStyle">
			<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
			<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
			<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
			<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
			<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
			<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
import {base64ToFile} from '@/tool/util'
import { Https } from "@/tool/https";
	export default defineComponent({
		component:{},
		emits:['toolLiquefaction'],
		setup(props,{emit}){
			let canvasGeneral:any = inject('canvasObj')
			let isShowMark:any = inject('isShowMark')
			const data:any = reactive({
				isMove:false,
				moveStyle:{},
			})
			const uploadImage = (event:any)=>{
				isShowMark.value = true
				const file = event.target.files[0];
				let input = event.target
				setOperation('movePosition')
				if (file) {
					const reader = new FileReader();
					reader.onload = (e:any) => {
						let file = base64ToFile(e.target.result,'upload')
						let formData = new FormData();
						formData.append("file", file);
						let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
						Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
							rv.imgUrl = rv.minioUrl
							isShowMark.value = false
							canvasGeneral.addImage(rv)
						})
						input.value = ''
					};
					reader.readAsDataURL(file);
				}
			}
			const historyState = (str:any)=>{
				canvasGeneral.historyState(str)
			}
			const setOperation = (str:any)=>{
				canvasGeneral.setOperation(str)
			}
			const openMore = (e:any)=>{
				data.isMove=!data.isMove
				if(data.isMove){
					let domPoint = e.target.getBoundingClientRect()
					let domParentPoint = e.target.parentElement.getBoundingClientRect()
					const left = domPoint.left - domParentPoint.left;
					const top = domPoint.top - domParentPoint.top;

					data.moveStyle.top = top + 'px'
					data.moveStyle.left = left + domPoint.width + 2 + 'px'
				}
			}
			const setMore = ()=>{
				data.isMove = false
			}
			let setLiquefaction = ()=>{
				emit('toolLiquefaction')
			}
			document.addEventListener('click',setMore)
			const closeModal = ()=>{
				document.removeEventListener('click',setMore)
			}
			return {
				canvasGeneral,
				...toRefs(data),
				uploadImage,
				historyState,
				setOperation,
				openMore,
				closeModal,
				setLiquefaction,
			}
		}
	});
</script>

<style lang='less' scoped>
.canvasTool::-webkit-scrollbar{
	display: none;
}
.canvasTool{
	display: flex;
	flex-direction: column;
	position: relative;
	align-items: center;
	overflow-y: auto;
	&.leftAlign{
		justify-content: flex-start;
	}
	&.leftAlign{
		justify-content: flex-start;
	}
	
	.uploadImage{
		width: 3rem;
		height: 3rem;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		i{
			zoom:.8;
		}
		input{
			height: 0;
			width: 0;
			border: none;
		}
	}
	.uploadImage{
		position: relative;
		input{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			opacity: 0;
			z-index: 2;
			cursor: pointer;
		}
	}
	.btnModal{
		position: absolute;
		z-index: 2;
		background: #fff;
		top: 0;
		border: 1px solid;
		display: flex;
		padding: .5rem 1rem;
		border-radius: 4px;
	}
}

</style>