解决元素重影

src/component/modules/generalMiniCanvas.vue

@@ -14,7 +14,7 @@
 					<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 != 'move' && canvasState != 'liquidation')">
+				<div class="generalMiniCanvas_input_item" v-show=" canvasState == 'pencil'">
 					<span>{{ $t('exportModel.Color') }}</span>
 					<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
 				</div>
@@ -451,31 +451,26 @@ export default defineComponent({
 		let liquefactionData = ref(null)
 		let liquefaction = ref(null)
 		let submitLiquefaction = (rv)=>{
-			const originalWidth = liquefactionData.value.width // 保存原始宽度
-			const originalHeight = liquefactionData.value.height; // 保存原始高度
-			liquefactionData.value.setSrc(rv, function(img) {
-				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
-				}
+			// const originalWidth = liquefactionData.value.width // 保存原始宽度
+			// const originalHeight = liquefactionData.value.height; // 保存原始高度
+			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
 				});
-				// img.set({
-				// 	scaleX: 1,
-				// 	scaleY: 1
-				// });
-			
-				canvas.renderAll();
-			});
+				// 将背景图添加到 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 // 获取选中的对象
@@ -561,6 +556,7 @@ export default defineComponent({
 		flex-direction: row;
 		align-items: center;
 		margin-left: 7rem;
+		height: 6rem;
 		.generalMiniCanvas_input_item{
 			display: flex;
 			margin-right: 3rem;