更新笔触和管理员页面

src/component/HomePage/ExportModel.vue

@@ -95,6 +95,30 @@
 							<div >Size:</div>
 							<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
 						</label>
+						<label v-show="operation == 'pencil'">
+							<div >Brushwork:</div>
+							<a-select
+								ref="select"
+								class="label_select"
+								size="small"
+								v-model:value="brushworkValue"
+								style="flex: 1"
+								@change="brushworkChange"
+								>
+								<!-- v-model:value="brushwork" -->
+								<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-option value="Marking">Marking</a-select-option>
+								<a-select-option value="InkBrush">InkBrush</a-select-option>
+								<a-select-option value="CrayonBrush">CrayonBrush</a-select-option>
+								<a-select-option value="RibbonBrush">RibbonBrush</a-select-option>
+								<a-select-option value="MarkerBrush">MarkerBrush</a-select-option>
+								<a-select-option value="WritingBrush">WritingBrush</a-select-option>
+								<a-select-option value="LongfurBrush">LongfurBrush</a-select-option>
+								<a-select-option value="SpraypaintBrush">SpraypaintBrush</a-select-option> -->
+							</a-select>
+						</label>
 					</div>
 				</div>
 				<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
@@ -577,6 +601,9 @@ export default defineComponent({
 				y: 0,
 				height: 0,
 			};
+			operation.value = 'move'
+			operation.value = 'fill'
+
 			
         };
         //设置画布宽高
@@ -720,6 +747,8 @@ export default defineComponent({
 					// reverseCanvasState.value.push(canvasAsJson);
 				}
 				normalCanvasState.value.push(canvasAsJson);
+				console.log(normalCanvasState.value);
+
 			if (isLoadCanvas) {
 				reverseCanvasState.value = []
 				isLoadCanvas = false;
@@ -747,12 +776,25 @@ export default defineComponent({
 		let operation = ref('move')
 		let operationMode = ref('fill')
 		//铅笔颜色 大小
+		let brushworkValue = ref('PencilBrush')
+		let brushworkChange = (value)=>{
+			brushworkValue.value = value
+			setPencil()
+		}
+
+		// let brushwork = ref('')
+		
 		let canvasPencilColor = ref('#000000')
 		let canvasPencilWidth = ref(20)
 		let setOperation = (str)=>{
 			operation.value = str
+			//折线图的时候切换其他形状或者笔触需要把未完成的折线图删掉
 			canvas.discardActiveObject();//取消所有选中边框
-			clearPatterning()//临时图形置为空并且添加撤回对象里面
+			if(createPatterningIs){
+				canvas.remove(currentPatterning)
+			}
+			canvas.remove(polyLineBtn)
+
 			if(str == 'pencil'){
 				setPencil()
 			}else if(str == 'move'){
@@ -779,15 +821,83 @@ export default defineComponent({
 			visible :true,
 			erasable: false,
         });
+		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 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 = new fabric.PencilBrush(canvas); //笔
+			let pencil
 			canvas.preserveObjectStacking = true;
 			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,{}); //书写笔
+			}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.color = canvasPencilColor.value;
+			canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+
+			if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
+				canvas.freeDrawingBrush.width = 1;
+			}
+			if(brushworkValue.value == 'Marking'){
+				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
+			}else if(brushworkValue.value == 'InkBrush'){
+				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
+			}else{
+				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
+			}
+
 			brushIndicator.set('fill',canvasPencilColor.value)
 			canvas.freeDrawingBrush.isEraser = false
-			canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+
 		}
 		
 		let setMove = () =>{
@@ -811,20 +921,32 @@ export default defineComponent({
 			clearTimeout(setTimeOut.color)
 			setTimeOut.color = setTimeout(()=>{
 				// brushIndicator.fill = canvasPencilColor.value;
+				
 				if(canvas.freeDrawingBrush.isEraser){
 
 				}else{
 					brushIndicator.set({fill: canvasPencilColor.value});
 				}
-				canvas.freeDrawingBrush.color = canvasPencilColor.value;
+				if(brushworkValue.value == 'Marking'){
+					canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
+				}else if(brushworkValue.value == 'InkBrush'){
+					canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
+				}else{
+					canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
+				}
 
-			},300)
+
+			},100)
 		}
 		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
 			clearTimeout(setTimeOut.width)
 			canvasPencilWidth.value = Number(canvasPencilWidth.value)
 			setTimeOut.width = setTimeout(()=>{
-				canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+				if(brushworkValue.value == 'LongfurBrush' || brushworkValue.value == 'RibbonBrush'){
+					canvas.freeDrawingBrush.width = 1;
+				}else{
+					canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+				}
 				// setPencil()
 			},300)
 		}
@@ -912,8 +1034,10 @@ export default defineComponent({
 		let setCanvasUp = (event)=>{
 			upPoint = event.absolutePointer
 			if(canvas.isDrawingMode){
-				canvas.remove(brushIndicator)
-				updateCanvasState()
+				setTimeout(() => {
+					canvas.remove(brushIndicator)
+					updateCanvasState()
+				}, 100);
 			}else{
 				// event.target && (event.target.bringToFront())//设置优先级
 			}
@@ -946,47 +1070,56 @@ export default defineComponent({
 			}
 		}
 		let setHDExport = ()=>{
-			let selectedObject = canvas.getActiveObject();
-			if (selectedObject && selectedObject.type === 'image') {
-				// 如果是图片对象，则可以对其进行操作
-				let selectedImage = selectedObject;
-				let img = new Image
-				img.src = selectedImage.getSrc()
-				img.onload = ()=>{
-					console.log(img.width,img.height);
-				}
-				// 输出图片对象的 URL
-				console.log('Selected image URL:', selectedImage.getSrc());
-			} else {
-				console.log('No image selected.');
-			}
+			var activeObjects = canvas.getActiveObjects();
+			var group = new fabric.Group(activeObjects, {
+			// 组的属性设置
+			});
+
+			// 创建一个新的 Canvas
+			var exportCanvas = new fabric.StaticCanvas(null, {
+			width: group.width,
+			height: group.height
+			});
+
+			// 将组添加到新的 Canvas 上
+			canvas.add(group);
+
+			// 导出 Canvas 为图像数据
+			var imageDataURL = exportCanvas.toDataURL({
+			format: 'png',
+			quality: 1
+			});
+			console.log(imageDataURL);
 		}
         onMounted(() => {});
 
         return {
-            showUpgradePlan,
-            canvasWH,
-			credits,
-            init,
-            setExport,
-            cancelDsign,
-            setMaxInput,
-            isShowMark,
-            allBoardData,
-			closeNav,
-			setCloseNav,
-			multiselect,
-			onDragstart,
-			historyState,
-			operation,
-			operationMode,
-			setOperation,
-			setOperationMode,
-			canvasPencilColor,
-			canvasPencilWidth,
-			setPencilColor,
-			setPencilWidth,
-			setHDExport,
+            showUpgradePlan,//当前弹窗是否打开
+            canvasWH,//画布初始宽高
+			credits,//积分 用来判断HD导出积分是否够用
+            init,//首页点击导出后初始化
+            setExport,//导出所有内容
+            cancelDsign,//关闭画布
+            setMaxInput,//设置画布宽高
+            isShowMark,//加载遮罩
+            allBoardData,//选择画布所有内容
+			closeNav,//导航展开或者收起来状态
+			setCloseNav,//给图片导航或者工具收起来或者展开
+			multiselect,//获取整体高度
+			onDragstart,//拖拽函数
+			historyState,//执行撤回或者反撤回
+			operation,//设置当前鼠标状态绘画或者矩形或者移动
+			operationMode,//设置矩形是边框还是填充
+			setOperation,//设置当前鼠标状态绘画或者矩形或者移动方法
+			setOperationMode,//设置矩形是边框还是填充方法
+			brushList,//笔触列表
+			canvasPencilColor,//input选择颜色
+			canvasPencilWidth,//input选择宽度
+			setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
+			setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
+			setHDExport,//高清导出选择的图片
+			brushworkChange,//切换笔触的回调
+			brushworkValue,//当前笔触
         };
     },
     data(prop) {
@@ -1090,12 +1223,20 @@ export default defineComponent({
                 display: flex;
 				align-items: center;
 				margin-bottom: 1rem;
+				width: 100%;
                 div {
-                    width: 5rem;
+                    width: 8rem;
                 }
                 input {
-                    width: 10em;
+                    // width: 10em;
+					flex: 1;
+					overflow: hidden;
                 }
+				.label_select{
+					img{
+						width: 100%;
+					}
+				}
             }
 			.exportCanvasBox_left_item.closeNav{
 				// max-height: 1000rem;
@@ -1163,6 +1304,7 @@ export default defineComponent({
 					&.leftAlign{
 						justify-content: flex-start;
 					}
+				
 					i{
 						font-size: 2.5rem;
 						cursor: pointer;
@@ -1243,5 +1385,17 @@ export default defineComponent({
             font-size: calc(1.6rem * 1.2);
         }
     }
+	.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
+		border-color: #d9d9d9;
+		box-shadow: none;
+	}
+	.ant-select:hover .ant-select-selector{
+		border-color: #d9d9d9;
+	}
+}
+.label_select_item{
+	img{
+		width: 100%;
+	}
 }
 </style>