如何在给定鼠标坐标的情况下检测重叠（旋转）的DOM元素？

GibboK 发表于 Dev

GibboK

我使用以下脚本来获取鼠标单击坐标处重叠的DIV元素的列表。

在此示例中，如果未旋转DIV，脚本可以正常工作：

http://jsfiddle.net/eyxt2tt1/2/

如果我apply a rotation在DIV上并且用户单击（在此示例中，红色标记附近）

http://jsfiddle.net/eyxt2tt1/3/

当脚本只考虑一个DIV时，它将始终返回两个DIV。

我需要知道：

如何在我的计算中考虑轮换？
您知道更好的方法/替代方法吗？

笔记：

我无法使用Document.elementFromPoint（）
它们在SO上是类似的问题，但是我认为这是不同的，因为我需要特别解决“轮换问题”。
我会在jsfiddle中感谢您的想法

$(document).click(function (e) {
    var hitElements = getHitElements(e);
    var output = $('#output');
    output.html('');
    for (var i = 0; i < hitElements.length; ++i) {
        output.html(output.html() + '<br />' + hitElements[i][0].tagName + ' ' + hitElements[i][0].id);

    };

});

var getHitElements = function (e) {
    var x = e.pageX;
    var y = e.pageY;
    var hitElements = [];
    $(':visible').each(function () {
        console.log($(this).attr("id"), $(this).outerWidth());
        var offset = $(this).offset();
        console.log('+++++++++++++++++++++');
        console.log('pageX: ' + x);
        console.log('pageY: ' + y);
        console.log($(this).attr("id"), $(this).offset());
        console.log('+++++++++++++++++++++');
        if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) {
            console.log('included: ', $(this).attr("id"));
            console.log('from 0p far x: ', $(this).attr("id"), offset.left + $(this).outerWidth());
            console.log('from 0p far y: ', $(this).attr("id"), offset.top + $(this).outerHeight());
            hitElements.push($(this));
        }
    });

    return hitElements;

}

吉日·希贝克

您必须使用线性代数。

我已经修改了您的小提琴-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属性。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。