javascript - 通过移动和调整其中一张图像的大小来组合两张图像中的 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/

谁不为此使用 Canvas ？

更新

公式正确的结果:

你需要:

• Proportionality
• Pythagorean theorem
• Rotation matrix

请参阅 http://jsfiddle.net/r8VAb/7/ 中的评论