React实现SVG内g包裹的rect元素鼠标拖拽缩放的方案咨询

你要的可交互缩放效果完全可以实现，和你了解过的SVG缩放库的核心逻辑一致，无需依赖第三方库就能适配你的现有SVG结构。

基础实现逻辑 #

• 先为目标rect补全计算所需的基础属性：x坐标、y坐标、宽度、高度，所有缩放操作都基于这些基准值计算
• 在rect的四个边角渲染小型可交互的矩形作为缩放手柄，绑定鼠标按下的触发事件
• 全局监听鼠标移动、鼠标抬起事件，根据拖拽偏移量实时更新rect的属性值

基础实现代码示例 #

import { useState, useRef, useCallback } from 'react'

export default function ResizableRect() {
  // 存储rect的实时属性
  const [rectProps, setRectProps] = useState({
    x: 50,
    y: 50,
    width: 200,
    height: 150,
  })
  // 存储当前缩放状态
  const resizeState = useRef({
    isResizing: false,
    startX: 0,
    startY: 0,
    originRect: {},
    handleType: ''
  })

  // 手柄鼠标按下，触发缩放状态
  const onHandleMouseDown = (e, handleType) => {
    e.stopPropagation()
    resizeState.current = {
      isResizing: true,
      startX: e.clientX,
      startY: e.clientY,
      originRect: {...rectProps},
      handleType
    }
    window.addEventListener('mousemove', onMouseMove)
    window.addEventListener('mouseup', onMouseUp)
  }

  // 鼠标移动，实时计算新的rect属性
  const onMouseMove = useCallback((e) => {
    const state = resizeState.current
    if (!state.isResizing) return
    const deltaX = e.clientX - state.startX
    const deltaY = e.clientY - state.startY
    const origin = state.originRect

    setRectProps(() => {
      const newProps = {...origin}
      // 匹配不同边角手柄的缩放逻辑
      switch(state.handleType) {
        case 'top-left':
          newProps.x = origin.x + deltaX
          newProps.y = origin.y + deltaY
          newProps.width = origin.width - deltaX
          newProps.height = origin.height - deltaY
          break
        case 'top-right':
          newProps.y = origin.y + deltaY
          newProps.width = origin.width + deltaX
          newProps.height = origin.height - deltaY
          break
        case 'bottom-left':
          newProps.x = origin.x + deltaX
          newProps.width = origin.width - deltaX
          newProps.height = origin.height + deltaY
          break
        case 'bottom-right':
          newProps.width = origin.width + deltaX
          newProps.height = origin.height + deltaY
          break
      }
      // 最小尺寸限制
      newProps.width = Math.max(newProps.width, 20)
      newProps.height = Math.max(newProps.height, 20)
      return newProps
    })
  }, [])

  // 鼠标抬起，结束缩放状态
  const onMouseUp = () => {
    resizeState.current.isResizing = false
    window.removeEventListener('mousemove', onMouseMove)
    window.removeEventListener('mouseup', onMouseUp)
  }

  // 计算四个缩放手柄的位置
  const handleSize = 8
  const handles = [
    {type: 'top-left', x: rectProps.x - handleSize/2, y: rectProps.y - handleSize/2, cursor: 'nw-resize'},
    {type: 'top-right', x: rectProps.x + rectProps.width - handleSize/2, y: rectProps.y - handleSize/2, cursor: 'ne-resize'},
    {type: 'bottom-left', x: rectProps.x - handleSize/2, y: rectProps.y + rectProps.height - handleSize/2, cursor: 'sw-resize'},
    {type: 'bottom-right', x: rectProps.x + rectProps.width - handleSize/2, y: rectProps.y + rectProps.height - handleSize/2, cursor: 'se-resize'},
  ]

  return (
    <svg width="500" height="400" style={{border: '1px solid #eee'}}>
      <g>
        <rect 
          x={rectProps.x}
          y={rectProps.y}
          width={rectProps.width}
          height={rectProps.height}
          fill="#42b983"
          stroke="#2c3e50"
        />
        {/* 渲染缩放手柄 */}
        {handles.map(handle => (
          <rect
            key={handle.type}
            x={handle.x}
            y={handle.y}
            width={handleSize}
            height={handleSize}
            fill="#fff"
            stroke="#2c3e50"
            style={{cursor: handle.cursor}}
            onMouseDown={(e) => onHandleMouseDown(e, handle.type)}
          />
        ))}
      </g>
    </svg>
  )
}

实操注意事项 #

• 坐标系换算：如果SVG本身存在外层缩放、偏移变换，记得把鼠标的视口坐标转换为SVG内部的逻辑坐标，否则会出现拖拽时元素位置和鼠标位置错位的问题，坐标转换可以通过SVG内置的getScreenCTM()方法完成
• 拖拽状态的事件监听必须绑定到window全局对象，不能只绑定在手柄元素上，否则鼠标快速移动超出元素边界时会直接中断拖拽
• 建议添加最小宽高限制，避免拖拽过度把rect压缩到不可见的0尺寸
• 你的现有结构中rect嵌套在g标签内，只要保持属性计算的坐标系和g标签一致，完全不需要改动原有g标签的结构

内容的提问来源于stack exchange，提问作者Emre Sert