search

rexxars / react-hexagon

React component that renders a hexagon using SVG. Supports background images, links, SVG content, click handlers and more.
http://rexxars.github.io/react-hexagon/
MIT License
69 stars 21 forks source link

Point/flat top #1

Closed NeXTs closed 8 years ago

NeXTs commented 8 years ago

Hey

How to change angle of hexagon? See https://codepen.io/wvr/pen/WrNgJp Toggle Point Top, Flat Top buttons

I need both of these angles. How to rotate hexagon to make it Flat Top?

rexxars commented 8 years ago

It would probably be best to draw it in the right shape from the start instead of rotating it, this way the fill would work in a predictable manner. I don't have time to address this in the near future, but I'll accept a pull request if anyone wants to provide the necessary changes.

NeXTs commented 8 years ago

And here are handy functions to handle that

http://www.thelow.co.uk/?p=128

In the comments function which able to proceed both angles

rexxars commented 8 years ago

ok, I couldn't stay away from this one ;)

Just released 1.1.0 with the flatTop prop (boolean). Centering content is a bit tricky, but sorta works.

rexxars commented 8 years ago

Demo at http://rexxars.github.io/react-hexagon/

NeXTs commented 8 years ago

Thank you! :smile:

NeXTs commented 8 years ago

@rexxars Seems to be that flatTop mode currently doesn't consider strokeWidth property if it's larger than 10

try this

<Hexagon
    flatTop
    style={{stroke: 'orange', strokeWidth: 25}} />

as result - hexagon will be cropped at the bottom

rexxars commented 8 years ago

Good catch. Pushed 1.1.1 with a fix, see if that works

NeXTs commented 8 years ago

Oh what a day! What a lovely day! :D

It works, thanks again!

rexxars commented 8 years ago

No problem, happy to help :)