转换skewX/skewY为skew-angle/skew-length时长度值偏差排查

我正在解析transform属性的skewX与skewY值，目标是输出均为角度单位的skew-angle和skew-length。当前实现的JavaScript代码如下：

const handleSkew = ({
  skewX,
  skewY,
}: Readonly<{ skewX: number, skewY: number }>) => {

  const angle = rad2Deg(Math.atan2(skewY, skewX))
  let length = rad2Deg(Math.sqrt(Math.pow(skewX, 2) + Math.pow(skewY, 2)))

  if (skewX > 0 || skewY < 0) {
    length = -length
  }

  return { length, angle }
}

const rad2Deg = (rad: number) => {
  return (rad * 180.0) / Math.PI
}

该代码可正确输出倾斜方向与角度，但长度值存在轻微偏差，请求指出问题所在。

问题根源 #

长度值计算逻辑错误：你直接将skewX和skewY的平方和开根号后的结果转换为角度，但这个结果实际上是合成倾斜的正切值，而非弧度值。正确的步骤应该是先通过Math.atan()将正切值转换为对应的弧度，再转换为角度单位。

举个例子：如果skewX=1（对应45度倾斜的正切值）、skewY=0，原代码计算sqrt(1²+0²)=1，转角度后得到约57.3度，但实际正确的长度值应该是45度——因为atan(1)才是45度对应的弧度。

修正后的代码 #

const handleSkew = ({
  skewX,
  skewY,
}: Readonly<{ skewX: number, skewY: number }>) => {
  // 计算合成倾斜的正切值模长
  const tanMagnitude = Math.sqrt(Math.pow(skewX, 2) + Math.pow(skewY, 2));
  // 将正切值转换为弧度后再转角度，得到正确的length
  let length = rad2Deg(Math.atan(tanMagnitude));
  // 角度计算逻辑保持不变
  const angle = rad2Deg(Math.atan2(skewY, skewX));

  if (skewX > 0 || skewY < 0) {
    length = -length;
  }

  return { length, angle };
}

const rad2Deg = (rad: number) => {
  return (rad * 180.0) / Math.PI;
}

额外说明 #

如果你的skewX和skewY输入本身是角度值（比如从CSS skew(30deg, 45deg)解析出的30、45），还需要先将角度转换为对应的正切值再计算，因为skew变换的本质是基于正切的线性变换：

const deg2Rad = (deg: number) => (deg * Math.PI) / 180.0;

const handleSkew = ({
  skewX,
  skewY,
}: Readonly<{ skewX: number, skewY: number }>) => {
  // 将角度转换为正切值
  const tx = Math.tan(deg2Rad(skewX));
  const ty = Math.tan(deg2Rad(skewY));
  
  const tanMagnitude = Math.sqrt(Math.pow(tx, 2) + Math.pow(ty, 2));
  let length = rad2Deg(Math.atan(tanMagnitude));
  const angle = rad2Deg(Math.atan2(ty, tx));

  // 符号判断基于转换后的正切值
  if (tx > 0 || ty < 0) {
    length = -length;
  }

  return { length, angle };
}

const rad2Deg = (rad: number) => {
  return (rad * 180.0) / Math.PI;
}

内容的提问来源于stack exchange，提问作者Johan Martin Aarstein