给我一个Javascript实现webkitConvertPointFromPageToNode的 [英] Show me a Javascript implementation of webkitConvertPointFromPageToNode

问题描述

在 webkitConvertPointFromPageToNode（在节点的节点，在WebKitPoint P）方法是真棒;给它一个DOM节点，并在页面坐标点（例如，鼠标光标位置），这将给在该节点的局部坐标系坐标还给你。不幸的是，目前仅在webkit的可用。

The webkitConvertPointFromPageToNode(in Node node, in WebKitPoint p) method is awesome; give it a DOM node and a point in page-coordinates (say, the mouse cursor position) and it will give a coordinate back to you in that node's local coordinate system. Unfortunately, it's currently only available in webkit.

# Choose a node into which we'll map the mouse coordinates
node = $('#subjectElement').get(0)

handleMouseMove = (e) ->
  # Convert the mouse position to a Point
  mousePoint = new WebKitPoint(e.pageX, e.pageY)

  # Convert the mouse point into node coordinates using WebKit
  nodeCoords = webkitConvertPointFromPageToNode(node, mousePoint)

# Attach a handler to track the mouse position
$(document).on 'mousemove', handleMouseMove    

我扔我的整个数学大脑的问题，但无论我多么接近让我实现分崩离析以组成一个额外的层面，或3D视角的应用程序。

I've thrown my entire math-brain at the problem, but no matter how close I get, my implementation falls apart with one extra level of composition, or the application of 3D perspective.

这是时候了 convertPointFromPageToNode polyfill的作品，以及WebKit的执行情况，在3D。 @ 4esn0k 的给了一个镜头，但只解决了二维情况。

It's time for a convertPointFromPageToNode polyfill that works as well as the WebKit implementation, in 3D. @4esn0k gave one a shot, but it only solves the 2D case.

您可以写一个，使这个的jsfiddle工作？

Can you write one that makes this JSFiddle work?

http://jsfiddle.net/steveluscher/rA27K/

推荐答案

这似乎是一个惊人的问题，但有一个几乎重复的就在这里：<一href="http://stackoverflow.com/questions/6773481/how-to-get-the-mouseevent-coordinates-for-an-element-that-has-css3-transform">How得到的MouseEvent坐标有CSS3转换的元素？，但没有人看我的答案，这似乎是更普遍，所以我会后再次在这里，有一些修改，使之更明确的：

This seems like an amazing question, but there is an ALMOST duplicate right here: How to get the MouseEvent coordinates for an element that has CSS3 Transform? but nobody is looking at my answer there and this seems to be much more general so I'll post it again here, with a few modifications to make it more clear:

基本上，它的工作原理是这样做的：拆你正在努力寻找相对坐标元素，并将其分割成9较小的元素。使用document.elementFromPoint发现如果坐标是通过该微型元件。如果是，分割的元件成9以上的元素，并继续这样做，直到一个pretty的准确坐标是可能的。然后使用getBoundingClientRect地发现，微型元件的屏幕上的坐标。嘭！

Basically, it works by doing this: split the element you are trying to find relative coordinates for, and split it into 9 smaller elements. Use document.elementFromPoint to find if the coordinate is over that mini-element. If it is, split that element into 9 more elements, and keep doing this until a pretty accurate coordinate is possible. Then use getBoundingClientRect to find the on-screen coordinates of that mini-element. BOOM!

的jsfiddle： http://jsfiddle.net/markasoftware/rA27K/8/

jsfiddle: http://jsfiddle.net/markasoftware/rA27K/8/

下面是JavaScript函数：

Here is the JavaScript function:

