javascript - KinectJS : Algorithm required to determine new X, 图像调整大小后的 Y 坐标

Question

背景:

该应用程序允许用户上传自己的照片，然后将一副眼镜戴在脸上，看看照片是什么样子。在大多数情况下，它工作正常。用户选择 2 个瞳孔的位置后，我根据瞳孔距离与眼镜中心点之间已知距离的比率自动缩放图像。那里一切正常，但现在我需要自动将眼镜图像放在眼睛上。

我正在使用 KinectJS，但问题不在于该库或 javascript..它更多的是算法要求

我必须使用什么:

1. 瞳孔(眼睛)之间的距离
2. 瞳孔间距(眼镜)
3. 眼镜宽度
4. 眼镜高度
5. 缩放比例

一些代码:

//.. code before here just zooms the image, etc..

//problem is here (this is wrong, but I need to know what is the right way to calculate this)
var newLeftEyeX = self.leftEyePosition.x * ratio;
var newLeftEyeY = self.leftEyePosition.y * ratio;

//create a blue dot for testing (remove later)
var newEyePosition = new Kinetic.Circle({
    radius: 3,
    fill: "blue",
    stroke: "blue",
    strokeWidth: 0,
    x: newLeftEyeX,
    y: newLeftEyeY
});
self.pointsLayer.add(newEyePosition);

var glassesWidth = glassesImage.getWidth();
var glassesHeight = glassesImage.getHeight();

// this code below works perfect, as I can see the glasses center over the blue dot created above
newGlassesPosition.x = newLeftEyeX - (glassesWidth / 4);
newGlassesPosition.y = newLeftEyeY - (glassesHeight / 2);

需要

一个数学天才给我一个算法来确定在调整图像大小后新的左眼位置应该在哪里

更新

在过去 6 个小时左右的研究之后，我认为我需要进行某种“翻译转换”，但我看到的示例只允许按 x 和 y 数量设置它。而我只知道底层图像的比例。这是我找到的示例(对我没有帮助):

http://tutorials.jenkov.com/html5-canvas/transformation.html

这里有一些看起来很有趣的东西，但它是为 Silverlight 设计的:

Get element position after transform

是否有某种方法可以在 Html5 和/或 KinectJS 中做同样的事情？或者也许我在这里走错了路……有什么想法吗？

更新 2

我试过这个:

// if zoomFactor > 1, then picture got bigger, so...
if (zoomFactor > 1) {
    // if x = 10 (for example) and if zoomFactor = 2, that means new x should be 5
    // current x / zoomFactor => 10 / 2 = 5
    newLeftEyeX = self.leftEyePosition.x / zoomFactor;
    // same for y
    newLeftEyeY = self.leftEyePosition.y / zoomFactor;
}
else {
    // else picture got smaller, so...
    // if x = 10 (for example) and if zoomFactor = 0.5, that means new x should be 20
    // current x * (1 / zoomFactor) => 10 * (1 / 0.5) = 10 * 2 = 20
    newLeftEyeX = self.leftEyePosition.x * (1 / zoomFactor);
    // same for y
    newLeftEyeY = self.leftEyePosition.y * (1 / zoomFactor);
}

那没有用，所以我尝试了 Rody Oldenhuis 的建议(感谢 Rody)的实现:

var xFromCenter = self.leftEyePosition.x - self.xCenter;
var yFromCenter = self.leftEyePosition.y - self.yCenter;

var angle = Math.atan2(yFromCenter, xFromCenter);
var length = Math.hypotenuse(xFromCenter, yFromCenter);

var xNew = zoomFactor * length * Math.cos(angle);
var yNew = zoomFactor * length * Math.sin(angle);

newLeftEyeX = xNew + self.xCenter;
newLeftEyeY = yNew + self.yCenter;

但是，这仍然没有按预期工作。所以，我不确定目前的问题是什么。如果有人以前使用过 KinectJS 并且知道可能是什么问题，请告诉我。

更新 3

我在纸上检查了罗迪的计算，它们看起来不错，所以显然这里有其他东西搞砸了。我得到了缩放因子 1 和 2 时左瞳孔的坐标。有了这些坐标，也许有人可以算出问题是什么:

缩放系数 1:x = 239，y = 209

缩放因子 2:x = 201，y = 133

Answer 1

OK，既然是算法题，我就保留这个泛型，只写伪代码。

如果我没理解错的话，你想要的是以下内容:

1. 转换所有坐标，使坐标系的原点位于缩放中心(通常为中心像素)

2. 计算从这个新原点到感兴趣点绘制的线与正 x 轴所成的 Angular 。还要计算这条线的长度。

3. 缩放后新的 x 和 y 坐标是通过延长这条线来定义的，这样新线就是缩放因子乘以原始线的长度。

4. 将新找到的 x 和 y 坐标转换回对计算机有意义的坐标系(例如，左上角像素 = 0,0)

5. 重复所有兴趣点。

在伪代码中(带公式):

x_center = image_width/2
y_center = image_height/2

x_from_zoom_center = x_from_topleft - x_center
y_from_zoom_center = y_from_topleft - y_center

angle  = atan2(y_from_zoom_center, x_from_zoom_center)
length = hypot(x_from_zoom_center, y_from_zoom_center)

x_new = zoom_factor * length * cos(angle)
y_new = zoom_factor * length * sin(angle)

x_new_topleft = x_new + x_center
y_new_topleft = y_new + y_center

请注意，这假设用于长度和宽度的像素数在缩放后保持不变。另请注意，应该进行一些舍入(保持所有 double ，并且仅在所有计算之后舍入到 int )

在上面的代码中，atan2 是四象限反正切，在大多数编程语言中都可用，hypot 就是 sqrt(x*x + y *y)，但随后会更仔细地计算(例如，避免溢出等)，在大多数编程语言中也可用。

这真的是你想要的吗？