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

【问题标题】：KineticJS recalculate position of image when another is resized当另一个被调整大小时，KineticJS 重新计算图像的位置
【发布时间】：2014-10-24 15:55:36
【问题描述】：

好吧，这更像是一个数学问题，但它使用的是我开发的 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 喜欢在背景增加/减少时确定前景位置的正确计算

【问题讨论】：

标签： javascript math resize kineticjs

【解决方案1】：

好吧，经过一番研究，我发现 KineticJs 中有一种方法支持这种功能。设置位置（）；方法可以根据包含图像的调整大小提供的计算来重置内部图像的位置。这是数学：

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();

将其放入在 resize 时重新计算容器尺寸的代码部分中，内部组的位置将与外部组新调整大小的尺寸成比例地变化。

【讨论】：