在 CSS3D 元素上查找屏幕坐标的局部坐标

Find local coordinates of a screen coordinate on CSS3D element

本文关键字：局部 坐标 屏幕坐标 查找 CSS3D 元素      更新时间：2023-09-26

>我有一个网页，其中包含一个具有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

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

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

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

相关文章：