Odbieranie danych o przekształconych danych myszy z obiektów DOM za pomocą transformacji 3D CSS

Czy istnieją obecnie jakieś dane w zdarzeniu myszy javascript, które pozwoliłyby mi łatwo znaleźć lub obliczyć pozycję myszy względem przestrzeni 3D przekształconego elementu?Odbieranie danych o przekształconych danych myszy z obiektów DOM za pomocą transformacji 3D CSS

Aby zilustrować wizualnie,
Po lewej stronie jest div bez matrycy 3d, po prawej stronie jest div po transformacji 3d.
o jest pochodzenie przypadku myszy

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

W poniższym skrypcie, klikając te same piksele div zgłosi event.layerX który jest w 2d przestrzeni transformacji w/ekranu dokumentu.

Jestem świadomy, ale nie jestem zachwycony perspektywą przeanalizowania matrycy div3d i użycia jej do pomnożenia do pozycji zdarzenia, aby ją odkryć, jednak w prawdziwej implementacji div będą miały bardziej złożone transformacje i to będzie potrzebne do zrobienia na każdej klatce dla więcej niż jednego obiektu i martwię się o obciążenie, które mogłoby przynieść ... Z pewnością nie miałbym nic przeciwko temu, jeśli jest to moja jedyna opcja.

<!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>

Źródło

2011-03-08 Nolsto

Wydaje się, że szukasz nieruchomości eventoffsetX. Może musisz utworzyć detektory dla każdego .face, aby zidentyfikować zdarzenia, ponieważ offsetX jest obliczany na podstawie target, który uruchamia zdarzenie. A może chcesz współrzędne zacząć od 0 po lewej stronie, aby szerokość * 2 po prawej stronie, a następnie można użyć layerX i oryginalny width swoich elementów:

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

Używanie offsetX/offsetY nie działa znaczenie jakiej transformacji używasz (przynajmniej w wielu testowanych przeze mnie scenariuszach)

Źródło

2011-05-24 05:07:42 tog000

offsetX i offsetY są zdecydowanie opłacalnym rozwiązaniem. Wygląda na to, że twój przykład warstwy działałby na obrót wzdłuż jednej osi, ale zepsułby się z każdym kolejnym. Uderzyłem niektórych słuchaczy na przednią i tylną twarz i, co dziwne, twarz z '-webkit-backface-visibility' ustawioną na' hidden' nie rejestruje mousedowns. – Nolsto

Każdy pomysł, jak uzyskać taką samą wartość offsetX, wstępnej transformacji dla zdarzeń dotykowych? Wygląda na to, że tam nie istnieje. – tremby

Odbieranie danych o przekształconych danych myszy z obiektów DOM za pomocą transformacji 3D CSS

Odpowiedz

Powiązane problemy