1

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

现在我想要一组沿 Z 轴进出浮动的表面，并且能够单击其中任何一个将其带到前台，当它们具有较大的负 Z 值时，这在 Chrome 中是一个问题.

我可以将表面设置fa-pipe-to为 EventHandler，但事件数据似乎不包含有关事件源的信息，因此我无法准确识别单击了哪个表面。

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

Famo.us元素周期表演示实现了与我的想法类似的行为：表面在其中浮动，它在 Chrome 中运行良好。那里是怎么做的？...无法从缩小的代码中弄清楚这一点。

Unity 游戏引擎提供了光线投射功能，您可以在其中通过鼠标点击获得物体。也许我应该实现类似的东西，但我的猜测是元素周期表演示中的拾取表面是以更简单的方式完成的。他们是否可能只是确保表面保持在正 Z 位置？

这是一个在 Z=0 处呈现红色方块的示例，它在 Chrome 中接收点击事件，而在 Z=-200 处呈现的绿色方块不会收到点击事件，除非您将在 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>
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 回答