我需要动态地在脸上放一张带眼镜的照片。
示例: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);
}
感谢您的帮助。
答案 0 :(得分:2)
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/
谁不使用画布?
<强>更新强>
正确公式的结果:
你需要:
中的评论