Question

好吧这是一个比任何事情更多的数学问题，但它使用的是我开发的KineticJs代码。目前我有一个阶段和层次，这些都设置得很好和花花公子。一旦特定组被调整大小（让我们称之为背景），我正在使用一个函数，使用

更新另一个组的位置（称之为....前景）

.move ({x: (calculation), y: (calculation)})

方法。我希望前景重新定位，以便在调整大小后它就像在后台中没有改变位置一样。即：它与bg一起移动，如果bg上有一个小圆圈，我将前景放在这个圆圈中，调整大小后前景应该仍然在圆圈中。

我拥有的变量如下（数字应该与它们所代表的无关）：

bgX = the background width before resize.
bgXfinal = the background width after resize.
bgY = the background height before resize.
bgYfinal = the background height after resize.
fgX = foreground position x  (from topleft point) within the bg.
fgY = foreground position y (from topleft point) within the bg.

背景通过此数学计算按比例调整（与其他人一起，但这是主要部分）：

bgYfinal = bottomLeft.getY() - topLeft.getY();
bgXfinal = image.getWidth() * bgYfinal / image.getHeight();

我需要的是我的.move（）的x和y位置的坐标计算;方法，我无法弄清楚，无论出于什么原因，它超出了我。无论图像是大于还是小，计算都应该有效，因为它缩小的结果将给出负x / y调整，并且放大的结果将给出正x / y调整。

目前我有：

// bg size is increasing
if ( bgX < bgXfinal ) {
    group.move( {  x: (bgXfinal - bgX), y: (bgYfinal - bgY) } );
}
// bg size is decreasing
if ( bgX > bgXfinal ) {
    group.move( {  x: (bgXfinal - bgX), y: (bgYfinal - bgY) } );
}

显然这是不正确的，因为获取差异并将其添加到位置会使前景按预期移动，但移动太大。如果我除以2并将前景准确地放在中心就可以了。但我需要它适用于背景上的任何位置，如果您的数学精明的Id欣赏正确的计算，以确定前景的位置随着背景的增加/减少

Answer 1

在经过一些研究后我发现KineticJs中有一种支持这种特征的方法。 setPosition（）;方法可以基于从包含图像的大小调整提供的计算来重置内部图像的位置。继承数学：

var x = innerGroup.getPosition().x,
    y = innerGroup.getPosition().y,
    newX = x / oldX * newWidth,
    newY = y / oldY * newHeight;

    innerGroup.setPosition( { x: newX, y: newY } );

    innerLayer.draw();

将其放入代码部分，重新计算调整大小时的容器尺寸，内部组的位置将按比例更改为外部组的新调整尺寸。

当另一个图像调整大小时，KineticJS会重新计算图像的位置

1 个答案: