javascript - 相对于顶点调整多个元素的大小？

Question

背景：我正在构建一个设计工具并具有一个组大小调整功能。

视频：https ://share.getcloudapp.com/v1ux6247

应该发生什么：https ://share.getcloudapp.com/5zuweGnG

CodeSandbox：https ://codesandbox.io/s/wild-https-ll95b?file=/src/Resizer.tsx

我陷入了解决这个问题背后的几何问题。我在数学频道问了这个问题，但我很难将这个很棒的答案https://math.stackexchange.com/questions/3843990/calculate-y-position-from-hypotenuse转换为小提琴。

如果你有一个固定的顶点（右上角）和一个缩放点（左下角），那么盒子中的所有元素都应该很好地缩放——不使用 CSS“缩放属性”，这是行不通的，因为它需要在 x 和 y 轴上移动。它应该使用 CSS 宽度、高度和 x/y 变换进行缩放。

我希望能学习到正确的解决方案。如果您想尝试一下或拥有几何智慧，那么我非常感谢您与我和社区分享。

试图使尺寸正确的代码片段

// Clearly my numbers are off here and I am thinking about it incorrectly
const handleUpdateNodes = ({ node, item, c }: any) => {

  // setting the points you can find the item properties here https://codesandbox.io/s/wild-https-ll95b?file=/src/App.tsx:360-453
  const vertexes: any = {
    tl: [item.left, item.top],
    tr: [item.width + item.left, item.top],
    bl: [item.left, item.height + item.top],
    br: [item.width + item.left, item.height + item.top]
  };

  // playing around with scaling the points based on c which is the scale i.e 0.5
  const { tl, tr, bl } = scaleVertexes(vertexes, c);

  if (node) {
    // top right x point minus the top left x point = new width
    node.style.width = `${tr[0] - tl[0]}px`;

    // left is the original left / the scale change I messed this whole x,y up confused here
    node.style.transform = `translate(${item.left / scale}px, ${item.top}px)`;

    // bottom left y minus top left y
    node.style.height = `${bl[1] - tl[1]}px`;
  }
};

这是一个粗略的图表来说明。视频和小提琴更好地描述了正在发生的事情。

标签： javascriptcssgeometryresizescale