你必须使用线性代数。
我修改了你的小提琴 -http://jsfiddle.net/pcdk2s0g/
var getHitElements = function (e) {
var mx = e.pageX;
var my = e.pageY;
var hitElements = [];
$(':visible').each(function () {
//Parse CSS matrix
var matrix = [];
var matrixVal = $(this).css('transform');
if(matrixVal != "none"){
var matrixParsed = matrixVal.substr(7, matrixVal.length - 8).split(',');
for(var i in matrixParsed) matrix[i] = parseFloat(matrixParsed[i]);
} else {
matrix = [1, 0, 0, 1, 0, 0];
}
var hW = this.offsetWidth / 2; //Half of width
var hH = this.offsetHeight / 2; //Half of height
var o = { x: this.offsetLeft + hW, y: this.offsetTop + this.offsetHeight / 2} //Transform origin
//Define shape points and transform by matrix
var p1 = {
x: o.x + matrix[0] * -hW + matrix[2] * -hH + matrix[4],
y: o.y + matrix[1] * -hW + matrix[3] * -hH + matrix[5]
}; //Left top
var p2 = {
x: o.x + matrix[0] * +hW + matrix[2] * -hH + matrix[4],
y: o.y + matrix[1] * +hW + matrix[3] * -hH + matrix[5]
}; //Right top
var p3 = {
x: o.x + matrix[0] * +hW + matrix[2] * +hH + matrix[4],
y: o.y + matrix[1] * +hW + matrix[3] * +hH + matrix[5]
}; //Right bottom
var p4 = {
x: o.x + matrix[0] * -hW + matrix[2] * +hH + matrix[4],
y: o.y + matrix[1] * -hW + matrix[3] * +hH + matrix[5]
}; //Left bottom
//Calculate edge normal vectors & C vars
var v1 = { x: -(p2.y - p1.y), y: (p2.x - p1.x) }; //Top
var v2 = { x: -(p3.y - p2.y), y: (p3.x - p2.x) }; //Right
var v3 = { x: -(p4.y - p3.y), y: (p4.x - p3.x) }; //Bottom
var v4 = { x: -(p1.y - p4.y), y: (p1.x - p4.x) }; //Left
var c1 = -(v1.x * p1.x + v1.y * p1.y);
var c2 = -(v2.x * p2.x + v2.y * p2.y);
var c3 = -(v3.x * p3.x + v3.y * p3.y);
var c4 = -(v4.x * p4.x + v4.y * p4.y);
//Check cursor distance from edge using general line quation: ax + by + c = 0
var isInner = function(v, c, x, y){
return (v.x * x + v.y * y + c) / Math.sqrt( v.x*v.x + v.y*v.y ) > 0;
}
//Check if mouse point is in shape coords using general line equation
if(isInner(v1, c1, mx, my) && isInner(v2, c2, mx, my) && isInner(v3, c3, mx, my) && isInner(v4, c4, mx, my))
hitElements.push($(this));
});
return hitElements;
}
它使用 CSS 变换属性,通过浏览器将其转换为 CSS 矩阵。
代码解析 CSS 矩阵,计算新的边缘点并检查光标是否位于翻译的元素中。
它适用于任何角度或 CSS 转换。
代码可以改进,例如你也可以解析CSS的transform-origin属性。