绘制拖拽html

zfyljx
已于 2025-05-07 19:33:40 修改
阅读量207
点赞数 2
文章标签： html css 前端
于 2025-05-07 19:29:18 首次发布
本文链接：https://blog.csdn.net/weixin_41334434/article/details/147772699
版权
<!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 button
      const 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, se
        startX: 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>