details功能

src/tool/canvasGeneralCopy.js

@@ -118,6 +118,7 @@ class MyCanvas {
 			state:false,//用来判断鼠标是否移入dashed 如果移入就变为可拖拽
 			isDrawingMode:false,//用来获取移入前是否是绘画模式
 			isDetail:false,//判断裁剪或者局部添加内容，为true是添加内容
+			isDashedShow:false,//判断选区是否存在
 		}
 		this.currentOperation = true //表示是否可以使用快捷键
 		this.fontFamily = this.pencilList.textFontFamilyList[0].value
@@ -160,7 +161,8 @@ class MyCanvas {
 		}//给切换颜色设置防抖
 		
 	}
-	async canvasInit (dom, val,img,editGroupImg){//初始化
+	async canvasInit (dom, val,img,editGroupImg,data){//初始化
+		// let {erasable} = data
 		// this.canvasClear()
 		this.canvasWH = val
 		this.canvasDomParent = dom;
@@ -300,11 +302,10 @@ class MyCanvas {
 		initAligningGuidelines(MyCanvas?.[this.id], true);
 		JSchangeType(MyCanvas?.[this.id],'init')
 		// await this.createBg()
-		await this.createLayer({str:'init',img:img})//创建图层并且使用
-		
+		await this.createLayer({str:'init',img:img,noErasable:data?.noErasable || false})//创建图层并且使用
 		if(img){
 			this.dashed.isDetail = true
-			await this.createLayer({editImg:editGroupImg})//创建图层并且使用
+			await this.createLayer({editImg:editGroupImg,noErasable:data?.noErasable || false})//创建图层并且使用
 		}
 		MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
 		
@@ -410,6 +411,7 @@ class MyCanvas {
 				}
 			});
 		}else if(['dashedPencil', 'dashed'].includes(str)){
+			this.dashed.isDashedShow = false
 			this.setGroupGrid('all')
 			MyCanvas[this.id].isDrawingMode = false
 			this.pencilbtnStyle.display = `none`
@@ -1411,7 +1413,7 @@ class MyCanvas {
 	// 	})
 	// }
 	createLayer(data){
-		let {str,id,editImg} = data
+		let {str,id,editImg,noErasable} = data
 		let image = data.img
 		let canvasData = MyCanvas?.[this.id].toJSON(['selectable','minioUrl','custom']);
 		return new Promise(async (resolve, reject) => {
@@ -1442,13 +1444,13 @@ class MyCanvas {
 				height: MyCanvas?.[this.id].height,
 				left:0,
 				top:0,
-				selectable:false,
 				erasable:false,
 				subTargetCheck:true,
 				evented:false,
 				// originX:'left', 
 				// originY:'top',
 				custom:{
+					noErasable:noErasable,
 					layerId:id,
 					type:'layer' ,
 					groupType:'Object',
@@ -1490,7 +1492,6 @@ class MyCanvas {
 				})
 			}
 			MyCanvas?.[this.id].add(group)
-
 			let img = group.toDataURL({
 				width: MyCanvas?.[this.id].width,
 				height: MyCanvas?.[this.id].height,
@@ -1518,8 +1519,11 @@ class MyCanvas {
 			height: MyCanvas?.[this.id].height
 		}))
 	}
-	async addPartImg(file,str){
+	async addPartImg(file,str,data){
+		// let {erasable} = data
+
 		let img = await this.createImage(file)
+
 		if(str){
 			img.set({
 				custom:{
@@ -1544,7 +1548,7 @@ class MyCanvas {
 		if(this.createPatterning.state)return
 		this.clipPath.clipGroup = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed)?.[0];
 		if (options.target.type === 'group' && options.target.custom?.layerId) return;
-		if(!options.target?.custom?.layerId){
+		if(!options.target?.custom?.layerId,this.layer.selectLayer.id){
 			if(options.target?.custom){
 				options.target.custom.layerId = this.layer.selectLayer.id
 			}else{
@@ -1553,7 +1557,6 @@ class MyCanvas {
 		}
 		if(this.clipPath.clipGroup && this.dashed.isDetail && !options.target?.custom?.dashed){
 			let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom)[0]
-
 			clipPathElement.clone(cloned=>{
 				cloned.set({
 					left:this.clipPath.clipGroup.left,
@@ -1587,6 +1590,7 @@ class MyCanvas {
 		}
 		//判断是否可以点击空白地方进行选中
 		if(options.target?.custom?.dashed){
+			this.dashed.isDashedShow = true
 			options.target.set({perPixelTargetFind:false,erasable:false,hasBorders: false,hasControls: false})
 			if(this.dashed.isDetail){//判断是裁剪还是局部添加
 				options.target.set({selectable:false,perPixelTargetFind:true})
@@ -1792,6 +1796,11 @@ class MyCanvas {
 					this.setClone(item,v)
 					v.left = v.left + this.layer.selectLayer.group.width/2
 					v.top = v.top + this.layer.selectLayer.group.height/2
+					if(v.custom?.isSelectable && this.layer.selectLayer.group.custom.noErasable){
+						v.set({
+							erasable:false
+						})
+					}
 					if(v.custom?.dashed){
 						// this.layer.selectLayer.group._objects.remove(item)
 						// let img = v._objects.filter(item => item.type == 'image')[0]
@@ -1825,7 +1834,7 @@ class MyCanvas {
 					let layerIndex = v?.custom?.layerIndex * 10000
 					v.moveTo(layerIndex)
 				}
-				if(v?.custom?.layerId == id){
+				if(v?.custom?.layerId == id && !v?.custom?.noErasable){
 					if(str && str == 'setRubber'){
 						v.set({erasable:'deep'})
 					}
@@ -2182,7 +2191,6 @@ class MyCanvas {
 	async detailSubmit(){
 		return await new Promise(async (resolve, reject) => {
 			let list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
-			console.log(MyCanvas?.[this.id].getObjects());
 			let layerBg = list.filter(obj => obj.custom.isSelectable)[0]
 			let scaleXY = {
 				scaleX:layerBg?.scaleX?layerBg?.scaleX:1,