用JavaScript如何计算如图元素旋转后x2、y2的坐标?
旋转中心点为虚线框的中心点
就是个几何问题。。。
页面上的坐标系,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
接受
发布评论
评论(1)
就是个几何问题。。。
![图片描述 图片描述](/img/bVbo6Ng?w=481&h=640)
页面上的坐标系,X轴一致,左边负,右边正,Y轴反过来,上面负,下面正
1 你图上的框,在我的图里是 绿色矩形
2 把这个 绿色框 放平,我图里的 红色矩形
旋转点 设为 坐标系 原点 X0 Y0
所以你红色矩形左上角坐标 Xr Yr
3 旋转到 蓝色矩形 位置
蓝色矩形左上角坐标 Xb Yb
斜边 就是 一半的宽度,就是 Xr,坐标 Xb, Yb 就是 邻边 和 对边,基础三角函数用一下就OK了