1

Famo.us/Angular で作成され、負の Z 位置に変換されたサーフェスはng-click、Chrome でイベントを受け取りません。これはWebKitの既知のバグのようで、Firefox では問題になりません。以下のプランカーの例を参照してください。

ここで、Z 軸に沿って出入りするサーフェスのコレクションを作成し、それらのいずれかをクリックしてフォアグラウンドに移動できるようにしたいと考えています。これは、Chrome で負の Z 値がやや大きい場合に問題になります。 .

サーフェスfa-pipe-toを EventHandler にすることもできますが、イベント データにはイベントのソースに関する情報が含まれていないようです。そのため、どのサーフェスがクリックされたかを正確に識別できません。

Chrome でうまく機能するこの動作を実装する良い方法は何ですか?

Famo.us Periodic Table Demoは、私が考えていたものと同様の動作を実装しています。サーフェスは内外にフロートし、Chrome でうまく機能します。そこではどのように行われますか？...縮小されたコードからそれを理解することができませんでした。

Unity ゲーム エンジンは、マウス クリックでヒットするオブジェクトを取得できるレイキャスティング機能を提供します。似たようなものを実装する必要があるかもしれませんが、Periodic Table Demo でのサーフェスの選択はより簡単な方法で行われると思います。サーフェスが正の Z 位置にとどまるようにしただけでしょうか?

これは、Chrome でクリック イベントを受け取る Z=0 で赤い正方形をレンダリングする例です。一方、Firefox で例を実行しない限り、Z=-200 でレンダリングされた緑色の正方形はクリック イベントを取得しません。

http://plnkr.co/edit/UZp4oB?p=preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Clicking on Famo.us surfaces in deep z-space</title>
  <link href="famous-angular.css" rel="stylesheet" type="text/css">
  <link href="style.css" rel="stylesheet" type="text/css">

  <script src="https://code.famo.us/famous/global/0.2.2/famous.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
  <script src="famous-angular.js"></script>
</head>
<body ng-app="faScrollViewExampleApp">

  <fa-app ng-controller="ScrollCtrl" fa-perspective="1000">

    <fa-view ng-repeat="surface in surfaces">

      <fa-modifier fa-size="[200, 200]" 
          fa-translate="[200*$index, 200*$index, surface.zIndex]">
       <fa-surface fa-background-color="surface.color"
          ng-click="surfaceClick($index)">

         I'm in z = {{surface.zIndex}}

       </fa-surface>
      </fa-modifier>      

    </fa-view>

  </fa-app>

  <script>
    angular.module('faScrollViewExampleApp', ['famous.angular'])
        .controller('ScrollCtrl', ['$scope', '$famous', function($scope, $famous) {

          $scope.surfaces = [
            {color: 'red', zIndex: 0}, 
            {color: 'green', zIndex: -200} ];

          $scope.surfaceClick = function( index ) {

            alert( "index " + index + " clicked");
          }

      }]);
  </script>
</body>
</html>
4

1 に答える 1

2

DOM を調べると、要素に<div class="famous-angular-clipping-container">は. のデフォルトは、親から継承しないことです。transform-style:preserve-3dfamous-angular-clipping-containertransform-styleflat

<div class="famous-angular-clipping-container">
  <div class="famous-angular-container" style="perspective: 1000px; -webkit-perspective: 1000;">
    <div class="famous-surface ng-click-active" style="opacity: 0.999999; -webkit-transform-origin: 0% 0% 0px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); width: 200px; height: 200px; background-color: red;">
      <div class="fa-surface"><span class="ng-binding ng-scope">
         I'm in z = 0
       </span>
      </div>
    </div>
    <div class="famous-surface" style="opacity: 0.999999; -webkit-transform-origin: 0% 0% 0px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 200, -200, 1); width: 200px; height: 200px; background-color: green;">
      <div class="fa-surface"><span class="ng-binding ng-scope">
         I'm in z = -200
       </span>
      </div>
    </div>
  </div>
</div>

これが仕様の設計によるものかどうかはわかりませんfamous-angularが、クラスに追加された場合、問題は修正されます。

.famous-angular-clipping-container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
于 2015-04-21T01:07:53.193 に答える