Question

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

现在我希望有一组浮动进出Z轴的表面，并且可以点击它们中的任何一个将它带到前台，这在Chrome有点大的时候是个问题负Z值。

我可以让曲面fa-pipe-to成为一个EventHandler，但事件数据似乎并不包含有关事件来源的信息，所以我无法准确辨别出被点击的曲面。

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

Famo.us Periodic Table Demo实现了类似于我的想法的行为：Surfaces浮动进出，它在Chrome中运行良好。那怎么办？ ......无法从缩小的代码中找出答案。

Unity游戏引擎提供raycasting functionality，您可以在其中点击鼠标点击对象。也许我应该实现类似的东西，但我的猜测是在周期表演示中选择表面是以更简单的方式完成的。他们是否只是确保表面保持在正Z位置？

以下是在Z = 0处呈现红色正方形的示例，其在Chrome中接收点击事件，而在Z = -200处呈现的绿色正方形将不会获得点击事件，除非您将在Firefox中运行该示例：

<!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">上的元素transform-style:preserve-3d没有famous-angular-clipping-container。 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规范中的设计，但是如果将其添加到课程中则会解决问题。

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

单击深Z空间中的Famo.us曲面

1 个答案: