更新绘画功能

src/tool/canvasDrawing.js

@@ -32,10 +32,15 @@ function JSchangeType(canvas, val) {
 	}
 }
 //绘制直线
-function JScanvasMouseDown(str,e, width,patterning) {//创建线
+function JScanvasMouseDown(e, data) {//创建线
 	let downPoint = e.absolutePointer
 	let currentPatterning
-	switch (str) {
+	let fill = data?.fill || 'rgba(0, 0, 0, 0.2)'
+	let radius =  data?.radius || 5
+	let width = data?.width || 0
+	let selectable = data?.selectable
+	let strokeDashArray =  data?.strokeDashArray || [0,0]
+	switch (data.str) {
 		case 'rect':
 			let top = Math.min(downPoint.y)
 			let left = Math.min(downPoint.x)
@@ -44,9 +49,13 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 			currentPatterning = new fabric.Rect({
 				top,
 				left,
-				fill: 'rgba(0, 0, 0, 0.2)',
-				rx:5,
-				ry:5,
+				fill: fill,
+				stroke:'#000',
+				strokeWidth:width,
+				strokeDashArray:strokeDashArray,
+				rx:radius,
+				ry:radius,
+				selectable,
 			})
 		break
 		case 'line':
@@ -55,7 +64,7 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 				downPoint.x, downPoint.y // 结束点坐标
 			],
 				{
-					stroke: 'rgba(0, 0, 0, 0.2)', // 笔触颜色
+					stroke: fill, // 笔触颜色
 					strokeLineCap: 'round',
 					strokeWidth:Number(width),
 				}
@@ -66,9 +75,9 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 				top: downPoint.y,
 				left: downPoint.x,
 				radius: 0,
-				fill: 'rgba(0, 0, 0, 0.2)',
+				fill: fill,
 				// fill: 'transparent',
-				// stroke: 'rgba(0, 0, 0, 0.2)'
+				// stroke: fill
 			  })
 		break
 		case 'triangle':
@@ -77,9 +86,9 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 				left: downPoint.x,
 				width: 0,
 				height: 0,
-				fill: 'rgba(0, 0, 0, 0.2)',
+				fill: fill,
 				// fill: 'transparent',
-				// stroke: 'rgba(0, 0, 0, 0.2)'
+				// stroke: fill
 			  })
 		break
 		case 'ellipse':
@@ -88,9 +97,9 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 				left: downPoint.x,
 				rx: 0,
 				ry: 0,
-				fill: 'rgba(0, 0, 0, 0.2)',
+				fill: fill,
 				// fill: 'transparent',
-				// stroke: 'rgba(0, 0, 0, 0.2)'
+				// stroke: fill
 			  })
 		break
 		case 'fold':
@@ -99,7 +108,7 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 					{ x: downPoint.x, y: downPoint.y }
 				],{
 					fill: 'transparent',
-					stroke: 'rgba(0, 0, 0, 0.2)',
+					stroke: fill,
 					objectCaching: false,
 					strokeWidth:Number(width),
 					selection:false,
@@ -269,14 +278,15 @@ async function JSSetTexture(src,){
 	})
 	return img
 }
-function JSSetRemoveImage(fun){
+let JSSetRemoveImage = (fun)=>{
 	const deleteIcon = cuowuImg
 	// 创建删除图片元素
+	const cornerSize = 24
 	let deleteImg = document.createElement('img')
 	deleteImg.src = deleteIcon
-	function renderIcon(icon) {
-		return function (ctx, left, top, styleOverride, fabricObject) {
-			var size = this.cornerSize;
+	let renderIcon = (icon) => {
+		return (ctx, left, top, styleOverride, fabricObject)=> {
+			var size = cornerSize;
 			ctx.save();
 			ctx.translate(left, top);
 			ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
@@ -292,7 +302,7 @@ function JSSetRemoveImage(fun){
 		cursorStyle: 'pointer',
 		mouseUpHandler:fun,
 		render: renderIcon(deleteImg),
-		cornerSize: 24
+		cornerSize: cornerSize
 	})
 }
 function JSSetGroup(data){