aida_front/src/component/modules/generalMiniCanvas.vue

<template>
    <div class="generalMiniCanvas">
		<div class="addDetails_canvasCenter">
			<div class="generalMiniCanvas_input generalMiniCanvas_item" :class="{spread:spreadState}">
				<div class="generalMiniCanvas_input_item brushwork" v-show="canvasState == 'pencil'">
					<span >{{ $t('exportModel.Brushwork') }}:</span>
					<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
						style="width: 20rem"
						@change="brushworkChange"
						>
						<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
							<img :src="item.url" alt="">
						</a-select-option>
					</a-select>
				</div>
				<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation' && canvasState != 'movePosition' && canvasState != 'zoomIn' && canvasState != 'zoomOut' && brushworkValue != 'RibbonBrush' && brushworkValue != 'LongfurBrush')">
					<span>{{ $t('exportModel.Size') }}</span>
					<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
				</div>
				<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
					<span>{{ $t('exportModel.Size') }}</span>{{ canvasPencilWidth.routes }}
					<input type="range" @change="routesChange('routes')" min="1" max="100" v-model="canvasPencilWidth.routes">
				</div>
				<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
					<span>{{ $t('exportModel.density') }}</span>
					<input type="range" @change="routesChange('density')" min="1" max="100" v-model="canvasPencilWidth.density">
				</div>
				<div class="generalMiniCanvas_input_item" v-show=" canvasState == 'pencil'">
					<span>{{ $t('exportModel.Color') }}</span>
					<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
				</div>
				
			</div>
			<div class="exportCanvasBox_center_data">
				<div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}">
					<!-- <div @click="setOperation('')" class="generalMiniCanvas_btn_item">
						<div>新增</div>
					</div> -->
					<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
					<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
					<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasState == 'movePosition'}"></i>
					<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
					<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
					<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
					<!-- <i class="icon iconfont icon-IC-yehua" @click="setOperation('liquidation')"></i> -->
					<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
					<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
					<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasState == 'zoomIn'}"></i>
					<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasState == 'zoomOut'}"></i>
				</div>
				
				<div class="exportCanvasBox_center_box">
					<div class="exportCanvasBox_center">
						
					</div>
					<!-- <div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
					<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div> -->
					<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
				</div>
			</div>
			
		</div>
		<div class="exportCanvasBox_submit" @click="setSubmit(false)">
			<div class="started_btn">
				{{ $t('addDetails.submit') }}
			</div>
		</div>
		<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
	</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, 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 canvasGeneral from "@/tool/canvasGeneral";
