pbl-student-table/src/components/classRoomHelper/component/AnnotationCanvas.vue

<template>
	<div v-if="show">
		<el-row :gutter="20">
			<el-col :span="24">
				<canvas
					ref="canvas"
					class="drawing-canvas"
					@mousedown="handleMouseDown"
					@mousemove="handleMouseMove"
					@mouseup="handleMouseUp"
					@mouseleave="handleMouseUp"
					@touchstart="handleTouchStart"
					@touchmove="handleTouchMove"
					@touchend="handleTouchEnd"
				></canvas>
			</el-col>
		</el-row>
		<el-row
			:gutter="20"
			class="toolbar"
			:style="`${showTool ? '' : 'display:none'}`"
		>
			<el-col :span="24" class="toolbar-container">
				<div class="brushBtn">
					<!-- <el-button
						@click="setMode('draw')"
						icon="el-icon-edit"
						:class="{ active: mode === 'draw' }"
						>画笔</el-button
					> -->
					<el-tooltip class="item" effect="light" content="画笔" placement="top">
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							:style="mode === 'draw' ? `background-color:${brushColor}` : ''"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="setMode('draw')"
						>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M12 6.75C12.2508 6.75 12.4849 6.87533 12.624 7.08397L15.624 11.584C15.7062 11.7072 15.75 11.8519 15.75 12V21C15.75 21.4142 15.4142 21.75 15 21.75C14.5858 21.75 14.25 21.4142 14.25 21V12.75H9.75V21C9.75 21.4142 9.41421 21.75 9 21.75C8.58579 21.75 8.25 21.4142 8.25 21V12C8.25 11.8519 8.29383 11.7072 8.37596 11.584L11.376 7.08397C11.5151 6.87533 11.7492 6.75 12 6.75ZM10.4014 11.25H13.5986L12 8.85208L10.4014 11.25Z"
								:fill="mode === 'draw' ? brushColor==='#FFFFFF'?'black':'#fff' : '#3681FC'"
							/>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5Z"
								:fill="mode === 'draw' ? brushColor==='#FFFFFF'?'black':'#fff' : 'black'"
								fill-opacity="0.9"
							/>
						</svg>
					</el-tooltip>

					<el-tooltip
						class="item"
						effect="light"
						content="切换颜色"
						placement="top"
					>
						<el-button
							class="selectBox"
							@click.stop="changeOpenBrushColorBox(!openBrushColorBox)"
							:icon="
								openBrushColorBox ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
							"
						></el-button>
					</el-tooltip>
					<div class="brushBtn_colorBox" v-if="openBrushColorBox">
						<span
							v-for="(item, index) in colorList"
							:key="index"
							:style="`background-color: ${item};${
								item === '#FFFFFF' ? 'border:solid 2px #E2E1E5' : ''
							}`"
							@click="setColor(item)"
						></span>
					</div>
				</div>

				<div>
					<el-slider
						v-model="brushSize"
						:min="1"
						:max="20"
						style="width: 100px"
					></el-slider>
				</div>

				<!-- <div>
					<el-color-picker
						v-model="brushColor"
						@active-change="setColor"
					></el-color-picker>
				</div> -->

				<div class="eraserBtn">
					<el-tooltip
						class="item"
						effect="light"
						content="橡皮擦"
						placement="top"
					>
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							:class="{ eraserBtnActive: mode === 'erase' }"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="setMode('erase')"
						>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M13.6464 6.14645C13.8417 5.95118 14.1583 5.95118 14.3536 6.14645L17.8536 9.64645C18.0488 9.84171 18.0488 10.1583 17.8536 10.3536L11.2071 17H17.5V18H10C9.86739 18 9.74021 17.9473 9.64645 17.8536L6.14645 14.3536C5.95118 14.1583 5.95118 13.8417 6.14645 13.6464L13.6464 6.14645ZM10 16.7929L7.20711 14L9 12.2071L11.7929 15L10 16.7929ZM12.5 14.2929L16.7929 10L14 7.20711L9.70711 11.5L12.5 14.2929Z"
								fill="black"
								fill-opacity="0.9"
							/>
						</svg>
					</el-tooltip>
					<!-- <el-button
						@click="setMode('erase')"
						icon="el-icon-connection"
						:class="{ active: mode === 'erase' }"
						>橡皮擦</el-button
					> -->
				</div>
				<!-- <el-button @click="setMode('line')" :class="{ active: mode === 'line' }">直线</el-button>
        <el-button @click="setMode('rect')" :class="{ active: mode === 'rect' }">矩形</el-button>
        <el-button @click="setMode('circle')" :class="{ active: mode === 'circle' }">圆圈</el-button> -->
				<div class="clearScreenBtn">
					<!-- <el-button @click="clearCanvas" icon="el-icon-refresh-left"
						>清空画布</el-button
					> -->
					<el-tooltip class="item" effect="light" content="清空" placement="top">
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="clearCanvas"
						>
							<path
								d="M12.7622 15.8897C12.6906 16.186 12.327 16.8335 11.7485 17.7059C11.9071 17.7442 12.0584 17.7873 12.2123 17.8164C12.4925 17.8695 12.775 17.9108 13.0552 17.9642C13.147 17.9818 13.1937 17.9469 13.2428 17.8711C13.8067 16.9985 14.2612 16.0662 14.6425 15.0947C14.7917 14.7147 14.9193 14.3252 15.0568 13.9401C15.0706 13.901 15.0844 13.8619 15.101 13.8148C15.4032 13.9233 15.6984 14.0292 16.0076 14.1401C15.9522 14.309 15.9021 14.4686 15.8476 14.6265C15.3838 15.9675 14.806 17.25 14.0368 18.4337C13.9729 18.532 13.9007 18.6244 13.8375 18.7233C13.6927 18.9501 13.4901 19.0203 13.236 18.9951C12.2568 18.8983 11.308 18.6663 10.3886 18.3061C8.71606 17.6508 7.27596 16.648 6.13465 15.2025C5.9979 15.0293 5.95862 14.8374 6.04787 14.634C6.13399 14.4379 6.29961 14.3488 6.50182 14.346C7.37097 14.334 8.20886 14.1527 9.019 13.834C9.75205 13.5455 10.42 13.1461 10.9342 12.5139C11.0831 12.3307 11.2047 12.1233 11.3453 11.9175L12.1832 12.4089C12.0277 12.6431 11.8895 12.8771 11.7268 13.0911C11.3292 13.6144 10.8276 14.0121 10.2707 14.3343C9.43156 14.8197 8.52561 15.0995 7.58204 15.2585C7.56342 15.2616 7.545 15.2656 7.49965 15.2746C7.63454 15.4033 7.74824 15.5234 7.87332 15.6288C8.10763 15.8262 8.34592 16.019 8.58921 16.2041C8.63666 16.2403 8.71971 16.2556 8.77787 16.2419C9.26162 16.1281 9.70587 15.9268 10.0783 15.5679C10.0462 15.744 9.74006 16.192 9.3107 16.6905C9.58042 16.8303 9.85304 16.9528 10.107 17.1082C10.4358 17.3093 10.7502 17.2546 11.0731 17.1093C11.6185 16.864 12.0858 16.4972 12.5333 16.0991C12.6058 16.0345 12.6767 15.968 12.7622 15.8897ZM16.2967 13.3014C14.7658 12.5925 13.2459 11.8889 11.7148 11.18C11.8414 10.8741 12.04 10.6413 12.3083 10.4766C12.7564 10.2015 13.2256 10.1707 13.702 10.3865C14.3139 10.6636 14.925 10.9432 15.5305 11.235C16.2423 11.578 16.5769 12.3494 16.3604 13.1153C16.3436 13.1748 16.3204 13.2326 16.2967 13.3014ZM15.6169 10.5242C15.1348 10.3007 14.6589 10.0803 14.1831 9.85909C14.1731 9.85439 14.1659 9.84304 14.1522 9.82989C14.1699 9.79241 14.1866 9.75481 14.2053 9.71826C14.8011 8.55524 15.3972 7.39231 15.9933 6.22935C16.093 6.03469 16.2093 5.97585 16.424 6.0085C16.6213 6.03839 16.7885 6.12638 16.9169 6.28695C17.0015 6.39268 17.0224 6.50787 16.9755 6.64248C16.5306 7.91644 16.0885 9.19145 15.6454 10.466C15.64 10.4817 15.631 10.496 15.6169 10.5242V10.5242Z"
								fill="black"
							/>
						</svg>
					</el-tooltip>
				</div>
				<div class="cancelBtn">
					<el-tooltip
						class="item"
						effect="light"
						content="上一步"
						placement="top"
					>
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="undo"
						>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M11 6.61328L6 9.50003L11 12.3868V10H14.5C16.1569 10 17.5 11.3432 17.5 13C17.5 14.6569 16.1569 16 14.5 16H6C5.72386 16 5.5 16.2239 5.5 16.5C5.5 16.7762 5.72386 17 6 17H14.5C16.7091 17 18.5 15.2092 18.5 13C18.5 10.7909 16.7091 9.00003 14.5 9.00003H11V6.61328Z"
								fill="black"
								fill-opacity="0.9"
							/>
						</svg>
					</el-tooltip>

					<!-- <el-button-group style="display: flex">
						<el-button @click="undo" icon="el-icon-arrow-left"
							>上一步</el-button
						>
						<el-button @click="redo"
							>下一步<i class="el-icon-arrow-right el-icon--right"></i
						></el-button>
					</el-button-group> -->
				</div>

				<div class="cancelBtn">
					<el-tooltip
						class="item"
						effect="light"
						content="下一步"
						placement="top"
					>
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="redo"
						>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M13 6.61328L18 9.50003L13 12.3868V10H9.5C7.84315 10 6.5 11.3432 6.5 13C6.5 14.6569 7.84315 16 9.5 16H18C18.2761 16 18.5 16.2239 18.5 16.5C18.5 16.7762 18.2761 17 18 17H9.5C7.29086 17 5.5 15.2092 5.5 13C5.5 10.7909 7.29086 9.00003 9.5 9.00003H13V6.61328Z"
								fill="black"
								fill-opacity="0.9"
							/>
						</svg>
					</el-tooltip>
				</div>
				<!-- <div>
					<el-button @click="downloadCanvas" icon="el-icon-download"
						>下载</el-button
					>
				</div> -->

				<div class="closeBtn">
					<el-tooltip
						class="item"
						effect="light"
						content="结束绘画"
						placement="top"
					>
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="close()"
						>
							<circle cx="12" cy="12" r="10" fill="#EE3E3E" />
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M9.1439 7.6929C9.29275 7.89983 9.24568 8.18824 9.03876 8.33709C7.75653 9.25949 6.92308 10.7631 6.92308 12.4615C6.92308 15.2654 9.19609 17.5384 12 17.5384C14.8039 17.5384 17.0769 15.2654 17.0769 12.4615C17.0769 10.7631 16.2435 9.25949 14.9612 8.33709C14.7543 8.18824 14.7073 7.89983 14.8561 7.6929C15.005 7.48598 15.2934 7.43891 15.5003 7.58776C17.0133 8.67615 18 10.4536 18 12.4615C18 15.7752 15.3137 18.4615 12 18.4615C8.68629 18.4615 6 15.7752 6 12.4615C6 10.4536 6.98673 8.67615 8.49971 7.58776C8.70663 7.43891 8.99504 7.48598 9.1439 7.6929Z"
								fill="white"
								fill-opacity="0.9"
							/>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M12 5.53845C12.2549 5.53845 12.4615 5.74509 12.4615 5.99999V11.5385C12.4615 11.7934 12.2549 12 12 12C11.7451 12 11.5385 11.7934 11.5385 11.5385V5.99999C11.5385 5.74509 11.7451 5.53845 12 5.53845Z"
								fill="white"
								fill-opacity="0.9"
							/>
						</svg>
					</el-tooltip>

					<!-- <el-button @click.stop="close()">退出绘画</el-button> -->
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
// import html2canvas from "html2canvas";
import "element-ui/lib/theme-chalk/index.css";

export default {
	emits: ["close"],
	data() {
		return {
			show: false,
			showTool: false,
			canvas: null,
			ctx: null,
			brushColor: "#000000",
			brushSize: 5,
			mode: "draw",
			history: [],
			historyStep: -1,
			startX: 0,
			startY: 0,
			isDrawing: false,
			tempShape: null,
			tempCtx: null,
			openBrushColorBox: false,
			colorList: [
				"#000000",
				"#E2E1E5",
				"#FFFFFF",
				"#E11E1E",
				"#FA6402",
				"#F8B501",
				"#58C215",
				"#17CCA4",
				"#0290FB",
				"#6235FF",
			],
		};
	},
	mounted() {
		// this.initCanvas();
		// this.open();
	},
	methods: {
		open() {
			this.show = true;
			this.showTool = true;
			this.mode = "draw";
			this.history = [];
			this.historyStep = -1;
			this.startX = 0;
			this.startY = 0;
			this.isDrawing = false;
			this.tempShape = null;
			this.tempCtx = null;
			this.$nextTick(() => {
				document.body.style.overflow = "hidden"; //禁止页面滚动
				this.initCanvas();
			});
			this.$emit("changeStatus", true);
		},
		close() {
			this.show = false;
			this.showTool = false;
			this.mode = "draw";
			this.history = [];
			this.historyStep = -1;
			this.startX = 0;
			this.startY = 0;
			this.isDrawing = false;
			this.tempShape = null;
			this.tempCtx = null;
			document.body.style.overflow = "auto"; //允许页面滚动
			this.$emit("changeStatus", false);
			this.$emit("close");
		},
		initCanvas() {
			this.canvas = this.$refs.canvas;
			this.ctx = this.canvas.getContext("2d");
			this.canvas.width = window.innerWidth;
			this.canvas.height = window.innerHeight;
			this.saveState();
		},
		setMode(mode) {
			this.mode = mode;
		},
		clearCanvas() {
			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
			this.saveState();
		},
		downloadCanvas() {
			return;
			const canvas = this.$refs.canvas;
			this.showTool = false;
			// console.log(window.scrollX)
			// console.log(window.scrollY)
			// console.log(window.innerWidth)
			// console.log(window.innerHeight)
			// console.log(window.document.documentElement.clientWidth)
			// console.log(window.document.documentElement.clientHeight)
			// return;
			this.$nextTick(() => {
				html2canvas(document.body, {
					x: window.scrollX,
					y: window.scrollY,
					width: window.innerWidth,
					height: window.innerHeight,
					windowWidth: document.documentElement.clientWidth,
					windowHeight: document.documentElement.clientHeight,
					scrollX: 0,
					scrollY: 0,
				}).then((capturedCanvas) => {
					const ctx = capturedCanvas.getContext("2d");
					ctx.drawImage(canvas, 0, 0);

					const link = document.createElement("a");
					link.href = capturedCanvas.toDataURL("image/png");
					link.download = "canvas-drawing.png";
					link.click();
					this.showTool = true;
				});
			});
		},
		undo() {
			if (this.historyStep > 0) {
				this.historyStep--;
				this.restoreState();
			}
		},
		redo() {
			if (this.historyStep < this.history.length - 1) {
				this.historyStep++;
				this.restoreState();
			}
		},
		saveState() {
			this.history = this.history.slice(0, this.historyStep + 1);
			this.history.push(this.canvas.toDataURL());
			this.historyStep++;
		},
		restoreState() {
			const img = new Image();
			img.src = this.history[this.historyStep];
			img.onload = () => {
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				this.ctx.drawImage(img, 0, 0);
			};
		},
		handleMouseDown(event) {
			if (this.mode === "erase" || this.mode === "draw") {
				this.ctx.strokeStyle =
					this.mode === "erase" ? "white" : this.brushColor;
				this.ctx.lineWidth = this.brushSize;
				this.ctx.lineCap = "round";
				this.ctx.lineJoin = "round";
				this.isDrawing = true;
				this.ctx.beginPath();
				const rect = this.canvas.getBoundingClientRect();
				this.startX = event.clientX - rect.left;
				this.startY = event.clientY - rect.top;
				this.ctx.moveTo(this.startX, this.startY);
			} else if (["line", "rect", "circle"].includes(this.mode)) {
				this.tempShape = document.createElement("canvas");
				this.tempShape.width = this.canvas.width;
				this.tempShape.height = this.canvas.height;
				this.tempCtx = this.tempShape.getContext("2d");
				this.tempCtx.strokeStyle = this.brushColor;
				this.tempCtx.lineWidth = this.brushSize;
				this.tempCtx.fillStyle = this.brushColor;
				this.isDrawing = true;
				const rect = this.canvas.getBoundingClientRect();
				this.startX = event.clientX - rect.left;
				this.startY = event.clientY - rect.top;
			}
		},
		handleMouseMove(event) {
			if (!this.isDrawing) return;
			const rect = this.canvas.getBoundingClientRect();
			const x = event.clientX - rect.left;
			const y = event.clientY - rect.top;
			// this.drawPreviewSize(x,y)

			if (this.mode === "draw") {
				this.ctx.lineTo(x, y);
				this.ctx.stroke();
			} else if (this.mode === "erase") {
				this.ctx.beginPath();
				this.ctx.clearRect(
					x - this.brushSize / 2,
					y - this.brushSize / 2,
					this.brushSize * 3,
					this.brushSize * 3
				);
			} else if (this.tempShape) {
				this.tempCtx.clearRect(
					0,
					0,
					this.tempShape.width,
					this.tempShape.height
				);
				if (this.mode === "line") {
					this.tempCtx.beginPath();
					this.tempCtx.moveTo(this.startX, this.startY);
					this.tempCtx.lineTo(x, y);
					this.tempCtx.stroke();
				} else if (this.mode === "rect") {
					this.tempCtx.strokeRect(
						this.startX,
						this.startY,
						x - this.startX,
						y - this.startY
					);
				} else if (this.mode === "circle") {
					const radius = Math.sqrt(
						Math.pow(x - this.startX, 2) + Math.pow(y - this.startY, 2)
					);
					this.tempCtx.beginPath();
					this.tempCtx.arc(this.startX, this.startY, radius, 0, Math.PI * 2);
					this.tempCtx.stroke();
				}
				this.ctx.drawImage(this.tempShape, 0, 0);
				// this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				this.restoreState();
			}
		},
		drawPreviewSize(x, y) {
			if (this.mode === "draw" || this.mode === "erase") {
				const previewSize = this.mode === "draw" ? this.brushSize : 20; // 设置橡皮擦的大小
				const previewColor = this.mode === "draw" ? this.brushColor : "#FFFFFF"; // 设置橡皮擦的颜色

				this.previewX = x;
				this.previewY = y;

				this.ctx.save();
				this.ctx.strokeStyle = previewColor;
				this.ctx.lineWidth = previewSize;
				this.ctx.beginPath();
				this.ctx.arc(x, y, previewSize / 2, 0, Math.PI * 2);
				this.ctx.stroke();
				this.ctx.restore();
			}
		},
		clearPreview() {
			this.ctx.clearRect(this.previewX - 12, this.previewY - 12, 25, 25); // 清除预览的区域
		},
		handleMouseUp() {
			if (!this.isDrawing) return;
			this.isDrawing = false;
			this.ctx.closePath();
			if (this.tempShape) {
				this.ctx.drawImage(this.tempShape, 0, 0);
				this.tempShape = null;
				this.tempCtx = null;
			}
			this.saveState();
		},
		handleTouchStart(event) {
			event.preventDefault();
			const touch = event.touches[0];
			this.handleMouseDown({
				clientX: touch.clientX,
				clientY: touch.clientY,
			});
		},
		handleTouchMove(event) {
			event.preventDefault();
			const touch = event.touches[0];
			this.handleMouseMove({
				clientX: touch.clientX,
				clientY: touch.clientY,
			});
		},
		handleTouchEnd(event) {
			event.preventDefault();
			this.handleMouseUp();
		},
		setColor(newColor) {
			this.brushColor = newColor;
			this.openBrushColorBox = false;
			this.setMode("draw");
		},
		changeOpenBrushColorBox(newValue) {
			this.openBrushColorBox = newValue;
		},
	},
	watch: {
		brushColor(newColor) {
			this.ctx.strokeStyle = newColor;
		},
		brushSize(newSize) {
			this.ctx.lineWidth = newSize;
		},
	},
};
</script>

<style scoped>
.drawing-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0);
}

.toolbar {
	position: fixed;
	bottom: 0;
	left: 50%;
	width: auto;
	background: #ffffff;
	color: white;
	padding: 10px;
	bottom: 3vh;
	border-radius: 8px 8px 0 0;
	box-shadow: 0px 8px 10px -5px #00000014;
	box-shadow: 0px 16px 24px 2px #0000000a;
	box-shadow: 0px 6px 30px 5px #0000000d;
	transform: translateX(-50%);
	max-width: 100vw;
}

.toolbar-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.toolbar-container > div {
	margin: 0 20px;
	width: auto;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.el-button.active {
	background-color: #409eff;
	color: white;
}

.closeBtn > svg {
	width: 45px;
	height: 45px;
	cursor: pointer;
}

.cancelBtn > svg {
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.clearScreenBtn > svg {
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.eraserBtn > svg {
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.brushBtn > svg {
	width: 35px;
	height: 35px;
	cursor: pointer;
	border-radius: 8px;
	box-sizing: border-box;
	padding: 2px;
}

.brushBtn_colorBox {
	width: 250px;
	height: auto;
	background-color: #ffffff;
	position: absolute;
	bottom: 0;
	margin-bottom: 70px;
	padding: 4px, 8px, 4px, 8px;
	box-shadow: 0px 4px 10px 0px #1d398314;
	box-shadow: 1px 1px 20px 4px #1d39830d;
	left: 0;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.brushBtn_colorBox > span {
	width: 25px;
	height: 25px;
	border-radius: 100%;
	cursor: pointer;
	margin: 10px;
	box-sizing: border-box;
}

.selectBox {
	/* width: 30px;
	height: 30px; */
	display: flex !important;
	justify-content: center;
	align-items: center;
	padding: 5px !important;
	margin-left: 5px;
}
</style>