Нажатие на поверхности Famo.us в глубоком Z-пространстве

Поверхности, созданные с помощью Famo.us/Angular и переведенные в отрицательную позицию Z, не принимают ng-click событий в Chrome. Это похоже на известный WebKit bug и не является проблемой в Firefox; см. пример в приведенном ниже Plunker.Нажатие на поверхности Famo.us в глубоком Z-пространстве

Теперь я хотел бы иметь коллекцию поверхностей, плавающих внутри и снаружи вдоль оси Z, и иметь возможность щелкнуть по любому из них, чтобы вывести ее на передний план, что является проблемой в Chrome, когда у них есть несколько большое отрицательное значение Z.

Я мог бы иметь поверхности fa-pipe-to EventHandler, но данные о событиях, похоже, не содержат информации об источнике события, поэтому я не могу точно определить, на какую поверхность была нажата.

Что такое хороший способ реализовать это поведение, которое хорошо работает в Chrome?

Famo.us Periodic Table Demo обладает поведением, аналогичным тому, что я имею в виду: поверхности плавают туда и обратно и хорошо работают в Chrome. Как это делается? ... не смогли понять это из мини-кода.

Игровой движок Unity предоставляет raycasting functionality, где вы можете получить объекты, попавшие под щелчок мыши. Может быть, мне следует реализовать что-то подобное, но я предполагаю, что сбор поверхностей в Демографической таблице выполняется проще. Возможно, они просто удостоверились, что поверхности остаются в позитивных местах Z?

Вот пример, изображающий красный квадрат в Z = 0, который получает событие клика в Chrome, а зеленый квадрат, отображаемый в Z = -200, не получит событие click, если вы не запустите пример в 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>

источник

2015-04-20 Bjorn Thor Jonsson

Если вы осмотрите 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%; 
}

источник

2015-04-21 01:07:53 talves

Возможно, лучше всего проверить у разработчиков «знаменитого углового», чтобы узнать, было ли это предполагаемое поведение или ошибка. – talves

Большое спасибо @talves за то, что указали на CSS-свойство 'transform-style'! Установка его в значение 'preserve-3d' решает проблему, но также вводит новое поведение, где [поверхности с более низким значением сдвига Z могут появляться перед более высокими значениями Z] (http://plnkr.co/edit/36zfpT? P = preview), если они были добавлены позже в DOM. Это можно решить [путем обеспечения того, чтобы поверхности с более низким преобразованием Z также имели свойство CSS z-index с более низким значением] (http://plnkr.co/edit/8MAMsZ?p=preview). Тогда все работает нормально. –

Возможно, это изменившееся поведение объясняется тем, что по умолчанию 'transform-style' является' flat' в 'known-angular'. Кроме того, [стиль преобразования в настоящее время отмечен как экспериментальная технология] (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style). –

Нажатие на поверхности Famo.us в глубоком Z-пространстве

ответ

Смежные вопросы