怎么求旋转矩形的中心点

怎么求旋转矩形的中心点

已知矩形的旋转后的左上角 x,y, 矩形宽高 w,h, 和旋转角度 rotation, 求旋转后的矩形中心点

这个乍一看, 好像有点无从下手, 但是我们可以换个角度思考

想象一下, 你的这个矩形是从一个端正的矩形绕着左上角旋转过来的, 那么旋转后的矩形中心点不就是这个端正的矩形中心点绕着左上角旋转后的点吗?

现在我们把矩形左上角当坐标原点, 则其"原始"中心坐标(dx, dy)(w/2, h/2)

其旋转后的中心点坐标为 (dx * Math.cos(radian) - dy * Math.sin(radian), dx * Math.sin(radian) + dy * Math.cos(radian))

现在我们再把坐标系偏移回来, 横偏移量就是 x, 纵偏移量就是 y

把我们计算出来的中心点坐标给同步偏移回来, 即把之前所得中心点坐标分别加上 x 和 y, 就得到了旋转后的矩形中心点

最后, 完整代码如下

tsx 复制代码
function getRotatedRectCenter(
  x: number,
  y: number,
  w: number,
  h: number,
  angle: number
) {
  const dx = w / 2
  const dy = h / 2
  // 角度转弧度
  const radian = (angle * Math.PI) / 180
  const cos = Math.cos(radian)
  const sin = Math.sin(radian)
  return {
    x: x + dx * cos - dy * sin,
    y: y + dx * sin + dy * cos,
  }
}
相关推荐
龙在天12 分钟前
npm run dev 做了什么❓小白也能看懂
前端
hellokai1 小时前
React Native新架构源码分析
android·前端·react native
li理1 小时前
鸿蒙应用开发完全指南:深度解析UIAbility、页面与导航的生命周期
前端·harmonyos
去伪存真1 小时前
因为rolldown-vite比vite打包速度快, 所以必须把rolldown-vite在项目中用起来🤺
前端
KubeSphere1 小时前
Kubernetes v1.34 重磅发布:调度更快,安全更强,AI 资源管理全面进化
前端
wifi歪f2 小时前
🎉 Stenciljs,一个Web Components框架新体验
前端·javascript
1024小神2 小时前
如何快速copy复制一个网站,或是将网站本地静态化访问
前端
掘金一周2 小时前
DeepSeek删豆包冲上热搜,大模型世子之争演都不演了 | 掘金一周 8.28
前端·人工智能·后端
moyu842 小时前
前端存储三剑客:Cookie、LocalStorage 与 SessionStorage 全方位解析
前端
不爱说话郭德纲2 小时前
👩‍💼产品姐一句小优化,让我给上百个列表加上一个动态实时计算高度的方法😿😿
前端·vue.js·性能优化