Рисование соты с as3

Question

Я пытаюсь создать honeycomb с as3, но у меня есть некоторые проблемы с позиционированием ячеек.

Я уже создал ячейки (не с кодом) и for cycled их на funcion и отправил ему параметры, которые, как я думал, были нужны (сотовая ячейка уже находится в контейнере спрайтов в центре сцены).

чтобы увидеть структуру цикла и какие параметры проходят, см. Пример ниже, единственное, что я вычисляю в placeCell, - это угол, который я должен получить прямо внутри, называемый function

альтернативный текст http://img293.imageshack.us/img293/1064/honeycomb.png

Примечание: угол меняется на противоположный, но это не важно, а цвет полезен в качестве примера только для визуального разделения случаев.

Мой для вызовов цикла placeCell и передачи cell, current_case, counter (индекс) и соты cell_lv (уровень ячейки).

Я думал, что это то, что мне нужно, но я не разбираюсь в геометрии и тригонометрии, поэтому не знаю, как правильно расположить ячейки:

    import flash.display.Sprite;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

function createHoneycomb (cells:int):void {

    var honeycomb:Sprite = new Sprite ();
    addChild (honeycomb);

    var cell_lv:int = 1;
    var increment:int = 6;
    var tot_cur_cells:int = 1;

    var current_case:int = 0;
    var case_counter:int = 1;
    var case_length:int = 1;
    var max_cases:int = 6;

    var nucleus:Sprite = new cell (); // hexagon from library
    honeycomb.addChild (nucleus);

    for (var i:int = 1; i <= cells; i ++) {

        if (case_counter < case_length) {
            case_counter ++;
        } else {
            current_case ++;
            if (current_case > max_cases) current_case = 1;
            case_counter = 1;
        }

        if (i == tot_cur_cells) { // if i reach the current level
            if (i > 1) cell_lv ++;
            case_length = cell_lv;
            tot_cur_cells += (increment * cell_lv);
        }

        var current_cell:Sprite = new cell (); // hexagon from library
        honeycomb.addChild (current_cell);

        placeCell (current_cell, case_counter, current_case, cell_lv);

    }
    function centerHoneycomb (e:Event):void {
        honeycomb.x = stage.stageWidth / 2
        honeycomb.y = Math.round (stage.stageHeight / 2);
    }

    stage.addEventListener (Event.RESIZE, centerHoneycomb)
    stage.dispatchEvent (new Event (Event.RESIZE));
}

function placeCell (cell:Sprite, counter:int, current_case:int, cell_lv:int):void {
    var margin:int = 2;

    // THIS IS MY PROBLEM
    var start_degree:Number = (360 / (cell_lv * 6));
    var angle:Number = (start_degree * ((current_case - 1) + counter) - start_degree);
    var radius:Number = (cell.width + margin) * cell_lv;

    cell.x = radius * Math.cos (angle);
    cell.y = radius * Math.sin (angle);
    // end of the problem

    if (angle != 0) trace ("LV " + cell_lv + "  current_case " + current_case + "   counter " + counter + " angle " + angle + " radius " + radius);
    else trace ("LV " + cell_lv + " current_case " + current_case + "   counter " + counter + " angle " + angle + "     radius " + radius);
}

createHoneycomb (64);

если вы скопируете и вставите этот код, it works, но вам нужно создать шестиугольник и назвать его в библиотеке actionscript как ячейка

как я могу это решить?

Я также подумал использовать переключатель с корпусами для выравнивания, но я думаю, что это немного глючит при этом

Answer 1

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

Однако я создал переменные, подобные тем, что были внутри ваших клеток (на рисунке). Для каждой ячейки у вас есть следующие свойства:

• итерационная переменная i равна вашему номеру ячейки
• радиус r равен вашему уровню и выражает расстояние от центра (0 является центром)
• позиция p выражает позицию в текущем радиусе
• сектор s равен вашему случаю , но начинается с нуля
• p % r равно вашему индексу

У меня нет угла, просто потому, что я не располагаю отдельные шестиугольники под углом. Вместо этого я основываю положение (фиксированных) положений шестиугольников на радиусе 1 и вычисляю недостающие между ними.

Следующий код показывает мою реализацию с 61 (60 + центр; но это настраивается). Вы также можете увидеть код в действии на Wonderfl .

package
{
    import flash.display.Sprite;

    public class Comb extends Sprite
    {
        public function Comb ()
        {
            Hexagon.scale = 0.5;
            this.x = stage.stageWidth / 2;
            this.y = stage.stageHeight / 2;

            // draw honeycomb with 60 cells
            drawComb( 60 );
        }

        private function drawComb ( n:uint ):void
        {
            var colors:Array = new Array( 0x33CC33, 0x006699, 0xCC3300, 0x663399, 0xFF9900, 0x336666 );
            var sectors:Array = new Array(
                new Array( 2, 0 ),
                new Array( 1, 1 ),
                new Array( -1, 1 ),
                new Array( -2, 0 ),
                new Array( -1, -1 ),
                new Array( 1, -1 ) );

            var w:Number = 0.50 * Hexagon.hxWidth;
            var h:Number = 0.75 * Hexagon.hxHeight;
            var r:uint, p:uint, s:uint;
            var hx:Hexagon;

            for ( var i:uint = 0; i <= n; i++ )
            {
                r = getRadius( i );
                p = getPosition( i, r );
                s = getSector( i, r, p );

                // create hexagon
                if ( r == 0 )
                    hx = new Hexagon( 0xCCCCCC );
                else
                    hx = new Hexagon( colors[s] );

                hx.x = w * ( r * sectors[s][0] - ( p % r ) * ( sectors[s][0] - sectors[ ( s + 1 ) % 6 ][0] ) );
                hx.y = h * ( r * sectors[s][1] - ( p % r ) * ( sectors[s][1] - sectors[ ( s + 1 ) % 6 ][1] ) );
                addChild( hx );
            }
        }

        private function getRadius ( i:uint ):uint
        {
            var r:uint = 0;
            while ( i > r * 6 )
                i -= r++ * 6;
            return r;
        }

        private function getPosition ( i:uint, r:uint ):uint
        {
            if ( r == 0 )
                return i;
            while ( r-- > 0 )
                i -= r * 6;
            return i - 1;
        }

        private function getSector ( i:uint, r:uint, s:uint ):uint
        {
            return Math.floor( s / r );
        }
    }
}

import flash.display.Shape;

class Hexagon extends Shape
{
    public static var hxWidth:Number = 90;
    public static var hxHeight:Number = 100;

    private static var _scale:Number = 1;

    public function Hexagon ( color:uint )
    {
        graphics.beginFill( color );
        graphics.lineStyle( 3, 0xFFFFFF );
        graphics.moveTo(   0, -50 );
        graphics.lineTo(  45, -25 );
        graphics.lineTo(  45,  25 );
        graphics.lineTo(   0,  50 ),
        graphics.lineTo( -45,  25 );
        graphics.lineTo( -45, -25 );
        graphics.lineTo(   0, -50 );

        this.scaleX = this.scaleY = _scale;
    }

    public static function set scale ( value:Number ):void
    {
        _scale = value;
        hxWidth = value * 90;
        hxHeight = value * 100;
    }

    public static function get scale ():Number
    {
        return _scale;
    }
}