当前位置：文江博客话题详情

坐标转换旋转-rotate 三角化

求元素旋转后的坐标计算

发布于 2022-09-11 18:00:11 字数 151 浏览 24 评论 0

用JavaScript如何计算如图元素旋转后x2、y2的坐标？

图片描述

旋转中心点为虚线框的中心点

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

盗梦空间 2022-09-18 18:00:11

就是个几何问题。。。
图片描述

页面上的坐标系，X轴一致，左边负，右边正，Y轴反过来，上面负，下面正

1 你图上的框，在我的图里是绿色矩形

2 把这个绿色框放平，我图里的红色矩形
旋转点设为坐标系原点 X0 Y0
所以你红色矩形左上角坐标 Xr Yr

3 旋转到蓝色矩形位置
蓝色矩形左上角坐标 Xb Yb
斜边就是一半的宽度，就是 Xr，坐标 Xb, Yb 就是邻边和对边，基础三角函数用一下就OK了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rotate Calc</title>
    <style type="text/css">
    .calc {font-family:Consolas, monospace;white-space:pre;}
    .base {position:relative;margin-top:100px;margin-left:50px;}
    .base .box {position:absolute;top:0;left:0;width:300px;height:200px;transform-origin:center top;}
    .base .deg-0  {background-color:rgba(255,0,0,0.3);transform:rotate(0deg);}
    .base .deg-12 {background-color:rgba(0,255,0,0.3);transform:rotate(-12deg);}
    .base .deg-r  {background-color:rgba(0,0,255,0.3);transform:rotate(-22deg);}
    </style>
</head>
<body>
<div class="calc">
width  = 259.69
height = 173.126

Xo = 0
Yo = 0
Xr = - width / 2 // = -129.845
Yr = 0

deg = -12
Xg  = Xr * Math.cos(deg * Math.PI / 180) // -127.008
Yg  = Xr * Math.sin(deg * Math.PI / 180) // 26.996

deg = -22
Xb  = Xr * Math.cos(deg * Math.PI / 180) // -120.390
Yb  = Xr * Math.sin(deg * Math.PI / 180) //   48.640
</div>
<div class="base">
    <div class="box deg-0"></div>
    <div class="box deg-12"></div>
    <div class="box deg-r"></div>
</div>
</body>
</html>

~没有更多了~

关于作者

飞烟轻若梦

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

花开柳相依

文章 0 评论 0

zyhello

文章 0 评论 0

故友

文章 0 评论 0

对风讲故事

文章 0 评论 0

Oo萌小芽oO

文章 0 评论 0

梦明

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文