orlikraf / flutter-hexagon

MIT License
31 stars 17 forks source link

HexagonGrid drawing a "squashed" hexagon? #25

Open nohkumado opened 11 months ago

nohkumado commented 11 months ago

Hello!

i want to build a playfield with a given radius (your "depth" ?) but at the same time limit the number of lines the grid has?

perhaps https://gitlab.com/nohkumado/hexagonal_grid can explain better what i would like to achieve? the second example, in ascii art...

orlikraf commented 11 months ago

I would draw invisible hexagons on the grid to achieve this but it will not take less space

nohkumado commented 11 months ago

indeed :D having lots of transparent "padding" doesn't help :D as sayd beeing able to restrict propagation in r would be nice, but i have to admit that i am not smart enough to understand your grid code :'(

orlikraf commented 11 months ago

This project isn't perfected so I understand your struggle with it. Here is some code example how to achieve what I've seen in your ascii art. This is very rough but it's rendering the shape you are interested in. The indexing is different from the hex grid and it's closer to regular array. just keep in mind that for this case a column is made out of neighboring hexagons. On this image is single column of index = 0 image

  bool isEmpty(int col, int row) {
    if (col == 0 && row >= 1 && row <= 3) {
      return false;
    }
    if (col >= 1 && col <=5 && row >= 0 && row <= 5) {
      return false;
    }
    if(col == 6 && row == 2){
      return false;
    }
    return true;
  }

  Widget _buildHorizontalGrid() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: HexagonOffsetGrid.oddPointy(
        color: Colors.black54,
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 32.0),
        columns: 8,
        rows: 5,
        buildTile: (col, row) => isEmpty(col, row)
            ? HexagonWidgetBuilder(
                color: Colors.transparent,
              )
            : HexagonWidgetBuilder(
                elevation: col.toDouble(),
                padding: 4.0,
                child: Text('$col, $row'),
              ),
      ),
    );
  }
orlikraf commented 11 months ago

but if you really want to do it on the grid to keep the (q,r) indexes there is a way:

Widget _buildGrid(BuildContext context) {
    return InteractiveViewer(
      minScale: 0.2,
      maxScale: 4.0,
      child: HexagonGrid(
        hexType: HexagonType.POINTY,
        color: Colors.pink,
        depth: 3,
        buildTile: (coordinates) => coordinates.r.abs() == 3
            ? HexagonWidgetBuilder(
                color: Colors.transparent,
              )
            : HexagonWidgetBuilder(
                padding: 2.0,
                cornerRadius: 8.0,
                child: Text('${coordinates.q}, ${coordinates.r}'),
              ),
      ),
    );
  }

image

nohkumado commented 11 months ago

thanks a lot!! i will use that in the meantime!