Изменение размера SVG, повернутого вокруг его источника - PullRequest
Новая
       11

Изменение размера SVG, повернутого вокруг его источника

0 голосов
/ 18 мая 2018

У меня есть прямоугольный svg, который можно перетащить вокруг 2D-плоскости, повернуть вокруг его собственного источника и изменить его размер.

enter image description here

class SVG extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      x: 100,
      y: 100,
      width: 50,
      height: 50,
      angle: 0,
      focusedElement: null
    }
  }
  
  handleMouseDown = (e) => {
    const focusedElement = e.target.getAttribute('data-element-type')
    this.setState({focusedElement})
  }
  
  handleMouseMove = (e) => {
    const {focusedElement} = this.state 
    if (!focusedElement) return
    else if (focusedElement === 'rectangle') this.moveRectangle(e)
    else if (focusedElement === 'resize') this.resizeRectangle(e)
    else if (focusedElement === 'rotate') this.rotateRectangle(e)
  }
  
  handleMouseUp = () => {
    this.setState({focusedElement: null})
  }
  
  moveRectangle = (e) => {
    const {width, height} = this.state
    
    this.setState({
      x: e.clientX - width / 2,
      y: e.clientY - height / 2
    })
  }
  
  resizeRectangle = (e) => {
    const {x, y} = this.state
    this.setState({
      width: e.clientX - x,
      height: e.clientY - y
    })
  }
  
  rotateRectangle = (e) => {
    const {x, y, width, height} = this.state
    const origin = {
      x: x + (width / 2),
      y: y + (height / 2),
    }
    const angle = Math.atan2(
      e.clientY - origin.y, 
      e.clientX - origin.x
    ) * 180 / Math.PI
    
    this.setState({angle})
  }
  
  render() {
    const {width, height, x, y, angle} = this.state
    
    return (
      <svg
        viewPort="0 0 300 300"
        style={{width: 300, height: 300, backgroundColor: '#999'}}
        onMouseUp={this.handleMouseUp}
        onMouseMove={this.handleMouseMove}
        onMouseDown={this.handleMouseDown}
      >
        <g
          transform={`
            translate(${x}, ${y})
            rotate(${angle}, ${(width / 2)}, ${(height / 2)})
          `}
        >
           
          <rect 
            width={width}
            height={height}
            fill="salmon"
            data-element-type="rectangle"
          />

          <rect 
            width={10}
            height={10}
            x={width - 10}
            y={height - 10}
            data-element-type="resize"
            fill="black"
          />

          <circle 
            r="7"
            cx={width + 7}
            cy={height / 2}
            data-element-type="rotate"
            fill="blue"
          />

        </g>
      </svg>
    )
  }
}

ReactDOM.render(<SVG />, document.getElementById('app'))
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

</head>
<body>
  <div id="app"></div>
</body>
</html>

нажатие и перетаскивание тела позволяет перемещаться вокруг плоскости, синий круг справа вращается, а нижний правый квадрат изменяет размер

Изменение размера, перемещение по плоскости и поворот на 0 градусов - все работает по желанию

проблемы возникают, когда я пытаюсь изменить размер после вращения, svg width и height изменяются так, как если бы он не был повернут

мой вопрос, как вы подходите к масштабированию width, height, x и y фигуры, чтобы получить UX, более похожий на фотошоп или как http://editor.method.ac/ обрабатывает изменение размеров вращаемых элементов?

Вот полный пример в JSBin https://jsbin.com/mapumif/edit?js,output

note JSBin, кажется, глючит, поэтому, если он не рендерит сразу, нажмите кнопку «Run with JS» 10x или около того

Я использую компонент реагирования для поддержания состояния, но любое решение более чем приветствуется

Как всегда, все идеи приветствуются, спасибо за просмотр

1 Ответ

0 голосов
/ 07 июня 2018

Это решение работает с использованием преобразования матрицы для учета угла формы при изменении размера по высоте и ширине, в то время как функции cos и sin учитывают изменение координат, вызванное изменением ширины и высоты. 

resizeRectangle = (e) => {
const {x, y, angle, width, height} = this.state

const point = this.svg.createSVGPoint()
point.x = e.clientX
point.y = e.clientY


const rotatedPoint = point.matrixTransform(
  this.rect.getScreenCTM().inverse()     
)

const widthDifference = rotatedPoint.x - width
const heightDifference = rotatedPoint.y - height

const widthOriginMovementRight = widthDifference * Math.cos(angle * Math.PI / 180) 
const widthOriginMovementDown = widthDifference * Math.sin(angle * Math.PI / 180)
const heightOriginMovementRight = heightDifference * Math.cos((angle+90) * Math.PI / 180)
const heightOriginMovementDown = heightDifference * Math.sin((angle+90) * Math.PI / 180)
const sumMovementX = widthOriginMovementRight + heightOriginMovementRight - widthDifference
const sumMovementY = widthOriginMovementDown + heightOriginMovementDown - heightDifference


this.setState({
  width: rotatedPoint.x,
  height: rotatedPoint.y,
  x: x + (sumMovementX /2) , 
  y: y + (sumMovementY /2)
})

та же техника, используемая для нахождения повернутой точки, должна быть введена и в логику рендеринга 

 render() {
const {width, height, x, y, angle, focusedElement, start} = this.state


if (this.svg) {
  const point = this.svg.createSVGPoint()
  point.x = x 
  point.y = y
  var rotatedPoint = point.matrixTransform(
    this.rect.getScreenCTM().inverse()
  )
}

и в операторе возврата 

 return (
  <div>
  <svg
    ref={node => this.svg = node}
    viewPort="0 0 300 300"
    style={{width: 300, height: 300, backgroundColor: '#999'}}
    onMouseUp={this.handleMouseUp}
    onMouseMove={this.handleMouseMove}
    onMouseDown={this.handleMouseDown}
  >

    <g
      transform={
       ((!focusedElement && !!rotatedPoint) || focusedElement === 'resize') ?
        `
         translate(${x}, ${y})
         rotate(${angle})
         translate(${-rotatedPoint.x}, ${-rotatedPoint.y})

       `
        :
       `
         translate(${x}, ${y})
         rotate(${angle}, ${(width / 2)}, ${(height / 2)})
       `
      }
      ref={node => this.rect = node}
    >
...