Question

我有一个网页，其元素具有3D透视转换。

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

在Chrome / Safari中，找到元素的透视变换矩阵是微不足道的。我相信我需要做一些事情，比如将屏幕坐标乘以透视矩阵的倒数，但细节遗憾地丢失在我身上。

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

如果有正确的数学计算，那么在元素上绘制的蓝色圆环将包围红点。

这是来自jsFiddle的coffeescript：

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

Answer 1

我找到了一个适用于Webkit的解决方案，而不用webkitConvertPointFromNodeToPage手工进行矩阵数学运算：

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

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

在CSS3D元素上查找屏幕坐标的本地坐标

1 个答案: