Javascript 如何在旋转后调整DIV元素的大小时保持固定角

在HTML div中使用Javascript旋转和调整大小

示例图像：

旋转后调整大小时，我无法使角保持固定

可能的重复项包括：

上面的链接对我没有用

我需要一个类似的功能，但它是svg。我需要带有div元素的，而不是svg

我检查了太多像一个这样的链接，这些链接只用于在旋转后查找角点位置，但是找到这个链接后，如何在调整大小时设置角点固定？

旋转后调整大小时，保持对角固定的分步步骤是什么

我使用了一个参考，以了解需要，但我实现了基于中心的调整后，旋转，我不能添加所有的代码。我可以用

0度

和

360度

固定角来调整大小，但我需要所有其他角度的固定角

注意：为了在旋转后保持固定的转角，Canva和Powtoon分别在

平移（x，y）

=>和

左侧
，
顶部
=>中进行了一些调整。
这会是一个开始吗？（不是100%解决方案，而是一种方法，可改进）：


$（文档）.ready（函数（）{
/** 
*旋转法
*
*@param domElement要旋转的元素
*@param origin旋转的原点
*@param degree角度的度数
*/
函数旋转（圆元素、原点、度）{
$（元）
.css（{webkitttransform:'rotate（'+degree+'deg'）}）
.css（{'-moz transform'：'rotate（'+degree+'deg'）}）
.css（{'transform-origin'：origin | |'bottom right'}）
;                   
//为了避免“太多”递归，我们使用了超时
let timer=setTimeout（函数（）{
旋转（++度）；
清除超时（计时器）；
},5);
}
让干部=$（'div#干部'）
，curHandler=未定义
，startPosX=0
，startPosY=0
;
/**
*当用户单击处理程序时
*=>curHandler已定义=>我们工作
*/
$（'.handler'）.mousedown（函数（ev）{
startPosX=ev.pageX；
startPosY=ev.pageY；
$（this.addClass（'clicked'）；
curHandler=$（这个）；
})
/**
*当用户点击处理程序时
*=>curHandler未定义=>停止工作
*/
$（'.handler'）.mouseup（函数（ev）{
$（this.removeClass（'clicked'）；
curHandler=未定义；
})
/**
*当用户移动鼠标时
*我们只在定义处理程序（curHandler）时工作
*否则，我们什么也不做
*/
$（'body'）.mousemove（函数（ev）{
if（curHandler）
{
//当老鼠移动时，我们旋转
角度=起始点位置-ev.pageX；
//旋转原点在HTML处理程序中设置，但
//我们可以从JS常量或任何东西得到它
旋转（干部，curHandler.attr（'data-origin'），角度）；}
})
})
div#branker{
宽度：200px；
高度：100px；
背景色：深蓝色；
顶部：50px；
左：100px；
位置：固定；
明确：两者皆有；
}
处理程序{位置：绝对；宽度：5%；高度：10px；背景色：红色；}
单击{背景色：绿色！重要；}
div.tl-handler{top:0；left:0；}
div.tr-handler{top:0；right:0；}
div.bl-handler{bottom:0；left:0；}
div.br-handler{底部：0；右侧：0；}
div.mt-handler{top:0；left:47.5%；}
div.mb-handler{底部：0；左侧：47.5%；}
div#explain{font size:9.2pt；font style:italic；}

单击绿色处理程序停止旋转（如果有）
这会是一个开始吗？（不是100%解决方案，而是一种方法，可改进）：


$（文档）.ready（函数（）{
/** 
*旋转法
*
*@param domElement要旋转的元素
*@param origin旋转的原点
*@param degree角度的度数
*/
函数旋转（圆元素、原点、度）{
$（元）
.css（{webkitttransform:'rotate（'+degree+'deg'）}）
.css（{'-moz transform'：'rotate（'+degree+'deg'）}）
.css（{'transform-origin'：origin | |'bottom right'}）
;                   
//为了避免“太多”递归，我们使用了超时
let timer=setTimeout（函数（）{
旋转（++度）；
清除超时（计时器）；
},5);
}
让干部=$（'div#干部'）
，curHandler=未定义
，startPosX=0
，startPosY=0
;
/**
*当用户单击处理程序时
*=>curHandler已定义=>我们工作
*/
$（'.handler'）.mousedown（函数（ev）{
startPosX=ev.pageX；
startPosY=ev.pageY；
$（this.addClass（'clicked'）；
curHandler=$（这个）；
})
/**
*当用户点击处理程序时
*=>curHandler未定义=>停止工作
*/
$（'.handler'）.mouseup（函数（ev）{
$（this.removeClass（'clicked'）；
curHandler=未定义；
})
/**
*当用户移动鼠标时
*我们只在定义处理程序（curHandler）时工作
*否则，我们什么也不做
*/
$（'body'）.mousemove（函数（ev）{
if（curHandler）
{
//当老鼠移动时，我们旋转
角度=起始点位置-ev.pageX；
//旋转原点在HTML处理程序中设置，但
//我们可以从JS常量或任何东西得到它
旋转（干部，curHandler.attr（'data-origin'），角度）；}
})
})
div#branker{
宽度：200px；
高度：100px；
背景色：深蓝色；
顶部：50px；
左：100px；
位置：固定；
明确：两者皆有；
}
处理程序{位置：绝对；宽度：5%；高度：10px；背景色：红色；}
单击{背景色：绿色！重要；}
div.tl-handler{top:0；left:0；}
div.tr-handler{top:0；right:0；}
div.bl-handler{bottom:0；left:0；}
b组