draw.js

export function testDrawLine(context) {
	context.setStrokeStyle("#00ff00")
	context.setLineWidth(5)
	context.rect(0, 0, 200, 200)
	context.stroke()
	context.setStrokeStyle("#ff0000")
	context.setLineWidth(2)
	context.moveTo(160, 100)
	context.arc(100, 100, 60, 0, 2 * Math.PI, true)
	context.moveTo(140, 100)
	context.arc(100, 100, 40, 0, Math.PI, false)
	context.moveTo(85, 80)
	context.arc(80, 80, 5, 0, 2 * Math.PI, true)
	context.moveTo(125, 80)
	context.arc(120, 80, 5, 0, 2 * Math.PI, true)
	context.stroke()
	context.draw()
}
export function initPainter(url, captureCanvas) {
	console.log('initPainter', url, captureCanvas)
	// const fullUrl = `https://store.keliuyun.com/images/${url}`
	const fullUrl = url

	uni.downloadFile({
		url: fullUrl,
		/* header: {
			'Access-Control-Expose-Headers': 'Content-Disposition'
		}, */
		success: (res) => {
			console.log('res', res)
			if (res.statusCode === 200) {
				const systemInfo = uni.getSystemInfoSync()
				const actualWidth = systemInfo.windowWidth - 20
				
				uni.getImageInfo({
				  src: res.tempFilePath,
				  success: (imageInfo) => {
				    console.log('图片信息:', imageInfo);
					const actualHeight = (imageInfo.height * actualWidth) / imageInfo.width
				    
					// 设置容器的大小
				    // captureCanvas.$el.style.width = actualWidth + 'px'
				    // captureCanvas.$el.style.height = actualHeight + 'px'
					
					// 绘制图片
					const ctx = uni.createCanvasContext('screenshotPainter')
					ctx.drawImage(res.tempFilePath, 0, 0, actualWidth, actualHeight);
				  },
				  fail: (error) => {
				    console.error('获取图片信息失败:', error);
				  }
				});
			}
		}
	})
}

const windowToCanvas = function (x, y, captureCanvas) {
  const bbox = captureCanvas.getBoundingClientRect();
  //返回当前鼠标相对于canvas的位置
  return {
    x: Math.round(x - bbox.left),
    y: Math.round(y - bbox.top),
  };
};

let locHistory = []
let isMouseDown = false
let lastLoc = null 

const initCanvasData = () => {
	locHistory = []
	isMouseDown = false
	lastLoc = null
}

const moveStroke = function (point, context, captureCanvas) {
	const curLoc = windowToCanvas(point.x, point.y, captureCanvas);
	const curTimestamp = new Date().getTime();
	const s = calcDistance(curLoc, lastLoc);
	const lineWidth = 3;
	//draw
	context.beginPath();
	context.moveTo(lastLoc.x, lastLoc.y);
	context.lineTo(curLoc.x, curLoc.y);

	locHistory.push({
		x: curLoc.x,
		y: curLoc.y,
	});

	context.lineWidth = 3;
	context.strokeStyle = "#FF0000";
	context.lineCap = "round";
	context.linJoin = "round";
	context.stroke();

	//每次过程结束时，将结束值赋给初始值，一直延续
	lastLoc = curLoc;
};

export function initPainterEvent(captureCanvas) {
	const context = uni.createCanvasContext('firstCanvas')
	captureCanvas.addEventListener("touchstart", function (e) {
		e.preventDefault();
	
		isMouseDown = true;
		lastLoc = windowToCanvas(e.touches[0].clientX, e.touches[0].clientY, captureCanvas);
		locHistory.push({
		  x: lastLoc.x,
		  y: lastLoc.y,
		});
		console.log(locHistory);
	});
	
	captureCanvas.addEventListener("touchmove", function (e) {
		e.preventDefault();
		if (isMouseDown) {
		  moveStroke(
			{
			  x: e.touches[0].clientX,
			  y: e.touches[0].clientY,
			},
			context
		  );
		}
	});
	
	captureCanvas.addEventListener("touchend", function (e) {
		locHistory.push({
		  x: lastLoc.x,
		  y: lastLoc.y,
		});
		isMouseDown = false;
	});
}