KineticJS recalculate position of image when another is resized

Question

Alright this is more a math question than anything but it is using KineticJs code that I have developed. currently I have a stage and layers, and thats all set up fine and dandy. Once a specific group is resized (lets call it background), I am using a function that updates the position of another group (well call it....foreground) using the

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

method. I want the foreground to reposition itself so that it is as if it has not changed position within the background after the resize. ie: it moves with the bg, if the bg has a little circle on it and I place the foreground in this circle, after the resize the foreground should still be in the circle.

variables I have are as follows (the numbers shouldn't matter just what they represent):

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.

the background resizes proportionally through this math calc ( along with others but this is the main portion):

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

what I need is the coordinate calculation for the x and y position of my .move(); method, I cannot figure it out, for whatever reason it is beyond me. The calculation should work whether the image is made larger or smaller, since the result of it shrinking will give a negative x/y adjustment, and the result of it enlarging will give a positive x/y adjustment.

currently I have:

// 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) } );
}

clearly this is incorrect since taking the difference and adding it to the position makes the foreground move as expected, but the movement is too large. if i divide by 2 and place the foreground exactly in the center it works. but i need it to work for any position on the background, if your math savvy Id appreciate a proper calculation for determining the position of the foreground as the background is increased/decreased

Answer 1

alright after some research I have found that there is a method in KineticJs that supports this kind of feature. the setPosition(); method can reset the position of the inner image based on calculations provided from the resize of the containing image. heres the math:

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

put that into the portion of code that recalculates the containers dimensions on resize and the position of the inner group will change proportionately to the outer group's newly resized dimensions.