Javascript Jquery计算旋转矩形的包围盒

我已经看过其他一些关于这个的帖子，但仍然不明白为什么这个公式不起作用

要计算旋转矩形的边框，请执行以下操作：

w' = sin(a)*h + cos(a)*w;
h' = sin(a)*w + cos(a)*h;

问题是，我有一些奇怪的行为，w'和h'根本不精确

//计算形状的旋转角度 函数getRotationDegreesobj{ var矩阵=obj.css-webkit-transform|| obj.css-moz-transform|| obj.css-ms-transform|| obj.css-o-transform|| obj.CSTRANSFORM； 如果矩阵！=“无”{ 变量值=矩阵。拆分[1]。拆分[0]。拆分'，'； var a=数值[0]； var b=数值[1]； 变量角度=Math.roundMath.atan2b，a*180/Math.PI； }否则{ var角=0； } 如果角度<0角度+=360； 返回角； } 变量shape=$'.shape'， shapeLeft=shape.position.left， shapeTop=shape.position.top， shapeWidth=shape.width， 形状高度=形状高度， 角度=获取旋转度形状， //下面的公式 高度=Math.absshapeWidth*Math.sinangle+Math.absshapeHeight*Math.cosangle， 宽度=Math.absshapeHeight*Math.sinangle+Math.absshapeWidth*Math.cosangle； $'g1'.css'width'，width； $'g2'.css'height'，height； .要素， .元素{ 位置：绝对位置 } s2{ 背景：333； 顶部：60px； 左：-25px； 宽度：300px； 高度：100px； } 两个错误来源：

角度的小圆角。不知道你所说的已经是一个整数是什么意思

在Math.cos/sin中直接使用getRotationDegrees的结果。这些函数需要弧度，即Math.atan2直接返回的结果

下面的代码段添加了边界框的其他两条边以及正确的位置偏移。我添加了一个滑块来更改旋转角度，以说明此代码是健壮的

函数getMatrixobj{ var矩阵=obj.css-webkit-transform|| obj.css-moz-transform|| obj.css-ms-transform|| obj.css-o-transform|| obj.CSTRANSFORM； 返回矩阵==“无”？空：矩阵.split[1]。split[0]。split'，'； } //计算形状的旋转角度 函数getRotationRadiansmatrix{ 变量角度=矩阵？数学atan2matrix[1]，矩阵[0]：0； 如果角度<0角度+=2.0*Math.PI； 返回角； } //计算翻译 函数getTranslationmatrix{ 返回矩阵？[矩阵[4]，矩阵[5]：[0,0]； } //计算边界框 函数getBoundingBoxshape{ var shapeLeft=shape.position.left， shapeTop=shape.position.top， shapeWidth=shape.width， 形状高度=形状高度； var矩阵=getMatrixshape； var角度=getRotationRadiansmatrix； var height=Math.absshapeWidth*Math.sinangle+Math.absshapeHeight*Math.cosangle； 变量宽度=Math.AbsShapeHight*Math.sinangle+Math.absshapeWidth*Math.cosangle； var trans=getTranslationmatrix； var left=trans[0]-宽度*0.5； var top=trans[1]-高度*0.5； 返回{'x'：左，'y'：顶，'w'：宽，'h'：高}； } formatBox$'.shape'； 函数formatBoxshape{ var box=getBoundingBoxshape； var offx=124，offy=109； 变量g1=$'g1'，g2=$'g2'，g3=$'g3'，g4=$'g4'； g1.css'width'，box.w； g2.css‘高度’，方框h； g3.css“宽度”，方框w； g4.css‘高度’，方框h； g1.css'left'，offx+box.x； g2.css'left'，offx+box.x； g3.css“左”，offx+box.x； g4.css'left'，offx+box.x+box.w； g1.css'top'，offy+box.y； g2.css'top'，offy+box.y； g3.css'top'，offy+box.y+box.h； g4.css'top'，offy+box.y； } var angleInp=document.getElementByIdangleInp； angleInp.addEventListenerchange，函数{ var shape=$'.shape'； shape.css'transform'、'rotate'+angleInp.value+'deg'； 形状； }，假； .要素， .元素{ 位置：绝对位置 } s2{ 背景：333； 顶部：60px； 左：-25px； 宽度：300px； 高度：100px； }

---

因为你在做数学。round？@meowgoes狗不，Math.round是用来计算角度的，它已经是一个整数了，所以这不是它，但我发现：getBoundingClientRect似乎有效well@meowgoesthedog介意更新我的小提琴给我看一下例子吗？我试过你刚才说的话，但似乎我不太明白。我为延误道歉。我添加了一个带有正确工作代码的答案和一个解释。