0

我有一个带有 3D 透视变换元素的网页。

对于给定的屏幕坐标，我想在转换后的对象上找到相对坐标。或者换句话说，我想做的基本上是命中检测：在元素上找到一个与鼠标坐标相对应的相对坐标。

在 Chrome/Safari 中，查找元素的透视变换矩阵很简单。我相信我需要做一些事情，比如将屏幕坐标乘以透视矩阵的倒数，但遗憾的是我丢失了细节。

我创建了一个与 Chrome/Safari/Webkit 兼容的 jsFiddle，其部分实现缺少矩阵数学：http: //jsfiddle.net/HT2VQ/

如果存在正确的数学运算，则绘制在元素上的蓝色甜甜圈将围绕红点。

这是我来自 jsFiddle 的咖啡脚本：

projectionMat = new WebKitCSSMatrix container.css('-webkit-transform')
window.onmousemove = (e) ->
    insideX = e.clientX - container.position().left
    insideY = e.clientY - container.position().top

    outsideCursor.css
        left: e.clientX
        top: e.clientY

    # Do something with projectionMat / projectionMat.inverse()
    # insideX = ??
    # insideY = ??

    insideCursor.css
        left: insideX
        top: insideY
4

1 回答 1

0

我找到了一个适用于 Webkit 的解决方案，无需使用webkitConvertPointFromNodeToPage手动进行矩阵数学运算：

point = webkitConvertPointFromPageToNode(container.get(0),
                                         new WebKitPoint(e.clientX, e.clientY))

工作jsfiddle：http: //jsfiddle.net/mlawrie/HT2VQ/5/

于 2013-09-27T01:05:16.750 回答