Merge branch 'StableVersion' into develop

src/tool/canvasDrawing.js

@@ -10,10 +10,200 @@ function multiselectJS(canvas) {//获取整体宽高
 	if (activeObject && activeObject.type === 'activeSelection') {
 		const totalWidth = activeObject.width * activeObject.scaleX;
 		const totalHeight = activeObject.height * activeObject.scaleY;
-		return {totalWidth,totalHeight}
+		return { totalWidth, totalHeight }
 		console.log('Total Width:', totalWidth);
 		console.log('Total Height:', totalHeight);
 	}
+}
+function JSchangeType(canvas, val) {
+	switch (val) {
+		case 'init':
+			canvas.selection = true
+			canvas.selectionColor = 'rgba(0, 0, 0, 0.2)'
+			canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)'
+			canvas.skipTargetFind = false 
+			break
+		default:
+			canvas.selectionColor = 'transparent'
+			canvas.selectionBorderColor = 'transparent'
+			canvas.skipTargetFind = true // 禁止选中
+			break
+	}
+}
+//绘制直线
+function JScanvasMouseDown(str,e, width,patterning) {//创建线
+	let downPoint = e.absolutePointer
+	let currentPatterning
+	switch (str) {
+		case 'rect':
+			let top = Math.min(downPoint.y)
+			let left = Math.min(downPoint.x)
+			// let height = Math.abs(downPoint.y - upPointer.y)
+			// let width = Math.abs(downPoint.x - upPointer.x)
+			currentPatterning = new fabric.Rect({
+				top,
+				left,
+				fill: 'rgba(0, 0, 0, 0.2)',
+				rx:5,
+				ry:5,
+			})
+		break
+		case 'line':
+			currentPatterning = new fabric.Line([
+				downPoint.x, downPoint.y, // 起始点坐标
+				downPoint.x, downPoint.y // 结束点坐标
+			],
+				{
+					stroke: 'rgba(0, 0, 0, 0.2)', // 笔触颜色
+					strokeLineCap: 'round',
+					strokeWidth:Number(width),
+				}
+			)
+		break
+		case 'circle':
+			currentPatterning = new fabric.Circle({
+				top: downPoint.y,
+				left: downPoint.x,
+				radius: 0,
+				fill: 'rgba(0, 0, 0, 0.2)',
+				// fill: 'transparent',
+				// stroke: 'rgba(0, 0, 0, 0.2)'
+			  })
+		break
+		case 'triangle':
+			currentPatterning = new fabric.Triangle({
+				top: downPoint.y,
+				left: downPoint.x,
+				width: 0,
+				height: 0,
+				fill: 'rgba(0, 0, 0, 0.2)',
+				// fill: 'transparent',
+				// stroke: 'rgba(0, 0, 0, 0.2)'
+			  })
+		break
+		case 'ellipse':
+			currentPatterning = new fabric.Ellipse({
+				top: downPoint.y,
+				left: downPoint.x,
+				rx: 0,
+				ry: 0,
+				fill: 'rgba(0, 0, 0, 0.2)',
+				// fill: 'transparent',
+				// stroke: 'rgba(0, 0, 0, 0.2)'
+			  })
+		break
+		case 'fold':
+			currentPatterning = new fabric.Polyline([
+					{ x: downPoint.x, y: downPoint.y },
+					{ x: downPoint.x, y: downPoint.y }
+				],{
+					fill: 'transparent',
+					stroke: 'rgba(0, 0, 0, 0.2)',
+					objectCaching: false,
+					strokeWidth:Number(width),
+					selection:false,
+				}
+			)
+		break
+	}
+	return currentPatterning
+}
+function JScreateCheck(e){//创建对号
+	let downPoint = e.absolutePointer
+
+	let rect = new fabric.Rect({
+		width:20,
+		height:20,
+		fill: 'rgba(0, 0, 0, 0.2)',
+		rx:5,
+		ry:5,
+		
+	})
+	var path = new fabric.Path('M2 10 L8 16 L18 4', {
+		left: 2.5,
+		top: 2.5,
+		stroke: 'white',
+		strokeWidth: 2,
+		fill:'transparent',
+	});
+	var polyLineBtn = new fabric.Group([rect, path],{
+		top:downPoint.y-40,
+		left:downPoint.x-10,
+		width:20,
+		height:20,
+		hasControls: false, // 禁用控制点
+		hasBorders: false, // 禁用边框线
+		selectable: false, // 禁用选择功能
+		hoverCursor: 'pointer'
+	});
+	return polyLineBtn
+}
+function JScanvasMouseMove(str,e, currentPatterning,downPoint) {
+	const currentPoint = e.absolutePointer
+	let width,height,top,left,radius,rx,ry
+	switch (str) {
+		case 'line':
+			currentPatterning.set('x2', currentPoint.x)
+			currentPatterning.set('y2', currentPoint.y)
+		break
+		case 'rect':
+			width = Math.abs(downPoint.x - currentPoint.x)
+			height = Math.abs(downPoint.y - currentPoint.y)
+		
+			top = currentPoint.y > downPoint.y ? downPoint.y : currentPoint.y
+			left = currentPoint.x > downPoint.x ? downPoint.x : currentPoint.x
+		
+			currentPatterning.set('width', width)
+			currentPatterning.set('height', height)
+			currentPatterning.set('top', top)
+			currentPatterning.set('left', left)
+		break
+		case 'circle':
+			radius = Math.min(Math.abs(downPoint.x - currentPoint.x), Math.abs(downPoint.y - currentPoint.y)) / 2
+			top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - radius * 2
+			left = currentPoint.x > downPoint.x ? downPoint.x :  downPoint.x - radius * 2
+
+			currentPatterning.set('radius', radius)
+			currentPatterning.set('top', top)
+			currentPatterning.set('left', left)
+		break
+		case 'triangle':
+			width = Math.abs(downPoint.x - currentPoint.x)
+			height = Math.abs(downPoint.y - currentPoint.y)
+			top = currentPoint.y > downPoint.y ? downPoint.y : currentPoint.y
+			left = currentPoint.x > downPoint.x ? downPoint.x : currentPoint.x
+			currentPatterning.set('width', width)
+			currentPatterning.set('height', height)
+			currentPatterning.set('top', top)
+			currentPatterning.set('left', left)
+		break
+		case 'ellipse':
+			rx = Math.abs(downPoint.x - currentPoint.x) / 2
+			ry = Math.abs(downPoint.y - currentPoint.y) / 2
+		
+			top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - ry * 2
+			left = currentPoint.x > downPoint.x ? downPoint.x :  downPoint.x - rx * 2
+		
+			currentPatterning.set('rx', rx)
+			currentPatterning.set('ry', ry)
+			currentPatterning.set('top', top)
+			currentPatterning.set('left', left)
+		break
+		case 'fold':
+			let points = currentPatterning.points
+			points[points.length - 1].x = currentPoint.x
+			points[points.length - 1].y = currentPoint.y
+		break
+	}
 
 }
-export default {multiselectJS,}
+function JSRectUpdata(rect, downPointer, upPointer) {
+	let height = (downPointer.y - upPointer.y)
+	let width = (downPointer.x - upPointer.x)
+	rect.set({
+		height,
+		width
+	})
+	return rect
+}
+export { multiselectJS, JSRectUpdata, JSchangeType, JScanvasMouseDown, JScanvasMouseMove,JScreateCheck }