按组拖动比例

时间：2019-10-24 10:56:03

标签： javascript

我正在构建一个免费的转换工具，其行为类似于Figma和Photoshop。到目前为止，我已经从点和长宽比中找出旋转，拖动，调整大小。

我面临的问题是，拖动调整大小者组手柄时，对象移动过多且缩放速度过快。有谁知道如何使其相对于组父对象，请参见gif链接进行澄清。

当前位置和尺寸以进行单个调整

width: newWidth
height: newHeight

x: newPosition.left
y: newPosition.top

到目前为止，我尝试过的是增加一些距离，但该值已关闭

x: newPosition.left + disnaceX * ??? 
y: newPosition.top + distanceY * ???

我无法透露有效代码，但是该代码类似于https://github.com/daybrush/moveable/tree/master/packages/react-moveable

我所需要的是数学逻辑，该逻辑根据父对象的大小确定应缩放的内容。

当前实施情况的图片 Image of current implementation

Figma和Photoshop如何正确执行操作的图像 Image of how Figma and Photoshop correctly does it

1 个答案:

答案 0 :(得分：0)

如果我认为正确，则应在事件监听器中执行以下操作：

  1. 定义公共矩形的新大小（使用“ getBoundingClientRect”函数）

  2. 通过求解比例来设置每个元素的顶部和左侧位置，即：

    让newLeft = oldLeft * newCommonWidth / oldCommonWidth

    let newTop = oldTop * newCommonHeight / oldCommonHeight

  3. 通过求解相同的比例来设置每个元素的新大小，即：

    让newElemWidth = oldElemWidth * newCommonWidth / oldCommonWidth

    让newElemHeight = oldElemHeight * newCommonHeight / oldCommonHeight

相关问题
最新问题