function convertPointFromPageToNode(elt,coords){
    ///the original innerHTML of the element
    var origHTML=elt.innerHTML;
    //now clear it
    elt.innerHTML='';
    //now save and clear bad styles
    var origPadding=elt.style.padding=='0px'?'':elt.style.padding;
    var origMargin=elt.style.margin=='0px'?'':elt.style.margin;
    elt.style.padding=0;
    elt.style.margin=0;
    //make sure the event is in the element given
    if(document.elementFromPoint(coords.x,coords.y)!==elt){
        //reset the element
        elt.innerHTML=origHTML;
        //and styles
        elt.style.padding=origPadding;
        elt.style.margin=origMargin;
        //we've got nothing to show, so return null
        return null;
    }
    //array of all places for rects
    var rectPlaces=['topleft','topcenter','topright','centerleft','centercenter','centerright','bottomleft','bottomcenter','bottomright'];
    //function that adds 9 rects to element
    function addChildren(elt){
        //loop through all places for rects
        rectPlaces.forEach(function(curRect){
            //create the element for this rect
            var curElt=document.createElement('div');
            //add class and id
            curElt.setAttribute('class','offsetrect');
            curElt.setAttribute('id',curRect+'offset');
            //add it to element
            elt.appendChild(curElt);
        });
        //get the element form point and its styling
        var eltFromPoint=document.elementFromPoint(coords.x,coords.y);
        var eltFromPointStyle=getComputedStyle(eltFromPoint);
        //Either return the element smaller than 1 pixel that the event was in, or recurse until we do find it, and return the result of the recursement
        return Math.max(parseFloat(eltFromPointStyle.getPropertyValue('height')),parseFloat(eltFromPointStyle.getPropertyValue('width')))<=1?eltFromPoint:addChildren(eltFromPoint);
    }
    //this is the innermost element
    var correctElt=addChildren(elt);
    //find the element's top and left value by going through all of its parents and adding up the values, as top and left are relative to the parent but we want relative to teh wall
    for(var curElt=correctElt,correctTop=0,correctLeft=0;curElt!==elt;curElt=curElt.parentNode){
        //get the style for the current element
        var curEltStyle=getComputedStyle(curElt);
        //add the top and left for the current element to the total
        correctTop+=parseFloat(curEltStyle.getPropertyValue('top'));
        correctLeft+=parseFloat(curEltStyle.getPropertyValue('left'));
    }
    //reset the element
    elt.innerHTML=origHTML;
    //restore element styles
    elt.style.padding=origPadding;
    elt.style.margin=origMargin;
    //the returned object
    var returnObj={
        x: correctLeft,
        y: correctTop
    }
    return returnObj;
}

重要！您还必须包括该CSS为它工作：

IMPORTANT!!! You must also include this CSS for it to work:

.offsetrect{
    position: absolute;
    opacity: 0;
    height: 33.333%;
    width: 33.333%;
}
#topleftoffset{
    top: 0;
    left: 0;
}
#topcenteroffset{
    top: 0;
    left: 33.333%;
}
#toprightoffset{
    top: 0;
    left: 66.666%;
}
#centerleftoffset{
    top: 33.333%;
    left: 0;
}
#centercenteroffset{
    top: 33.333%;
    left: 33.333%;
}
#centerrightoffset{
    top: 33.333%;
    left: 66.666%;
}
#bottomleftoffset{
    top: 66.666%;
    left: 0;
}
#bottomcenteroffset{
    top: 66.666%;
    left: 33.333%;
}
#bottomrightoffset{
    top: 66.666%;
    left: 66.666%;
}

另外：我修改了一点你的CSS所给予的爷爷分区ID和使用引用它在你的CSS ＃DIV1 而不是 DIV ，因为我的code产生的div，和你的DIV的风格也适用于那些我code使用，并把事情搞糟

ALSO: I modified a little of your css by giving the "grandfather" div an id and referencing to it in your css using #div1 instead of div because my code generates divs, and your div styles were also applying to the ones my code uses and messed it up

最后一件事：我不知道CoffeeScript的，所以我调整你的code，使其纯JavaScript。我们对此深感抱歉。

ONE LAST THING: I don't know CoffeeScript so I adjusted your code to make it pure JavaScript. Sorry about that.

这篇关于给我一个Javascript实现webkitConvertPointFromPageToNode的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！