import { getMousePosition } from "@/tool/mdEvent";
import liquefaction from "@/component/modules/liquefaction.vue";
export default defineComponent({
    components: {
		creditsDetail,
		allOrder,liquefaction
    },
	emits: ['submitBase64Data'],
	props: {
		imgUrl: {
			type: String,
			default: ''
		},
	},
	// watch: {
	// 	// imgUrl: function(newVal, oldVal) {
	// 	// 	console.log(newVal);
	// 	// 	// 当propertyName数据发生变化时，执行相应的操作
	// 	// }
	// 	imgUrl(newVal, oldVal) {
	// 		console.log(`imgUrl changed from ${oldVal} to ${newVal}`);
	// 	},
	// },
    setup(props,{emit}) {
        let presentState = ref('paypal');
        let showPayOrder = 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 canvasBtn = reactive({
			canvasState:'move',
			canvasPencilWidth:{
				pencil:20,
				eraser:20,
				routes:30,
				density:30,
			},
			canvasPencilColor:'#000000',
			spreadState:false,
		})
		let canvasWH = ref(0);
		let arrows = ref({
			show:false,
			domStyle:{
				left:0,
				top:0,
				width:0,
				height:0,
			},
			jiantouStyle:{
				height:'1px',
				transform:`translateY(-100%) rotate(${90}deg)`,
			}
		})
		watch(
		() => props.imgUrl,  
		(newValue, oldValue) => {
			init()
		})
		
		onMounted(()=>{
			init()
		})
		onBeforeUnmount(()=>{
			canvasGeneral.canvasClear()
		})
		let reverseCanvasState = ref([])//存放canvas操作
		let normalCanvasState = ref([])//存放canvas操作
		let canvasState = ref()//存放canvas操作
		let keyDown = []//监听键盘的 keydown 和 keyup 事件
		let isMovePostion = false
		let init = ()=>{
			normalCanvasState.value = []
			reverseCanvasState.value = []
            showPayOrder.value = true;
			ratio = [1,1]
			nextTick(()=>{
				let canvasBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center");
				document.removeEventListener('mousemove', mouseMove);
				document.removeEventListener('touchmove', touchmove);

				let img = new Image();
				img.onload = function(){
					loadingShow.value = true
					let height = canvasBox.offsetHeight;
					canvasWH.value = height
					// canvasBox.style.width = height+'px'
					let wScale = 1
					let hScale = 1
					if(img.width>img.height){
						hScale = img.height/img.width
						exportWH = img.width
					}else{
						wScale = img.width/img.height
						exportWH = img.height
					}
					ratio = [wScale,hScale]
					canvas = canvasGeneral.canvasInit(canvasBox,{
						width:canvasWH.value * wScale,
						height:canvasWH.value * hScale,
					})
					canvas.selection = false;
					// canvas.set({
					// 	backgroundColor: 'lightblue'
					// });
					scale = img.height/canvas.height
					pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
					
					fabric.Object.prototype.cornerSize = 10
					fabric.Object.prototype.transparentCorners = false 
					fabric.Image.fromURL(props.imgUrl, function(img) {
						// 设置背景图对象的宽度和高度与 canvas 相同
						img.scaleToWidth(canvas.width);
						img.scaleToHeight(canvas.height);
						img.set({
							scaleX: canvas.width / img.width,
							scaleY: canvas.height / img.height
						});
						// 将背景图添加到 canvas 的底层
						canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
						if(!fabric.Object.prototype.controls.deleteControl){
							JSSetRemoveImage(deleteObj)
						}else{
							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
						}
						setPencilWidth()
						updateCanvasState()
					},{ crossOrigin: "Anonymous" });
					// 鼠标抬起事件
					canvas.on('mouse:up', function(event) {
						if(isMovePostion)isMovePostion = false
						if(canvasBtn.canvasState != 'move')updateCanvasState('mouseUp')
					});
					canvas.on("mouse:down", event=>setCanvasDown(event));
					canvas.on('mouse:wheel', opt => {
						const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
						let zoom = canvas.getZoom() // 获取画布当前缩放值
						zoom *= 0.999 ** delta
						if (zoom > 20) zoom = 20
						if (zoom < 0.01) zoom = 0.01
						canvas.zoomToPoint(
							{ // 关键点
							x: opt.e.offsetX,
							y: opt.e.offsetY
							},
							zoom
						)
						opt.e.preventDefault()
						opt.e.stopPropagation()
						upDataPencilWidth(zoom)
					})
					canvas.on("mouse:move", event=>setCanvasMove(event));

					//画布上移动
					document.addEventListener('mousemove', mouseMove);
					document.addEventListener('touchmove', touchmove);
					setOperation('pencil')
					img.remove()
				}
				img.src = props.imgUrl
				
			})
        }
		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 canvasKeyUp = (event) =>{
				keyDown = keyDown.filter(function(item) {
					return event.code !== item;
				})
				
			}
		let clearCanvas = ()=>{
		    canvasBtn.canvasState = 'move'
		    canvasBtn.spreadState = false
			document.removeEventListener("keydown", canvasKeyDown);
			document.removeEventListener("keyup", canvasKeyUp);
		}
		let mouseMove = (event)=>{
			let e = getMousePosition(event,false)
			setDomMove(e)
		}
		let touchmove = (event)=>{
			let e = getMousePosition(event,true)
			setDomMove(e)
		}
		let setDomMove = (event)=>{
			if(canvas.isDrawingMode){
				canvas.setCursor('none');
			}
			let canvasCenterBox = document.querySelector(".generalMiniCanvas .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 setCanvasMove = (event) =>{
			if(canvasBtn.canvasState == 'movePosition' && isMovePostion)setCanvasPosition(event)
		}
		let lastPosX = 0
		let lastPosY = 0
		let setCanvasDown = (event)=>{
			if(canvasBtn.canvasState == 'movePosition'){
				isMovePostion = true;
				lastPosX = event.pointer.x;
				lastPosY = event.pointer.y;
				return
			}
			if(canvasBtn.canvasState == 'zoomIn' || canvasBtn.canvasState == 'zoomOut'){
				setCanvasZoom(event)
				return
			}
		}
		let setCanvasPosition = (event)=>{
			const e = event;
            const vpt = canvas.viewportTransform;

            vpt[4] += e.pointer.x - lastPosX; // 更新水平偏移
            vpt[5] += e.pointer.y - lastPosY; // 更新垂直偏移

            canvas.requestRenderAll(); // 请求重绘画布
            lastPosX = e.pointer.x;
            lastPosY = e.pointer.y;
		}
		let setCanvasZoom = (opt)=>{
			let zoom = canvas.getZoom() // 获取画布当前缩放值
			let num = -100
			if(canvasBtn.canvasState == 'zoomOut') num = 100
			zoom *= 0.999 ** num
			if (zoom > 20) zoom = 20
			if (zoom < 0.01) zoom = 0.01
			// console.log(zoom);
			canvas.zoomToPoint(
				{ // 关键点
				x: opt.pointer.x,
				y: opt.pointer.y
				},
				zoom
			)
			opt.e.preventDefault()
			opt.e.stopPropagation()
			upDataPencilWidth(zoom)
		}
		let setOperation = (str)=>{
			canvasBtn.canvasState = str
			let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
			let classList = canvasCenterBox.className.split(' ');
			canvasCenterBox.className = 'exportCanvasBox_center_box'
			if(str == 'move'){
				setMove()
				pencilbtnStyle.value.display = `none`
				canvasCenterBox.className = 'exportCanvasBox_center_box'
			}else if(str == 'pencil'){
				setPencil()
				pencilbtnStyle.value.display = `block`
				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
			}else if(str == 'eraser'){
				setEraser()
				pencilbtnStyle.value.display = `block`
				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
			}else if(str == 'liquidation'){
				canvas.isDrawingMode = false
				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
			}else if(str == 'zoomIn' || str == 'zoomOut'){
				pencilbtnStyle.value.display = `none`
				canvas.isDrawingMode = false
				canvas.forEachObject((obj) =>obj.selectable = false);
				canvasCenterBox.className = 'exportCanvasBox_center_box'
			}else if(str == 'movePosition'){
				canvas.isDrawingMode = false
				pencilbtnStyle.value.display = `none`
				canvas.forEachObject((obj) =>obj.selectable = false);
				canvasCenterBox.className = 'exportCanvasBox_center_box cursorMove'
			}
		}
		let brushworkValue = ref('PencilBrush')
		let brushworkChange = (value)=>{
			brushworkValue.value = value
			setPencil()
		}
		let setMove = ()=>{
			canvas.isDrawingMode = false
			canvas.forEachObject((obj) =>obj.selectable = true);
		}
		let brushList = ref([
			{
				value:'PencilBrush',
				url:'/image/brush/PencilBrush.jpg'
			},{
				value:'Marking',
				url:'/image/brush/PencilBrush-2.jpg'
			},{
				value:'InkBrush',
				url:'/image/brush/InkBrush.jpg'
			},{
				value:'CrayonBrush',
				url:'/image/brush/CrayonBrush.jpg'
			},{
				value:'RibbonBrush',
				url:'/image/brush/RibbonBrush.jpg'
			},{
				value:'MarkerBrush',
				url:'/image/brush/MarkerBrush.jpg'
			},{
				value:'WritingBrush',
				url:'/image/brush/WritingBrush.jpg'
			},{
				value:'LongfurBrush',
				url:'/image/brush/LongfurBrush.jpg'
			},{
				value:'SpraypaintBrush',
				url:'/image/brush/SpraypaintBrush.jpg'
			},
		])
		let setPencil = ()=>{
			let pencil
			canvas.isDrawingMode = true//开启绘画模式
			if(brushworkValue.value == 'PencilBrush'){
				pencil = new fabric.PencilBrush(canvas,{}); //普通笔
			}else if(brushworkValue.value == 'Marking'){
				pencil = new fabric.PencilBrush(canvas,); //记号笔
			}else if(brushworkValue.value == 'InkBrush'){
				pencil = new fabric.InkBrush(canvas,{}); //油画笔
			}else if(brushworkValue.value=='CrayonBrush'){
				pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
			}else if(brushworkValue.value == 'RibbonBrush'){
				pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
			}else if(brushworkValue.value == 'MarkerBrush'){
				pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
				// pencil = new fabric.PenBrush(canvas,{}); //书写笔
			}else if(brushworkValue.value == 'WritingBrush'){
				pencil = new fabric.WritingBrush(canvas,{}); //毛笔
			}else if(brushworkValue.value == 'LongfurBrush'){
				pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
			}else if(brushworkValue.value == 'SpraypaintBrush'){
				pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
			}
			
            canvas.freeDrawingBrush = pencil
			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);

			pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
			canvas.freeDrawingBrush.isEraser = false
			setPencilWidth()
			pencilColor()
		}
		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 upDataPencilWidth = (zoom)=>{
			if(canvasBtn.canvasPencilWidth[canvasBtn?.canvasState]){
				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom;
			}
		}
		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 setTimeOut = {
		    pencilWidth:null,
			color:null,
		}
		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
			clearTimeout(setTimeOut.pencilWidth)
			setTimeOut.pencilWidth = setTimeout(()=>{
				let zoom = canvas.getZoom() // 获取画布当前缩放值
				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom
				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
				if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
					canvas.freeDrawingBrush.width = 1;
					pencilbtnStyle.value.height = 1+'px'
					pencilbtnStyle.value.width = 1+'px'
				}
			},300)
		}
		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
			clearTimeout(setTimeOut.color)
			// clearTimeout(setTimeOut.colorHistory)
			setTimeOut.color = setTimeout(()=>{
				pencilColor()
			},200)
			// setTimeOut.colorHistory = setTimeout(()=>{
			// 	colorHistoryList.value.push(canvasPencilColor.value)
			// },1000)
		}
		let hexToRgba=(hex, alpha)=> {
			const r = parseInt(hex.slice(1, 3), 16);
			const g = parseInt(hex.slice(3, 5), 16);
			const b = parseInt(hex.slice(5, 7), 16);
			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
		}
		let pencilColor = ()=>{
			if(canvas.freeDrawingBrush.isEraser){
				canvas.freeDrawingBrush.color = '#FFFFFF';
			}else{
				pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
				if(brushworkValue.value == 'Marking'){
					console.log(canvasBtn.canvasPencilColor);
					console.log(hexToRgba(canvasBtn.canvasPencilColor,.5));
					canvas.freeDrawingBrush.color = hexToRgba(canvasBtn.canvasPencilColor,.5)
				}else{
					canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
				}
			}
		}
		let routesChange = (str)=>{
			canvasBtn.canvasPencilWidth[str] = Math.round(canvasBtn.canvasPencilWidth[str]/10)*10;
			if (canvasBtn.canvasPencilWidth[str] < 10) {
				canvasBtn.canvasPencilWidth[str] = 10; // 设置为最小值
			} else if (canvasBtn.canvasPencilWidth[str] > 100) {
				canvasBtn.canvasPencilWidth[str] = 100; // 设置为最大值
			}
		}
		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 = (liquefation)=>{
			return new Promise((resolve,reject)=>{
				var allObjects = canvas.getObjects();
				// return
				// if(allObjects.length == 0){
				// 	return message.info(t('addDetails.jsContent1'))
				// }
				var canvasDom = document.createElement("canvas");
				let exportCanvas = new fabric.Canvas(canvasDom, {
					backgroundColor: "#FFFFFF",
					width: exportWH * ratio[0],
					height: exportWH * ratio[1],
					isDrawingMode: false, // 开启绘图模式
				});
				canvas.backgroundImage.clone(async (back)=>{
					back.set({
						scaleX:1,
						scaleY:1,
						left:back.left*scale,
						top:back.top*scale ,
					})
					exportCanvas.backgroundImage = back
					await new Promise((resolve, reject) => {
						allObjects.forEach((item,index)=>{
							// let obj = fabric.util.object.clone(item);
							if(item.type == 'circle')return
							let obj 
							item.clone((cloned)=>{
								console.log(cloned);
								obj = cloned
								console.log(obj.set);
								if(obj.set){
									obj.set(
										{
											scaleX:(item.scaleX?item.scaleX:1)*scale,
											scaleY:(item.scaleY?item.scaleY:1)*scale,
											left:item.left*scale,
											top:item.top*scale,
										}
									)
								}
								// else{
								// 	console.log(item.width,scale);
									
								// 	obj.width = (item.width?item.width:1)*scale
								// 	obj.height = (item.height?item.height:1)*scale
								// 	obj.left = item.left*scale
								// 	obj.top = item.top*scale

								// }
								exportCanvas.add(obj)
								if(index == allObjects.length - 1){
									resolve('')
								}
							})
							
						})
					})
					
					let position = JSON.parse(JSON.stringify(canvas.viewportTransform))
					position[4] *= scale
					position[5] *= scale
					//设置画布当前那位置和缩放
					// exportCanvas.viewportTransform = position
					let data = exportCanvas.toDataURL("image/png");
					if(liquefation){
						return resolve(data)
					}
					cancelDsign()
					clearCanvas()
					emit('submitBase64Data',data)
					resolve('')
				})
			})
			
		}
		let cancelDsign = ()=>{
			document.removeEventListener('keydown',canvasKeyDown);
			document.removeEventListener('keyup', canvasKeyUp);
			showPayOrder.value = false
		}
		let liquefactionData = ref(null)
		let liquefaction = ref(null)
		let submitLiquefaction = (rv)=>{
			// const originalWidth = liquefactionData.value.width // 保存原始宽度
			// const originalHeight = liquefactionData.value.height; // 保存原始高度
			canvas.viewportTransform = [1,0,0,1,0,0]
			fabric.Image.fromURL(rv, function(img) {
				// 设置背景图对象的宽度和高度与 canvas 相同
				img.scaleToWidth(canvas.width);
				img.scaleToHeight(canvas.height);
				img.set({
					scaleX: canvas.width / img.width,
					scaleY: canvas.height / img.height
				});
				// 将背景图添加到 canvas 的底层
				canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
				if(!fabric.Object.prototype.controls.deleteControl){
					JSSetRemoveImage(deleteObj)
				}else{
					fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
				}
				setPencilWidth()
				updateCanvasState()
			},{ crossOrigin: "Anonymous" });
		}
		let setLiquefaction =async ()=>{
			// const activeObjects = canvas.backgroundImage // 获取选中的对象
			// console.log(setSubmit(true));
			let activeObjects = await setSubmit(true)
			if (activeObjects) {
				liquefactionData.value = activeObjects
				liquefaction.value.init(activeObjects)
			} else {
				// message.info(useI18.t('exportModel.jsContent6'))
				return null;
			}
		}
        return {
            presentState,
            showPayOrder,
			loadingShow,
            t,
			pencilbtnStyle,
			...toRefs(canvasBtn),
			arrows,

			liquefactionData,
			liquefaction,
			init,
			setOperation,
			setPencilWidth,
			setPencilColor,
			historyState,
			setSubmit,
			cancelDsign,
			submitLiquefaction,
			setLiquefaction,
			routesChange,
			brushList,
			brushworkValue,
			brushworkChange,
        };
    },
    data() {
        return {
        };
    },
    mounted() {},
    methods: {
       
    },
});
</script>
<style lang="less">

