如何在famo.us中創建六角形自定義曲面

我正在測試「famo.us」Javascript框架，並且不知道如何執行「自定義曲面」。如何在famo.us中創建六角形自定義曲面

我的目標是創建六角表面（如果可能的圓角），並把這些表面彼此未來的這個例子：

enter image description here

但是，我也需要點擊每個表面上和根據表面激活不同的動作。

並且還將圖像放在每個表面上！

現在，我知道如何使用矩形famo.us面，我知道如何修改它，打開它，翻譯它，等... 但是，它可以創建自定義的表面？

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

目前我的想法是創建具有3個矩形修改表面的surfaceContainer，但是我不能用這個解決方案來圓角，並且在其上設置圖像並不容易。

有沒有人有想法？請分享。

來源

2014-10-20 Geoffrey Lalloué

使用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); 
    };

來源

2014-10-24 12:58:55

如何在famo.us中創建六角形自定義曲面

回答

相關問題