Question

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

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

此外，由于我首先调整了眼镜的大小，然后在移动点时不要合并，因为调整大小后坐标不再相同。

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

$(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/

谁不使用画布？

<强>更新

正确公式的结果：

enter image description here

你需要：

请参阅http://jsfiddle.net/r8VAb/7/

中的评论

通过移动和重新调整其中一个图像，在2个图像中组合2个点

1 个答案: