单击深度 Z space 中的 Famo.us 个表面

Question

使用 Famo.us/Angular 创建并转换为负 Z 位置的曲面不会在 Chrome 中接收 ng-click 事件。这似乎是一个已知的 WebKit bug 并且在 Firefox 中不是问题；请参阅下面的 Plunker 中的示例。

现在我想要一组表面沿 Z 轴浮动进出，并能够单击其中任何一个将其置于前景，这是 Chrome 中的一个问题当它们的负 Z 值稍大时。

我可以让表面 fa-pipe-to 成为事件处理程序，但事件数据似乎不包含有关事件源的信息，因此我无法准确辨别单击了哪个表面。

实现这种在 Chrome 中表现良好的行为的好方法是什么？

Famo.us Periodic Table Demo 实现了一种类似于我所想的行为：表面浮动在那里进进出出，它在 Chrome 中运行良好。那里是怎么做到的？ ...无法从缩小的代码中弄清楚这一点。

Unity 游戏引擎提供了一个raycasting functionality，您可以在其中单击鼠标来获取对象。也许我应该实现类似的东西，但我猜 Periodic Table 演示中的拾取表面是以更简单的方式完成的。他们可能只是确保表面保持在正 Z 位置吗？

这是一个在 Z=0 处渲染红色方块的示例，它在 Chrome 中接收点击事件，而在 Z=-200 处渲染的绿色方块不会获得点击事件，除非您ll 运行 Firefox 中的示例：

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>

Answer 1

如果您检查 DOM，元素 <div class="famous-angular-clipping-container"> 在 famous-angular-clipping-container 上没有 transform-style:preserve-3d。 transform-style 的默认值是 flat 并且不从父级继承。

<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 规范中的设计，但如果将其添加到 class 则它可以解决问题。

.famous-angular-clipping-container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

单击深度 Z space 中的 Famo.us 个表面

Clicking on Famo.us surfaces in deep Z space

javascript

webkit

famo.us

famous-angular