Javascript 一些比较复杂的三角函数用于调整长方体大小

尝试实现从所有4个角调整长方体大小的功能。这是足够简单，但我也希望能够旋转，仍然有锚举行的地方（像任何像样的照片编辑软件）。我可能想得太多了，但事实证明需要一些复杂的触发才能像这样锁定锚点：

要明确的是，代码中实际上没有多个框。。。不同的框应该表示一个单独的框从不同的角调整到不同的大小

这个例子在45度时非常简单，但我最终想要的是trig能够获得任何大小的框（当然也包括矩形，而不仅仅是正方形）的位置（左，上），该框在任何锚上固定，并在其上旋转

欢迎直接帮助，但如果有任何关于如何制定问题来回答这个问题的博客帖子，它可能会更有用

完整代码：

<div id="box1"></div>

<!-- Resizing to 40x40 with the anchor at the top -->
<div id="box2"></div>
<!-- Resizing to 30x30 with the anchor at the top -->
<div id="box3"></div>

<!-- Resizing to 40x40 with the anchor at the left -->
<div id="box4"></div>
<!-- Resizing to 30x30 with the anchor at the left -->
<div id="box5"></div>

#box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: rgba(0,0,0,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box2 {
  position: absolute;
  top: 38px;
  left: 79px;
  width: 40px;
  height: 40px;
  background: rgba(255,0,0,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box3 {
  position: absolute;
  top: 34px;
  left: 87px;
  width: 30px;
  height: 30px;
  background: rgba(255,0,0,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box4 {
  position: absolute;
  top: 79px;
  left: 38px;
  width: 40px;
  height: 40px;
  background: rgba(0,0,255,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box5 {
  position: absolute;
  top: 84px;
  left: 36px;
  width: 30px;
  height: 30px;
  background: rgba(0,0,255,0.2);
  -webkit-transform: rotateZ(45deg);
}

#框1{
位置：绝对位置；
顶部：50px；
左：50px；
宽度：100px；
高度：100px；
背景：rgba（0,0,0,0.2）；
-webkit变换：旋转（45度）；
}
#框2{
位置：绝对位置；
顶部：38px；
左：79px；
宽度：40px；
高度：40px；
背景：rgba（255,0,0,0.2）；
-webkit变换：旋转（45度）；
}
#框3{
位置：绝对位置；
顶部：34px；
左：87px；
宽度：30px；
高度：30px；
背景：rgba（255,0,0,0.2）；
-webkit变换：旋转（45度）；
}
#方框4{
位置：绝对位置；
顶部：79px；
左：38px；
宽度：40px；
高度：40px；
背景：rgba（0,0255,0.2）；
-webkit变换：旋转（45度）；
}
#方框5{
位置：绝对位置；
顶部：84px；
左：36px；
宽度：30px；
高度：30px；
背景：rgba（0,0255,0.2）；
-webkit变换：旋转（45度）；
}

好吧，我想出来了。。。在我的例子中，它不像需要矩阵那样复杂（没有倾斜、缩放或平移……我只需要高度/宽度和旋转），结果比我想象的要简单

最后，对我有效的代码是，正如我所知，所涉及的锚，计算从锚到应用旋转的矩形中心的距离，然后移动到左上角而不应用旋转

var offsetX  = rectangleWidth / 2;
var offsetY  = rectangleHeight / 2;

// If we are on the "right/east" side then to get to the
// center the X value needs to be inverted. Likewise for
// the Y value for "bottom/south".
if(anchor.type === 'ne' || anchor.type === 'se') {
  offsetX *= -1;
}
if(anchor.type === 'sw' || anchor.type === 'se') {
  offsetY *= -1;
}

// Get the distance to the center and apply rotation.
var distanceToCenter = new Point(offsetX, offsetY).rotate(rectangle.rotation);
// Distance to the top left corner is always the same regardless of the rotation.
var distanceToTopLeftCorner = new Point(-rectangleWidth / 2, -rectangleHeight / 2);

// And that's it! Getting the x/y position of the rotated rectangle is simply a matter
// of moving to the center of the rectangle (taking rotation into regard), then moving
// to the non-rotated upper left corner (which would be the same as of the rectangle
// had no rotation applied)
var position = anchor.position.add(distanceToCenter).add(distanceToTopLeftCorner);

---

为什么不让所有的元素都放在一个大盒子里并与之对齐呢？抱歉并不是真正的代码，而是我试图达到的效果的一个例子。实际上只有一个盒子，我正在调整它的大小。。较小的框是应用给定锚定时它将如何调整大小的示例。不确定它对您有多有用-但请查看diagramo.com-它使用HTML5和画布，但JS文件中的数学知识应该对您的操作有很大帮助。这是您需要的文件：谢谢！实际上，在看了他们的实际产品之后，他们似乎遇到了一些与我相同的问题。至少这表明这不是一个小问题！不管怎样，我认为这让我走上了正确的方向，谢谢！