当前位置：首页 > news >正文

绘制拖拽html

news 来源：原创 2025/5/11 15:44:58

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>拖拽绘制矩形框 - 可移动可调整大小</title>
<style>body, html {margin: 0; padding: 0; height: 100%;user-select: none;}#container {position: relative;width: 100vw;height: 100vh;background-color: #f0f0f0;border: 1px solid #ccc;overflow: hidden;}.rectangle {position: absolute;border: 2px solid;background-color: rgba(0, 123, 255, 0.2);cursor: move;box-sizing: border-box;}.delete-btn {position: absolute;top: -8px;right: -8px;width: 16px;height: 16px;background: #ff4d4f;color: white;font-weight: bold;font-size: 12px;line-height: 16px;text-align: center;border-radius: 50%;cursor: pointer;user-select: none;z-index: 1000;pointer-events: auto;}.resize-handle {position: absolute;width: 10px;height: 10px;background: white;border: 2px solid #007bff;box-sizing: border-box;z-index: 10;}.resize-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }.resize-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }.resize-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }.resize-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }#info {position: fixed;bottom: 10px;left: 10px;max-height: 150px;overflow-y: auto;background: rgba(255,255,255,0.9);border: 1px solid #ccc;padding: 8px;font-family: monospace;font-size: 14px;width: 320px;}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><strong>绘制的矩形框信息:</strong><br/></div>
<script>(function() {const container = document.getElementById('container');const info = document.getElementById('info');let startX = 0;let startY = 0;let currentRect = null;let rectangles = [];let dragData = null; // {rect, startX, startY, origX, origY}let resizeData = null; // {rect, handle, startX, startY, origX, origY, origW, origH}const colors = ['#007bff', '#28a745', '#dc3545', '#ffc107', '#17a2b8','#6f42c1', '#e83e8c', '#fd7e14', '#20c997', '#6610f2'];function getRelativePosition(clientX, clientY) {const rect = container.getBoundingClientRect();return {x: clientX - rect.left,y: clientY - rect.top};}function updateInfoLine(rect) {if (!rect._infoLine) return;const x = parseFloat(rect.style.left);const y = parseFloat(rect.style.top);const w = parseFloat(rect.style.width);const h = parseFloat(rect.style.height);rect._infoLine.textContent = `矩形框 ${rectangles.indexOf(rect) + 1}: x=${Math.round(x)}, y=${Math.round(y)}, 宽=${Math.round(w)}, 高=${Math.round(h)}`;}function createResizeHandle(position) {const handle = document.createElement('div');handle.className = 'resize-handle ' + position;return handle;}container.addEventListener('mousedown', (e) => {if (e.button !== 0) return; // only left mouse buttonconst target = e.target;// 如果点击的是删除按钮if (target.classList.contains('delete-btn')) {return; // 由其自身的监听器处理}// 如果点击的是调整大小的控制点if (target.classList.contains('resize-handle')) {const rect = target.parentElement;const pos = getRelativePosition(e.clientX, e.clientY);resizeData = {rect,handle: target.classList[1], // nw, ne, sw, sestartX: pos.x,startY: pos.y,origX: parseFloat(rect.style.left),origY: parseFloat(rect.style.top),origW: parseFloat(rect.style.width),origH: parseFloat(rect.style.height)};e.preventDefault();return;}// 如果点击的是已有的矩形（非删除或调整大小）if (target.classList.contains('rectangle')) {const rect = target;const pos = getRelativePosition(e.clientX, e.clientY);dragData = {rect,startX: pos.x,startY: pos.y,origX: parseFloat(rect.style.left),origY: parseFloat(rect.style.top)};e.preventDefault();return;}// 否则，开始绘制新的矩形const pos = getRelativePosition(e.clientX, e.clientY);startX = pos.x;startY = pos.y;currentRect = document.createElement('div');currentRect.className = 'rectangle';// 颜色循环分配const color = colors[rectangles.length % colors.length];currentRect.style.borderColor = color;currentRect.style.backgroundColor = color + '33'; // 20% 透明度currentRect.style.left = startX + 'px';currentRect.style.top = startY + 'px';currentRect.style.width = '0px';currentRect.style.height = '0px';container.appendChild(currentRect);rectangles.push(currentRect);// 创建信息行元素const infoLine = document.createElement('div');infoLine.style.display = 'flex';infoLine.style.alignItems = 'center';infoLine.style.marginBottom = '4px';// 创建文本节点，显示矩形信息const infoText = document.createElement('span');infoText.textContent = `矩形框 ${rectangles.length}: x=0, y=0, 宽=0, 高=0`;infoLine.appendChild(infoText);// 创建删除按钮const infoDeleteBtn = document.createElement('button');infoDeleteBtn.textContent = '删除';infoDeleteBtn.style.marginLeft = '10px';infoDeleteBtn.style.cursor = 'pointer';infoDeleteBtn.style.padding = '2px 6px';infoDeleteBtn.style.border = '1px solid #ccc';infoDeleteBtn.style.backgroundColor = '#f8f9fa';infoDeleteBtn.style.borderRadius = '4px';infoDeleteBtn.style.fontSize = '12px';infoDeleteBtn.style.color = '#333';infoDeleteBtn.style.userSelect = 'none';// 删除按钮点击事件，删除对应矩形和信息行(function(rect, line) {infoDeleteBtn.addEventListener('click', function() {// 删除对应矩形元素if (container.contains(rect)) {container.removeChild(rect);}// 删除对应信息行if (info.contains(line)) {info.removeChild(line);}// 从数组中移除对应矩形const index = rectangles.indexOf(rect);if (index > -1) {rectangles.splice(index, 1);}});})(currentRect, infoLine);// 将删除按钮添加到信息行infoLine.appendChild(infoDeleteBtn);// 将信息行添加到info面板info.appendChild(infoLine);// 存储引用以便后续更新和删除currentRect._infoLine = infoText;e.preventDefault();});container.addEventListener('mousemove', (e) => {const pos = getRelativePosition(e.clientX, e.clientY);// 处理调整大小if (resizeData) {const {rect, handle, startX, startY, origX, origY, origW, origH} = resizeData;let newX = origX;let newY = origY;let newW = origW;let newH = origH;const dx = pos.x - startX;const dy = pos.y - startY;switch (handle) {case 'nw':newX = origX + dx;newY = origY + dy;newW = origW - dx;newH = origH - dy;break;case 'ne':newY = origY + dy;newW = origW + dx;newH = origH - dy;break;case 'sw':newX = origX + dx;newW = origW - dx;newH = origH + dy;break;case 'se':newW = origW + dx;newH = origH + dy;break;}// 防止宽高为负if (newW < 10) newW = 10;if (newH < 10) newH = 10;if (newX < 0) newX = 0;if (newY < 0) newY = 0;if (newX + newW > container.clientWidth) newX = container.clientWidth - newW;if (newY + newH > container.clientHeight) newY = container.clientHeight - newH;rect.style.left = newX + 'px';rect.style.top = newY + 'px';rect.style.width = newW + 'px';rect.style.height = newH + 'px';updateInfoLine(rect);e.preventDefault();return;}// 处理拖拽if (dragData) {const {rect, startX, startY, origX, origY} = dragData;let newX = origX + (pos.x - startX);let newY = origY + (pos.y - startY);// 保持在容器内if (newX < 0) newX = 0;if (newY < 0) newY = 0;if (newX + rect.clientWidth > container.clientWidth) newX = container.clientWidth - rect.clientWidth;if (newY + rect.clientHeight > container.clientHeight) newY = container.clientHeight - rect.clientHeight;rect.style.left = newX + 'px';rect.style.top = newY + 'px';updateInfoLine(rect);e.preventDefault();return;}// 处理绘制新矩形if (!currentRect) return;const x = Math.min(pos.x, startX);const y = Math.min(pos.y, startY);const width = Math.abs(pos.x - startX);const height = Math.abs(pos.y - startY);currentRect.style.left = x + 'px';currentRect.style.top = y + 'px';currentRect.style.width = width + 'px';currentRect.style.height = height + 'px';updateInfoLine(currentRect);e.preventDefault();});container.addEventListener('mouseup', (e) => {if (currentRect) {currentRect = null;e.preventDefault();}if (dragData) {dragData = null;e.preventDefault();}if (resizeData) {resizeData = null;e.preventDefault();}});container.addEventListener('mouseleave', (e) => {if (currentRect) {currentRect = null;}if (dragData) {dragData = null;}if (resizeData) {resizeData = null;}});// 监听容器子元素变化，给新矩形添加调整大小控制点const observer = new MutationObserver(mutations => {mutations.forEach(mutation => {mutation.addedNodes.forEach(node => {if (node.classList && node.classList.contains('rectangle')) {['nw', 'ne', 'sw', 'se'].forEach(pos => {const handle = createResizeHandle(pos);node.appendChild(handle);});}});});});observer.observe(container, { childList: true });})();
</script>
</body>
</html>