通过移动和调整其中一幅图像的大小，将2幅图像中的2个点组合在一起。

Question

我需要动态地在脸上放一张带眼镜的照片。

示例：http://jsfiddle.net/r8VAb/1/

我知道眼镜和眼睛中心的坐标，在标有红色点的例子中。现在需要移动图片，使点结合，但不知道如何旋转，以得到正确的点组合，注意左点将必须是轴线。

另外，由于我首先调整了眼镜的大小，那么当移动这些点时，我猜是因为在调整大小后，坐标不再相同了。

也许我这样做是完全错误的，还有其他更有效和容易的方法。我是一个后端/数据库开发人员，这对我来说是新的东西。我就是这样做的：

$(document).ready(function () {
    // Glasses points Coordinates
        $('#glasses').data("left", {x: 84,y: 40});
        $('#glasses').data("right", {x: 223,y: 40});
        //Picture points coordinates
        $('#picture').data("left", {x: 96,y: 163});
        $('#picture').data("right", {x: 209,y: 140});

});

$('#button').click(function () {
    $('#glasses_place').attr('src', $('#glasses').attr('src'));
        resize(); // Glasses need to be resized to match the eyes distance
        positioning(); // Glasses need to 
        });

function resize() {
    var distance_eyes = Math.floor(px_distance($('#picture').data("left").x, $('#picture').data("left").y, $('#picture').data("right").x, $('#picture').data("right").y));
        var distance_glasses = Math.floor(px_distance($('#glasses').data("left").x, $('#glasses').data("left").y, $('#glasses').data("right").x, $('#glasses').data("right").y));
        var diff = Math.floor(distance_glasses - distance_eyes);

    // Glasses can be smaller or larger than face
        if (distance_glasses > distance_eyes) {
            var resize = $('#glasses').width() - diff;
            } else {
            var resize = $('#glasses').width() + diff;
            }
        alert("Now resizing");
        $('#glasses_place').css('width', resize);

}

function px_distance(lx, ly, rx, ry) {
    a = rx - lx;
        b = ry - ly;
        distance = Math.sqrt(a * a + b * b);
        return distance;
        }

function positioning() {
    var moveY = Math.floor($('#picture').data("left").y - $('#glasses').data("left").y);
        alert("Moving Down");
        $('#glasses_place').css('margin-top', moveY);
        var moveX = Math.floor($('#picture').data("left").x - $('#glasses').data("left").x);
        alert("Moving Right");
        $('#glasses_place').css('margin-left', moveX);
        }

谢谢你的帮助。

Answer 1

function rotate() {
    var firstY = $('#picture').data("left").y,
        lastY = $('#picture').data("right").y,
        firstX = $('#picture').data("left").x,
        lastX = $('#picture').data("right").x;

    // angle of eye line
    var deg = Math.atan2(lastY - firstY, lastX - firstX) / Math.PI * 180;

    var degStr = 'rotate(' + deg + 'deg)';

    $('#glasses_place').css({
        '-moz-transform': degStr,
        '-webkit-transform': degStr,
        '-ms-transform': degStr,
        '-o-transform': degStr
    });
}

请参阅：http://jsfiddle.net/r8VAb/2/

谁不用画布做这个呢？

更新

结果有正确的公式：

​

​

你需要：

• 相称性
• 毕达哥拉斯定理
• 旋转矩阵

见http://jsfiddle.net/r8VAb/7/中的评论