[React로 화이트보드] 마우스를 이용한 자연스러운 Rotate, Scale 구현하기

Rotate 구현 시 마우스 드래그에 따른 회전이 자연스럽지 않은 문제가 있었다.

 

처음 구현 시 마우스의 이전위치와 현재위치값의 변화량으로 element의 rotate값을 변경해줬다.

 

코드 자체는 문제가 없으나 ui상으로 마우스가 도형 위쪽에서 좌->우로 Drag할때와 도형 아래쪽에서 좌->우로 Drag할때 적용되는 angle값이 반대로 적용되야 자연스러운 움직임을 보여줄 수 있을 것이다. 상->하로 Drag되는 경우도 현재 마우스의 위치가 도형의 어디에 위치해 있느냐에 따라 다른 계산을 해줘야 우리가 원하는 동작을 볼 수 있다.

 

그래서 현재 element.getBoundingClientRect()을 사용하여 CenterX, CenterY를 구하고, 이를 이용해 도형기준 마우스의 현재 위치에 따라서 다른 동작을 하도록 구현했다.

	  const rect = selectionLayoutRef.current.getBoundingClientRect();
          const centerX = rect.left + rect.width / 2;
          const centerY = rect.top + rect.height / 2;

          let dx = deltaX;
          let dy = deltaY;
          if (mouseY > centerY) dx *= -1;
          if (mouseX < centerX) dy *= -1;

          const angle = dx + dy;

          element.rotate += angle;

 

 

잘 동작한다.