首页 > 其他分享> > 在线画布自定义选区 Selection 的主要设计与 Demo

在线画布自定义选区 Selection 的主要设计与 Demo

2021-11-19 12:59:07 作者：互联网

选区主要设计

Selection 的 UI
Selection 的 Rect(width,height) 变化
Selection 的 Position 变化
在浏览器的 DOM 中，Selection 在鼠标点击位置的垂直线右侧变化于左侧变化的计算

Demo 演示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body {
				background-color: #eee;
			}
			* {
				margin: 0;
				padding: 0;
				box-sizing: content-box;
			}
			.main {
				background-color: white;
				box-shadow: 0 2px 4px 0px #333;
				width: 960px;
				height: 720px;
				padding: 20px 40px;
			}
			.wrapper {
				margin: 0 auto;
				width: 960px;
				height: 720px;
				position: relative;
			}
			.selection {
				border: 1px #33a3dc solid;
				background-color: #33a3dc;
				opacity: 0.3;
				display: none;
				position: fixed;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="main" id="main">
				<div class="paragraph">你好啊</div>
			</div>
			<div class="selection" id="selection"></div>
		</div>
		<script>
			let selectionShow = false;
			let selectionRect = {
				x: 0,
				y: 0,
				w: 0,
				h: 0,
			};
			let mainEl = document.getElementById("main");
			let eventContext = window;
			function redrawSelection() {
				let selectionEl = document.getElementById("selection");
				if (!selectionShow) {
					selectionEl.style.display = selectionShow
						? "block"
						: "none";
				} else {
					selectionEl.style.display = selectionShow
						? "block"
						: "none";
				}
				let mainElOffsetX = 0; //mainEl.getBoundingClientRect().x;
				let mainElOffsetY = 0;
				if (selectionRect.w < 0) {
					selectionEl.style.left =
						mainElOffsetX +
						selectionRect.x +
						selectionRect.w +
						"px";
					selectionEl.style.width = Math.abs(selectionRect.w) + "px";
				} else {
					selectionEl.style.left =
						mainElOffsetX + selectionRect.x + "px";
					selectionEl.style.width = selectionRect.w + "px";
				}
				if (selectionRect.h < 0) {
					selectionEl.style.top =
						mainElOffsetY +
						selectionRect.y +
						selectionRect.h +
						"px";

					selectionEl.style.height = Math.abs(selectionRect.h) + "px";
				} else {
					selectionEl.style.top =
						mainElOffsetY + selectionRect.y + "px";

					selectionEl.style.height = selectionRect.h + "px";
				}
			}
			eventContext.addEventListener("mousedown", function (evt) {
				selectionShow = true;
				console.log("mousedown", evt);
				selectionRect.x = evt.clientX;
				selectionRect.y = evt.clientY;
				redrawSelection();
			});
			eventContext.addEventListener("mousemove", function (evt) {
				if (selectionShow) {
					console.log("mousemove", evt);
					selectionRect.w = evt.clientX - selectionRect.x;
					selectionRect.h = evt.clientY - selectionRect.y;
					redrawSelection();
				}
			});

			eventContext.addEventListener("mouseup", function (evt) {
				selectionShow = false;
				redrawSelection();
			});
		</script>
	</body>
</html>

体验地址

在这里插入图片描述

https://codesandbox.io/s/autumn-voice-4ghxn?file=/index.html

标签：style,Selection,自定义,Demo,px,selectionEl,selectionRect,evt,selectionShow
来源： https://blog.csdn.net/terrychinaz/article/details/121419965