.generalMiniCanvas{
	position: relative;
	height: 100%;
	display: flex;
	width: 100%;
	// flex-direction: column;
	margin: 0 auto;
	flex-direction: row;
	flex: 1;
	overflow: hidden;
	.generalMiniCanvas_item{
		// position: relative;
		background: #fff;
		position: absolute;
		
		display: flex;
		// border: 0.2rem solid #c4c4c4;
		width: 25rem;
		border-radius: 4px; /* 设置圆角半径 */
		flex-wrap: wrap;
		.generalMiniCanvas_btn_item{
			display: flex;
			align-items: center;
			padding: 1rem 0;
		}
	}
	.generalMiniCanvas_input,.generalMiniCanvas_btn{
		z-index: 2;
		padding: 1rem 1.5rem;
		position: relative;
		width: auto;
		flex-wrap: nowrap;
		flex-direction: column;
	}
	.generalMiniCanvas_input{
		flex-direction: row;
		align-items: center;
		margin-left: 7rem;
		height: 6rem;
		.generalMiniCanvas_input_item{
			display: flex;
			margin-right: 3rem;
			align-items: center;
			&.brushwork{
				img{
					width: 100%;
					max-height: 100%;
					object-fit: contain;
				}
			}
			span{
				margin-right: 1rem;
			}
		}
		.generalMiniCanvas_input_item:last-child{
			margin-right: 0;
		}
	}
	.generalMiniCanvas_btn{
		
			input{
				// width: 100%;
				width: 30rem;
				// margin-top: 1rem;
				flex: 1;
			}
			.icon-xiala{
				position: absolute;	
				width: 2rem;
				bottom: 0;
				transform: translate(-50%, 90%);
				left: 50%;
				width: 6rem;
				background: #fff;
				text-align: center;
				cursor: pointer;
				&.icon-xiala::before{
					transition: all .3s;
				}
				&.btnRotate::before{
					transform: rotate(180deg);
					display: block;
				}
			}
			i{
				font-size: 2.5rem;
				cursor: pointer;
				width: 4rem;
				height: 4rem;
				display: flex;
				align-items: center;
				justify-content: center;
				&.active{
					border: 1px solid;
					border-radius: .4rem;
				}
			}
			&.spread{
				transform: translate(-50%,0);
			}
		}
	.addDetails_canvasCenter{
		flex: 1;
		overflow: hidden;
		display: flex;
		// flex-direction: column;
		// flex-direction: row;
		position: relative;
		margin: 0 auto;
		flex-direction: column;
	}
	.exportCanvasBox_center_data{
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	.exportCanvasBox_center_box{
		padding: 3rem;
		height: 100%;
		flex: 1;
		position: relative;
		overflow: hidden;
		width: 100%;
		background: #e6e6e6;
		cursor: inherit;
		&.cursorNone:hover{
			cursor: none;
		}
		&.cursorMove:hover{
			cursor: move;
			canvas{
				cursor: move !important;
			}
		}
		.editFrontBack_pencilbtn{
			position: absolute;
			z-index: 1;
			border-radius: 50%;
			border: 1px solid #000;
			pointer-events: none;
			transform: translate(-50%,-50%);
		}
	}
	.exportCanvasBox_center{
		height: 100%;
		flex: 1;
		position: relative;
		overflow: hidden;
		background: #e6e6e6;
		// overflow: scroll;
		.canvas-container{
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.editFrontBack_pencilbtn{
			position: absolute;
			z-index: 1;
			border-radius: 50%;
			border: 1px solid #000;
			pointer-events: none;
			transform: translate(-50%,-50%);
		}
	}
	.exportCanvasBox_center:hover{
		.generalMiniCanvas_btn{
			// transform: translate(-50%,-101%);
			// &.spread{
			// 	transform: translate(-50%,0);
			// }
		}
	}
}
.exportCanvasBox_submit{
	margin-top: auto;
	margin-left: 1rem;
	text-align: center;
}
</style>