How to create a hexagonal custom surface in famo.us

问题

I'm testing "famo.us" Javascript Framework, and don't know how to do "custom surfaces".

My goal is to create hexagonal surfaces (if possible with rounded corners) and put those surfaces next to each other as this example :

But, i also need to click on each surface and activate different actions depending on the surface.

AND also to put images on each surface !

Right now, i know how to use rectangular famo.us surfaces, i know how to modify it, turn it, translate it, etc... But is it possible to create custom surfaces?

My project is Angular / famo.us project.

For the moment my idea is to create surfaceContainer with 3 rectangular modified surfaces but i can't have rounded corners with this solutions, and it's not easy to set images on it.

Does any one have an idea? Please share.

回答1:

With Skalár Wag help, I made hexagonal with 3 rectangles, put border radius and put image on top. All is contained in a "fa-container-surface" to manage only one event click by hexagonal.

Below is the code I used :

<!-- 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>

And in my controller :

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

来源：https://stackoverflow.com/questions/26467692/how-to-create-a-hexagonal-custom-surface-in-famo-us

标签

javascript

famo.us

famous-angular