Como desenhar uma estrela de 5 pontas radialmente simétrica?

Estou procurando uma estrela de 5 pontas que possa girar como parte de uma interface do usuário. Portanto, o centro da estrela não deve se mover - caso contrário, parece estranho.

No entanto, não importa de onde eu recebo uma estrela de 5 pontas, o centro da estrela não está no centro da imagem.

Estou confiante de que essa forma existe, porque:

• É possível fazer um pentágono radialmente simétrico. Cada vértice tem 72 graus de diferença no círculo circunscrito.
• Uma estrela assim pode ser delimitada por um quadrado, já que o círculo pode circunscrever um quadrado; no máximo (eu acho) 1 ponto da estrela tocará o quadrado. É possível ter um recurso quadrado contendo uma estrela radialmente simétrica, com o centro da estrela no centro do quadrado.

Se eu quisesse criar esse formato, que software de baixo custo eu poderia usar e qual seria o processo básico? Como estou procurando simetria radial, imagino que começar com um pentágono perfeito seja a chave. Espero que a parte mais difícil do processo seja garantir que todas as 10 arestas da estrela tenham o mesmo comprimento.

Aqui está um método simples usando o Inkscape (ponto) org, que é gratuito e de código aberto.

O principal problema é que o centro de rotação de uma estrela é diferente do centro de rotação de sua caixa delimitadora. Portanto, para que tudo gire simetricamente, você precisa colocar a estrela dentro de um quadrado e combinar os dois centros de rotação.

1. Na barra de ferramentas de encaixe na borda direita da janela do aplicativo, habilite Snapping, Snap Nodes, Snap Cusp Nodes, Snap Item Centres.

2. Clique e arraste uma guia horizontal e vertical das réguas e verifique se os nós se cruzam.

3. Usando a ferramenta de polígono definida para a opção de estrela e 5 cantos, desenhe uma estrela de cinco pontas. Aplique um traçado e sem preenchimento para facilitar a visualização.

4. Clique e arraste a forma de estrela sobre a origem que você criou e permita que ela se encaixe no centro de rotação.

5. Escolha a ferramenta Retângulo, passe o mouse sobre a origem até que ela apareça, mantenha pressionada a tecla Shift + CTRL enquanto clica e arrasta para criar um quadrado centralizado em torno da origem.

6. Agrupe quadrado e estrela.

7. Quando terminar, você pode remover o traçado do quadrado, aplicar um preenchimento à estrela e exportar como PNG usando a opção "Ocultar tudo, exceto selecionado". O resultado é um PNG com fundo quadrado transparente com os dois centros de rotação do quadrado e da estrela no mesmo local.

Se você quer o Inkscape SVG, está aqui

Uma estrela de 5 pontas É radialmente simétrica - A questão aqui é que o centro de rotação é inclinado pela distância vertical (neste exemplo) do ponto superior e dos 2 pontos inferiores.

OK, então, como resolver o seu problema ... Não sei em que tipo de interface do usuário você está trabalhando ou em quais tipos de ativos são utilizáveis ​​- mas vamos supor que você possa usar um .PNG quadrado com um fundo transparente.

Eu simplesmente salvaria o PNG com o centro radial da estrela alinhado com o centro diagonal do fundo e, quando você girar, ele permanecerá centralizado.

Para fazer essa forma, usei o Illustrator, que não é de forma alguma barato, mas existem pacotes Vector gratuitos / baratos disponíveis. Desenhei 2 círculos, um para o diâmetro externo da estrela, um para o interior. Eu, então, expus 5 linhas que cruzam o centro e são rotacionadas 72 graus uma da outra.

Então desenhei linhas para conectar os pontos externos aos pontos internos onde eles cruzam os círculos. Simples!

De fato, como você notou, não existe uma estrela de cinco lados simétrica de igual lado que atenda ao requisito de ter centro onde o centro da caixa delimitadora da estrela está. Os sistemas de imagem tendem a cortar o excesso.

O centro de um objeto é uma coisa complicada. O centro de uma caixa delimitadora equivale raramente onde está o centro de um objeto. Infelizmente, centro é um conceito difuso, portanto, não importa o que alguém escolha como métrica central, você poderá errar de vez em quando. (mais discussão sobre isso pode ser encontrada aqui .)

Agora, quase universalmente, os sistemas seguem o caminho mais fácil e definem o centro da caixa delimitadora como o centro do objeto. Tudo bem, se você quiser outro centro, basta cercar seu objeto com uma caixa ou círculo invisível, suficientemente grande e central onde você desejar. Ele pode tocar uma borda, se você quiser, mas isso não é essencial (nem necessariamente a representação mais compacta ou sem problemas).

Imagem 1 : Gire em torno do centro bb.

Como alternativa, você pode usar grupos para encontrar o centro. Armazenando essencialmente a posição do centro, agora não importa mais o formato da imagem. E aqui está um exemplo SVG ao vivo do uso do método de agrupamento.

O que parecer mais fácil para você, o método posterior é mais compacto em casos complicados ou em que você considera o centro na borda da imagem, pois é necessário armazenar apenas 2 carros alegóricos. Considerando que, se você tiver um bitmap com muito espaço vazio, estará perdendo muito mais memória.

Você pode usar este SVG básico para criar um no seu navegador, não são necessárias outras ferramentas:

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 100 100">
    <defs> 
        <!-- change the two 20 values to make rays thicker or thinner -->
        <path id="ray" d="M-20,0 L0,-50 L20,0 Z"/>
    </defs>

    <g style="stroke:none; fill: black" transform="translate(50,50)">
        <!-- five points of star -->
        <use xlink:href="#ray"/>
        <use transform="rotate(72)" xlink:href="#ray"/>
        <use transform="rotate(144)" xlink:href="#ray"/>
        <use transform="rotate(216)" xlink:href="#ray"/>
        <use transform="rotate(288)" xlink:href="#ray"/>
        <!-- star will be centred on this circle in the green bounding box -->
        <circle r="1" fill="red" stroke="none"/>
        <rect x="-50" y="-50" width="100" height="100" fill="none" stroke="green"/>
    </g>

</svg>

Ele define um triângulo para usar como raio e cria cinco cópias em rotações de 72 graus (360/5) ao redor do ponto central de um quadrado.

Desenhe um círculo e depois um acorde que não passe pelo centro. Em seguida, agrupe-os e gire o grupo em 72 graus, quatro vezes, copiando-o cada vez. Voila, uma estrela. Agora você pode desagrupar todos os seus grupos, ampliar e unir as linhas em cada ponto e excluir as linhas excedentes.

O problema que você está girando é que o quadrado delimitador não está centralizado no centro da estrela. Para consertar isso, basta manter um dos círculos originais, torná-lo invisível, sem pressioná-lo e preenchê-lo, e agrupá-lo com a estrela. A caixa delimitadora ao redor deste círculo agora será concêntrica com sua estrela e você poderá girá-la para o conteúdo do seu coração.

Usando o aplicativo para Mac Sketch, a ação 'Insert Shape -> Star' parece fazer exatamente o que estou perguntando no arrasto inicial. Apenas certifique-se de não redimensioná-lo! Você pode até definir o raio interno. Eu usei 38%.