0

我正在测试“famo.us”Javascript 框架，但不知道如何做“自定义表面”。

我的目标是创建六边形表面（如果可能的话带有圆角）并将这些表面彼此相邻放置，如本例所示：

在此处输入图像描述

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

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

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

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

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

有人有想法吗？请分享。

4

1 回答 1

0

在 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);
    };
于 2014-10-24T12:58:55.723 回答