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

编程问答 2022-06-11

问题描述

上下文：我正在构建设计工具，并具有组大小调整功能。

视频：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,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`;
  }
};

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

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

geometryjavascriptresizescale