使用D3.js如何获取平面内矩形绕中心点旋转后的x、y坐标

你原本使用的旋转变换逻辑是正确的，仅存在笔误：公式中的con(rotation)应为cos(rotation)，修正后即可得到正确结果，以下是完整的适配D3.js、Canvas场景的解决方案：

• 参数定义
  • 原始坐标(x, y)：矩形旋转前的任意顶点坐标
  • 中心点(c1, c2)：矩形自身中心点，计算方式为c1 = 矩形左上角x坐标 + 矩形宽度 / 2，c2 = 矩形左上角y坐标 + 矩形高度 / 2
  • 旋转角度rotation：注意D3.js、原生JS的三角函数默认使用弧度作为单位，如果你持有的是角度值，需要先转换为弧度：弧度 = 角度 * Math.PI / 180
• 修正后的标准旋转坐标计算公式

  // 旋转后x坐标
  const rotatedX = (x - c1) * Math.cos(rotation) - (y - c2) * Math.sin(rotation) + c1;
  // 旋转后y坐标
  const rotatedY = (x - c1) * Math.sin(rotation) + (y - c2) * Math.cos(rotation) + c2;
  

• D3.js场景简化调用方案
  可以直接使用D3.js内置的变换工具避免手动计算出错：

  // 定义变换规则：先偏移到中心点，旋转后再偏移回来
  const transform = d3.transform()
    .translate(c1, c2)
    .rotate(rotation * 180 / Math.PI) // d3.transform的rotate方法接受角度值，弧度需先转角度
    .translate(-c1, -c2)
    .toString();
  const pointTransform = d3.pointTransform(transform);
  // 传入原始坐标直接获取旋转后坐标
  const [rotatedX, rotatedY] = pointTransform([x, y]);
  

• Canvas场景性能优化方案
  如果仅需要在Canvas上渲染旋转后的矩形，无需手动计算每个顶点坐标，直接操作Canvas上下文变换即可，性能更高：

  const ctx = canvas.getContext('2d');
  ctx.save(); // 保存当前绘制上下文状态
  ctx.translate(c1, c2); // 将坐标系原点移动到矩形中心点
  ctx.rotate(rotation); // 旋转坐标系
  // 以中心点为原点绘制矩形
  ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
  ctx.restore(); // 恢复上下文状态，避免影响后续其他元素绘制
  

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