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

Question

我正在测试＆＃34; famo.us＆＃34; Javascript框架，并且不知道如何做＆＃34;自定义曲面＆＃34;。

我的目标是创建六边形曲面（如果可能的话，使用圆角）并将这些曲面放在彼此旁边，如下例所示：

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

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

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

---

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

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

有人有想法吗？请分享。

Answer 1

在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);
    };