Javascript 如何正确地调整n大小显示？

这是tooken最初的修改代码

调整右中、下中和右下控制点上的矩形的大小很好，因为我不需要更改平移坐标来调整大小。现在，正如您所看到的，当旋转角度不同于0时，我在矩形的中上部（与左中部、左底部相同）调整大小不起作用，因为在调整大小时，它会在视觉上改变位置

我真的不知道如何改变这一点，所以非常感谢您的帮助

注意：将输入字段中的角度更改为0，您将看到代码正常工作

var input=document.getElementById（“旋转输入”）；
var rotate=document.getElementById（“rotate”）；
var rightmidle=document.getElementById（“rm”）；
var topMiddle=document.getElementById（“tm”）；
var translate=document.getElementById（“trslt”）；
var scale=document.getElementById（“scale”）；
var svg=document.getElementById（“main”）；
var rotateString=rotate.getAttribute（'transform'）；
var controlrm=false；
var controltm=假；
var origRectWidth=100；
var origRectHeight=100；
var updatedRectWidth=origRectWidth；
var updatedRectHeight=origRectHeight；
var xScale=1；
var yScale=1；
var-translateX=100；
var-translateY=100；
var-relevantMouseMoveDist=0；
var rotateAnleDeg=30；
var rectangleAngle=parseInt（rotateString.slice（rotateString.indexOf（“（”）+1））*Math.PI/180；//从DOM检索角度
var newMousePosn；
var oldMousePosn；
函数resizeRightMiddle（）
{
updatedRectWidth+=相关MouseMoveDistcos；
xScale=updatedRectWidth/origRectWidth；
setAttribute（'transform'，'scale（'+xScale+'，'+yScale+'））；
}
函数resizeTopMiddle（）
{
updatedRectHeight-=相关MouseMoveDistin；
yScale=更新的伸缩高度/origRectHeight；
//获得新的Y位置
translateY=translateY+相关mousemovedistsin；
setAttribute（'transform'，'scale（'+xScale+'，'+yScale+'））；
setAttribute（'transform'，'translate（'+translateX+'，'+translateY+'））；
}
svg.addEventListener（“mousemove”，函数（e）{
if（newMousePosn）{
//前老鼠pos'n
oldMousePosn={x:newMousePosn.x，y:newMousePosn.y}；
//新的鼠标位置
newMousePosn={x:e.clientX，y:e.clientY}；
//自上次移动事件以来鼠标位置坐标的变化
变量deltaMouseMove={
x:newMousePosn.x-oldMousePosn.x，
y:newMousePosn.y-旧mouseposn.y
};
//这场运动的方向
var AngleOfMouseMovation=Math.atan2（deltaMouseMove.y，deltaMouseMove.x）；
//鼠标移动的绝对距离
var mouseMoveDist=Math.sqrt(
deltaMouseMove.x*deltaMouseMove.x+
deltaMouseMove.y*deltaMouseMove.y
);
//鼠标移动和矩形方向之间的方向差异
可变角度差=移动角度-矩形角度；
//鼠标在矩形方向上移动的部分
relevantMouseMoveDistCos=mouseMoveDist*Math.cos（角度差）；
relevantmousemoveditsin=mouseMoveDist*Math.sin（角度差）；
//如有必要，调整矩形的大小
if（controlrm）
resizeRightMiddle（）；
否则如果（controltm）
resizeTopMiddle（）；
}否则{
//在第一个mousemove事件期间建立鼠标位置
newMousePosn={x:e.clientX，y:e.clientY}；
}
});
svg.addEventListener（“mouseup”，函数（e）{
controlrm=假；
controltm=false；}）；
addEventListener（“mousedown”，函数（e）{controlrm=true；}）；
addEventListener（“mousedown”，函数（e）{controltm=true；}）；
//用于更改输入中矩形的代码
input.addEventListener（“更改”，函数（）{
rotateAngleDeg=输入值；
setAttribute（“变换”、“旋转”（+rotateAngleDeg+））；
矩形角度=旋转角度*Math.PI/180；
})

svg{
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}

---

不是100%正常工作，但这应该有助于简化并为您指明正确的方向。请检查此使用SVG变换矩阵的函数。

您可以更新您的函数，如下所示：

function resizeTopMiddle()
{
  updatedRectHeight -= relevantMouseMoveDistSin;
  yScale = updatedRectHeight/origRectHeight;

  generalTX(xScale, yScale, rotateAnleDeg )
}

以下是您的用例示例：

---

希望这能有所帮助。

其中有很多内容，很难解释这些步骤，但基本上：

• 将

  svg

  中的

  Translate

  移动到

  Rotate

  之后。这样可以更轻松地调整对象的大小，而无需考虑旋转会影响的方向
• 我使用了3个值来应用旋转

  transform=“rotate（0 0）”

  。第二个值给出了旋转的中心
• 将长方体尺寸更改为以0为中心。这不是严格必要的，但我更喜欢这样思考数学问题

我已经实现了边和一个角，我将让您按照模式操作-对于左上角，它只是从顶部抓取代码，从左上角抓取代码，并将它们组合起来，就像我在右上角所做的那样

我看到旋转并不总是发生在盒子的当前中心点附近，所以我想你会想看看这个

外部演示（与下面的堆栈片段相同）：

var input=document.getElementById（“旋转输入”）；
var rotate=document.getElementById（“rotate”）；
var rightmidle=document.getElementById（“rm”）；
var leftMiddle=document.getElementById（“lm”）；
var topMiddle=document.getElementById（“tm”）；
var bottomMiddle=document.getElementById（“bm”）；
var topRight=document.getElementById（“tr”）；
var-tr