Получение преобразованных данных о событиях мыши из DOM-объектов с помощью CSS-преобразования 3D - PullRequest
Новая
       34

Получение преобразованных данных о событиях мыши из DOM-объектов с помощью CSS-преобразования 3D

7 голосов
/ 08 марта 2011

Есть ли какие-либо данные в событии мыши javascript, которые позволили бы мне легко находить или вычислять положение мыши относительно трехмерного пространства преобразованного элемента?

Для наглядной иллюстрации
Слева - div без 3d-матрицы, справа - div после 3d-преобразования.
o является источником события мыши 

                +
               /|
              / |
+-----+      +  |
|     |      |  |
|    o|  =>  | o|
|     |      |  |
+-----+      +  |
              \ |
               \|
                +

В приведенном ниже скрипте, щелкнув те же пиксели в элементе div, вы получите event.layerX, который находится в двумерном пространстве преобразования документа / экрана.

Я знаю, но не в восторге от перспективы анализа матрицы div и использования ее для умножения на позицию события, чтобы обнаружить это, однако в реальной реализации у div будут более сложные преобразования, и для этого потребуется быть сделано в каждом кадре для более чем одного объекта, и я беспокоюсь о накладных расходах, которые принесут ... Я, конечно, не против помочь с этим, если это мой единственный вариант. 

<!doctype html>  

<html lang="en">

<head>
    <meta charset='utf-8'>
    <title></title>
    <style type="text/css" media="screen">

        body {
            background-color: #FFF;
        }

        img {
            position: absolute;
        }

        #main {
            margin: 0;
            -webkit-perspective: 1800;
        }

        #card {
            position: relative;
            margin: 0 auto;
            width: 420px;
            height: 562px;
            -webkit-transform-style: preserve-3d;
            -webkit-transform-origin: center center;
        }

        #card .page {
            position: absolute;
            -webkit-transform-style: preserve-3d;
            -webkit-transform-origin: left center;
        }

        #card .page .face {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-transform-style: flat;
        }
        #card .page .face.front {
            z-index: 1;
            -webkit-backface-visibility: hidden;
        }
        #card .page .face.back {
            -webkit-transform: rotateY(180deg) translateX(-420px);
        }

    </style>
</head>

<body>
    <div id='main'>
        <div id='card'>
            <div class='page draggable'>
                <div class='face front'>
                    <img src='front.jpg'/>
                </div>
                <div class='face back'>
                    <img src='back.jpg'/>
                </div>
            </div>
        </div>
    </div>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
    <script>


        function rotate() {
            $('.page').css("-webkit-transform", "rotate3d(0, -1, 0, 60deg)");
            $('.page').mousedown(function(event) {
                console.log(event.layerX);
            });
        }

        $(document).ready(function() {
            rotate();
        });

    </script>

</body>

</html>

1 Ответ

0 голосов
/ 24 мая 2011

Кажется, вы ищете offsetX свойство event.Возможно, вам придется создавать слушатели для каждого .face, чтобы идентифицировать события, потому что offsetX рассчитывается на основе target, который запускает событие.Или, может быть, вы хотите, чтобы координаты начинались с 0 слева до ширины * 2 справа, тогда вы можете использовать layerX и исходные width ваших элементов: 

console.log((event.layerX<0?width-event.offsetX:width+event.offsetX));

Использование offsetX /offsetY работает независимо от того, какое преобразование вы используете (по крайней мере, во многих протестированных мной сценариях)

...