就是个几何问题。。。 页面上的坐标系，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>
极客观点
项目管理
HarmonyOS
就是个几何问题。。。
页面上的坐标系，X轴一致，左边负，右边正，Y轴反过来，上面负，下面正
1 你图上的框，在我的图里是 绿色矩形
2 把这个 绿色框 放平，我图里的 红色矩形
旋转点 设为 坐标系 原点 X0 Y0
所以你红色矩形左上角坐标 Xr Yr
3 旋转到 蓝色矩形 位置
蓝色矩形左上角坐标 Xb Yb
斜边 就是 一半的宽度，就是 Xr，坐标 Xb, Yb 就是 邻边 和 对边，基础三角函数用一下就OK了