如何在famo.us中创建六角形自定义曲面

问题描述：

我正在测试“famo.us”Javascript框架，并且不知道如何执行“自定义曲面”。如何在famo.us中创建六角形自定义曲面

我的目标是创建六角表面（如果可能的圆角），并把这些表面彼此未来的这个例子：

enter image description here

但是，我也需要点击每个表面上和根据表面激活不同的动作。

并且还将图像放在每个表面上！

现在，我知道如何使用矩形famo.us面，我知道如何修改它，打开它，翻译它，等... 但是，它可以创建自定义的表面？

我的项目是Angular/famo.us项目。

目前我的想法是创建具有3个矩形修改表面的surfaceContainer，但是我不能用这个解决方案来圆角，并且在其上设置图像并不容易。

有没有人有想法？请分享。

使用borderRadius： '10px的' 你的矩形的CSS属性。 – 2014-10-21 21:28:26

我同意你的观点并且做到了（我要编辑我的帖子），但是我只需要一个六角形可点击表面并在其上放置图像，这对我来说很难。 – 2014-10-22 07:00:36

为什么你不把图像放在六边形的中心，并使用相同的点击处理程序点击所有四个元素？ – 2014-10-22 09:32:22

答

随着SkalárWag的帮助，我做了3个矩形的六角形，放置边界半径，并把图像放在上面。全部包含在“fa-container-surface”中以仅管理一个六角形事件点击。

下面是我使用的代码：

<!-- Hexa Tile Surface --> 
    <fa-container-surface fa-click="onClickHexagonTile(hexagon.idx)"> 

     <!-- Hexagon Background --> 
     <fa-modifier fa-opacity="hexagon.opacity"> 

      <fa-container-surface> 

       <fa-modifier ng-repeat="rect in rects" 
           fa-origin="[0.5, 0.5]" 
           fa-size="[csts.hexagonTileWidth, 50]" 
           fa-rotate-z="rect.rotateZ"> 

        <fa-surface fa-background-color="hexagon.color" 
           class="hexagon-tile-rect"/> 

       </fa-modifier> 

      </fa-container-surface> 

     </fa-modifier> 

     <!-- Image --> 
     <fa-modifier fa-translate="[-30, -30, 0]" 
         fa-size="[60, 40]"> 

      <fa-image-surface fa-image-url="{{hexagon.img}}" 
           fa-size="[60, 40]" 
           class="hexagon-tile-img"/> 

     </fa-modifier> 

     <!-- Text --> 
     <fa-modifier fa-translate="[-30, 10, 0]" 
         fa-size="[60, 20]"> 

      <fa-surface class="hexagon-tile-text"> 
       {{hexagon.text}} 
      </fa-surface> 

     </fa-modifier> 

    </fa-container-surface>

而且在我的控制器：

/////////////////////////////// 
    // Define constants 

    $scope.csts = { 
     hexagonTileHeight: 75, 
     hexagonTileWidth: 80, 
     hexagonTileMargin: 5, 
    }; 

    /////////////////////////////// 
    // Define Hexagonal definition 

    // Math.PI/3 = 60° 
    $scope.rects = [ 
     {idx: 0, rotateZ: 0}, 
     {idx: 1, rotateZ: Math.PI/3}, 
     {idx: 2, rotateZ: -Math.PI/3} 
    ]; 

    /////////////////////////////// 
    // Define hexagonal list 

    $scope.hexagonList = [ 
     {idx: 0, column: 0, line: 0, color: "#43D0FA", opacity: 1, img: './img/1.png', text:'1'}, 
     {idx: 1, column: 1, line: 0, color: "#14AF59", opacity: 1, img: './img/2.png', text:'2'}, 
     {idx: 2, column: 0, line: 1, color: "#E1553E", opacity: 1, img: './img/3.png', text:'3'} 
    ]; 

    /////////////////////////////// 
    // Hexagon tile events 

    $scope.onClickHexagonTile = function($hexagonTileIdx) { 
     console.log('Click on hexagon tile : ' + $hexagonTileIdx); 
    };

如何在famo.us中创建六角形自定义曲面

相关推荐