使用moveable-react组件时，拖拽旋转后的对象为何会重置旋转角度？

用moveable-react实现可拖拽、可旋转功能时，旋转对象正常，但拖拽已经转过的元素到新位置时，旋转角度会重置为初始状态。相关代码如下：

onDrag={({ target, beforeTranslate }) => {
  target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`;
}}
onRotate={({ target, transform }) => {
  target.style.transform = transform;
}}

旋转后的效果：

拖拽至新位置后的效果（旋转已重置）：

问题根源是onDrag回调里直接用translate覆盖了整个transform属性，把之前旋转产生的变换完全清除了。

直接改用moveable提供的transform参数即可，它已经包含了当前元素的所有变换（包括之前的旋转+当前的位移）：

onDrag={({ target, transform }) => {
  target.style.transform = transform;
}}
onRotate={({ target, transform }) => {
  target.style.transform = transform;
}}

如果需要在组件其他逻辑中复用这个变换状态，也可以用状态变量存起来：

import { useState } from 'react';

// 组件内部定义状态
const [elemTransform, setElemTransform] = useState('');

onDrag={({ target, transform }) => {
  target.style.transform = transform;
  setElemTransform(transform);
}}
onRotate={({ target, transform }) => {
  target.style.transform = transform;
  setElemTransform(transform);
}}

这样拖拽时就能保留之前的旋转角度，不会出现重置问题。

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