Как создать шестиугольную пользовательскую поверхность в famo.us

Question

Я тестирую Javascript Framework "famo.us" и не знаю, как создавать "пользовательские поверхности".

Моя цель - создать шестиугольные поверхности (если возможно, с закругленными углами) и расположить эти поверхности рядом друг с другом, как в этом примере:

Но мне также нужно нажимать на каждую поверхность и активировать различные действия в зависимости от поверхности.

А также наносить изображения на каждую поверхность!

Прямо сейчас я знаю, как использовать прямоугольные поверхности famo.us, я знаю, как изменить его, повернуть, перевести и т. Д. Но возможно ли создавать собственные поверхности?

---

Мой проект - проект Angular / famo.us.

На данный момент моя идея состоит в том, чтобы создать SurfaceContainer с 3 прямоугольными измененными поверхностями, но у меня не может быть закругленных углов с этими решениями, и на него не легко установить изображения.

У кого-нибудь есть идея? Поделись, пожалуйста.

Answer 1

С помощью Skalár Wag я сделал шестиугольник с 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);
    };