aida_front/src/tool/canvasDrawing.js

import cuowuImg from '@/assets/images/homePage/cuowu.svg'
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();
	let data = {
		url:'',
		imageType:'u'
	}
	if(!activeObjects){
		return
	}
	if(activeObjects.type == 'image'){
		data = {
			url:activeObjects.getSrc(),
			imageType:'u',
		}
	}else{
		let scale = activeObjects.scaleX? activeObjects.scaleX: 1
		var exportCanvas = new fabric.Canvas(null, {
			width: activeObjects.width*scale,
			height: activeObjects.height*scale,
			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,quality:1});
		data = {
			url:imgData,
			imageType:'b',
		}
		exportCanvas.dispose()
	}
	return data
}
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()
			img.remove()
		}
	})
	return img
}
function JSSetRemoveImage(fun){
	const deleteIcon = cuowuImg
	// 创建删除图片元素
	let deleteImg = document.createElement('img')
	deleteImg.src = deleteIcon
	function renderIcon(icon) {
		return function (ctx, left, top, styleOverride, fabricObject) {
			var size = this.cornerSize;
			ctx.save();
			ctx.translate(left, top);
			ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
			ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
			ctx.restore();
		}
	}
	fabric.Object.prototype.controls.deleteControl = new fabric.Control({
		x: 0.5,
		y: -0.5,
		offsetY: -16,
		offsetX: 16,
		cursorStyle: 'pointer',
		mouseUpHandler:fun,
		render: renderIcon(deleteImg),
		cornerSize: 24
	})
}
function JSSetGroup(data){
	let rect
	if(data.gradient){
		let colorStops = []
		data.gradient.gradientList.forEach(item=>{
			let obj = {
				offset:item.left.split('%')[0]/100,
				color:`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
			}
			colorStops.push(obj)
		})
		let { x0, y0, x1, y1 } = calculateGradientCoordinate(100,120,data.gradient.angle)
		let linear = new fabric.Gradient({
			type: 'linear', // 线性渐变
			// coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
			coords: { x1:x0, y1:y0, x2:x1, y2:y1 }, // 渐变方向
			colorStops: colorStops,
		})
		var color = new fabric.Rect({
			top:0,
			left:0,
			width: 110,
			height: 130,
			textAlign: "left",
			fill: linear // 设置渐变填充
			// fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
		});
		var text = new fabric.Text('',{
			left: 0,
			top: 0,
			fontSize: 0,
			fontFamily: "Arial",
			textAlign: "left",
			fill: "black",
		});
		let text1 = new fabric.Text('',{
			left: 0,
			top: 0,
			width: 20,
			fontSize: 0,
			fontFamily: "Arial",
			textAlign: "left",
		});
		rect = {text,text1,color,width:110}
	}else{
		var text = new fabric.Text(data.tcx,{
			left: 0,
			top: 60,
			fontSize: 14,
			fontFamily: "Arial",
			textAlign: "left",
			fill: "black",
		});
		let text1 = new fabric.Text(data.name,{
			left: 0,
			top: 80,
			width: 20,
			fontSize: 14,
			fontFamily: "Arial",
			textAlign: "left",
		});
		let width = 110 > text1.width ? 110 : text1.width;
		var color = new fabric.Rect({
			width: width,
			height: 60,
			textAlign: "left",
			fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
		});
		rect = {text,text1,color,width}
	}
	return rect
}
function JSSetPencil(str,canvas){
	let pencil
	if(str == 'PencilBrush'){
		pencil = new fabric.PencilBrush(canvas,{}); //普通笔
	}else if(str == 'Marking'){
		pencil = new fabric.PencilBrush(canvas,); //记号笔
	}else if(str == 'InkBrush'){
		pencil = new fabric.InkBrush(canvas,{}); //油画笔
	}else if(str=='CrayonBrush'){
		pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
	}else if(str == 'RibbonBrush'){
		pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
	}else if(str == 'MarkerBrush'){
		pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
		// pencil = new fabric.PenBrush(canvas,{}); //书写笔
	}else if(str == 'WritingBrush'){
		pencil = new fabric.WritingBrush(canvas,{}); //毛笔
	}else if(str == 'LongfurBrush'){
		pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
	}else if(str == 'SpraypaintBrush'){
		pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
	}
	return pencil
}
export { 
	multiselectJS, 
	JSRectUpdata, 
	JSchangeType, 
	JScanvasMouseDown, 
	JScanvasMouseMove,
	JScreateCheck,
	exportSele,
	JSSetTexture,
	JSSetRemoveImage,
	JSSetGroup,
	JSSetPencil,
}