7

現在、javascriptマウスイベントに、変換された要素の3D空間に対するマウスの位置を簡単に見つけたり計算したりできるデータはありますか？

視覚的に説明するために、
左側は3d行列のないdiv、右側は3d変換後のdivです。
oマウスイベントの発生源です

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

以下のスクリプトでは、div内の同じピクセルをクリックするとevent.layerX、ドキュメント/画面の2D変換スペースにあるピクセルが報告されます。

私は知っていますが、divのmatrix3dを解析し、それを使用してイベント位置に乗算してこれを発見する可能性についてはわくわくしていませんが、実際の実装では、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>
4

1 に答える 1

0

offsetX物件をお探しのようですevent。offsetXおそらく、イベントを発生させるものに基づいて計算されるため、イベントを識別するためにすべての.faceにリスナーを作成する必要がありますtarget。または、座標を左側の0から右側のwidth * 2まで開始したい場合は、layerXと元widthの要素を使用できます。

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

offsetX / offsetYの使用は、使用する変換に関係なく機能します（少なくとも、私がテストした多くのシナリオでは）

于 2011-05-24T05:07:42.527 に答える