CODEWITHSUNDEEP
javascriptjquerycsshtml
BeoWulf
BeoWulf

Reputation: 657

Combining 2 dots in 2 images by moving and re-sizing one of the images

I need to place a picture with glasses on a face dynamically.

Example: http://jsfiddle.net/r8VAb/1/

I know the coordinates of the center of the glasses and eyes, in the example marked with red dots. Now need to move the picture and make the dots combine, but have no idea ho to rotate to get the right dots combine having in attention that the left dot will have to be the axis.

Also, since I resize the glasses in first place, then when moving the dots don't combine I guess because the coordinates are not the same anymore after resizing.

Maybe I'm doing this in a total wrong way and there's some other way more effective and easy. I'm a backend/database developer and this is something new to me. This is how I am doing it:

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

Thanks for helping.

Upvotes: 1

Views: 124

Answers (1)

Vlad
Vlad

Reputation: 3645

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

See: http://jsfiddle.net/r8VAb/2/

Who not use canvas for that?

Update

Result with correct formulas:

enter image description here

You need:

See comments in http://jsfiddle.net/r8VAb/7/

Upvotes: 2

Related Questions