aida_front/src/tool/canvasDrawing.js

function multiselectJS(canvas) {//获取整体宽高
	canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
	const sel = new fabric.ActiveSelection(canvas.getObjects(), {
		canvas
	})
	// console.log(sel)
	canvas.setActiveObject(sel)
	canvas.requestRenderAll()
	const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
	if (activeObject && activeObject.type === 'activeSelection') {
		const totalWidth = activeObject.width * activeObject.scaleX;
		const totalHeight = activeObject.height * activeObject.scaleY;
		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
}
async function exportSele(canvas,format){
	var activeObjects = canvas.getActiveObject();
	if(activeObjects.length == 0){
		return
	}
	var exportCanvas = new fabric.Canvas(null, {
		width: activeObjects.width,
		height: activeObjects.height,
		backgroundColor: "rgba(255, 255, 255)",
	});
	await new Promise((resolve, reject)=>{
		activeObjects.clone((value)=>{
			value.left = 0
			value.top = 0
			exportCanvas.add(value);
			resolve()
		})
	})
	exportCanvas.renderAll();
	var imgData = exportCanvas.toDataURL({
		format: format
	});
	exportCanvas.dispose()
	return imgData
}
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,keyDown) {
	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
			if(keyDown.indexOf('ShiftLeft')>-1){
				ry = Math.abs(downPoint.y - currentPoint.y) / 2
				if(rx > ry){
					ry = rx
				}else{
					rx = ry
				}
			}else{
				ry = Math.abs(downPoint.y - currentPoint.y) / 2
			}
			height = width
		
			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
	}
}
function JSRectUpdata(rect, downPointer, upPointer) {
	let height = (downPointer.y - upPointer.y)
	let width = (downPointer.x - upPointer.x)
	rect.set({
		height,
		width
	})
	return rect
}
async function JSSetTexture(src,){
	let img
	await new Promise((resolve, reject) => {
		img = new Image
		img.src = src
		img.onload = ()=>{
			img.width = 200
			img.height = 200
			resolve()
		}
	})
	return img
}
export { 
	multiselectJS, 
	JSRectUpdata, 
	JSchangeType, 
	JScanvasMouseDown, 
	JScanvasMouseMove,
	JScreateCheck,
	exportSele,
	JSSetTexture 
}