Criar gráficos no Xojo é fácil… com GraphicsPath

As vantagens são muitas! Por exemplo, o fato de ser uma classe você pode criar diferentes desenhos que não requerem um contexto gráfico, bem como a precisão com que você pode criar as representações concatenando os caminhos... simplesmente juntando os pontos!

E é que os métodos disponíveis na classe permitirão que você adicione de uma maneira realmente simples e menos complexa que a classe Object2D, tanto retângulos (com sua variante de cantos arredondados), arcos, curvas e curvas quadráticas (de Bèzier) que fornecem nós com um ponto de controle.

Você pode baixar o projeto de amostra aqui.

O interessante neste caso é que toda chamada a um desses métodos terá como ponto de partida a coordenada (ponto) onde o "traço" terminou da forma anterior; embora você sempre possa usar o método MoveToPoint para fazer exatamente isso: mova o "lápis" para uma determinada coordenada sem desenhar um traço. Este seria então o novo ponto tomado como origem ao desenhar a próxima linha, desenhar a curva, etc.

Quanto às propriedades disponíveis, você tem o seguinte:

• Ponto Atual. Você pode consultá-lo para saber em qual coordenada você está em um determinado momento e tomar uma decisão em conformidade.
• Está vazio. Permite saber se o gráfico (gráfico) está vazio; ou seja, não contém quaisquer elementos.
• IsRectangle. Ele nos permite saber se o caminho é um retângulo.

Em andamento!

Começaremos vendo como é fácil aplicar esses princípios na criação de um gráfico que usa uma curva de Bêzier, na qual podemos variar o ponto de controle. Quando terminarmos, nosso projeto ficará assim:

1. Projete a interface do usuário

Nossa interface de usuário consiste nos seguintes elementos:

• 2 marcas (Etiqueta)
• 2 cursores. Use o painel do inspetor em cada um deles para ativar a propriedade "Permitir rolagem em tempo real" na seção Comportamento.
• 1 Controle tecido.

Use as configurações de bloqueio dos controles em cada um dos Sliders e na tela, conforme mostrado na imagem. Isso permitirá que seu tamanho se acomode à medida que o tamanho da janela for alterado.

2. Criação da nossa área gráfica (subclasse Canvas)

Vamos tornar o Canvas uma classe especializada, e isso significa criar nossa própria subclasse.

Adicione uma nova classe ao projeto (Inserir> Classe) e use o painel Inspetor para ajustar as seguintes propriedades:

• Nome: Quadrática Tela
• Super: tecido

Em seguida, adicione duas propriedades computadas. Para fazer isso, certifique-se de que nossa entrada de classe esteja selecionada no Navegador de Projetos e acesse o menu de contexto para selecionar a opção Adicionar a “CuadraticCanvas”> propriedade Calculada.

Use os seguintes dados no painel do inspetor resultante:

• Nome: PC1X
• tipo: Duas vezes

Em seguida, selecione o método "Set" da propriedade calculada e adicione a seguinte linha de código após a existente:

invalide-se

Com isso forçamos o controle a ser redesenhado toda vez que alteramos o valor do ponto X na coordenada de controle da curva de Bezier.

Repita para adicionar uma segunda propriedade computada com os seguintes valores:

• Nome: PC1Y
• tipo: Dobro.

Lembre-se de adicionar também a linha de código «Invalidate» no método «Set» desta propriedade.

Agora vamos adicionar o Paint Event Handler à nossa classe. Para isso, e com o item ainda selecionado no Project Navigator, acesse o menu de contexto para selecionar a opção Add to «CuadraticCanvas»> Event manager...

No painel resultante, selecione Paint e confirme sua seleção. Esta ação adicionará o novo evento à classe apresentando o editor de código onde você precisa inserir o seguinte código:

g.AntiAlias ​​​​= Vero g.DrawingColor = & cffffff g.FillRectangle (0,0, g.Width, g.Height) g.DrawingColor = & c000000 g.DrawLine (g.Width / 2,0, g.Width / 2, g.Height) g.DrawLine (0, g.Height / 2, g.Width, g.Height / 2) g.DrawingColor = & ccc1233 Var gp As New GraphicsPath gp.MoveToPoint (0, g.Altezza / 2) gp.AddQuadraticCurveToPoint (Me.pc1x, Me.pc1y, g.Width, g.Height / 2) g.DrawPath gp

Como você pode ver, é aqui que criamos uma instância da classe GraphicsPath (representada pela variável "gp"), e na qual uma curva quadrática é adicionada usando as coordenadas correspondentes aos valores da propriedade "PC1X" como controle ponto e "PC1Y ".

Para que nossa forma seja desenhada no contexto gráfico (representado pela variável "g") usamos o método DrawPath, passando a variável do nosso objeto GraphicsPath como argumento.

3. Ligue os pontos

Selecione a entrada "Canvas1" no Project Navigator e use o painel Inspector para alterar o campo "Super" para "CuadraticCanvas".

Em seguida, selecione o elemento "Slider1" e adicione o manipulador de eventos "ValueChanged". Digite a seguinte linha de código no editor de código resultante:

canvas1.pc1x = me.Value

Repita a operação com "Slider2", exceto que neste caso a linha de código será:

canvas1.pc1y = me.Value

Agora selecione o item "Window1" no Project Navigator e adicione dois eventos: Open e Resize. Incorpore a seguinte linha de código em ambos:

SetSlider

Em seguida, adicionaremos um novo método na janela Window1. Para isso, selecione-o no Project Navigator e acesse o menu de contexto para escolher a opção Add to “Window1”> Method. Use a seguinte assinatura no painel do inspetor:

• Nome do método: Definir controles deslizantes

E insira o seguinte código no editor de código associado:

slider1.MaximumValue = canvas1.Width slider2.MaximumValue = canvas1.Height canvas1.PC1x = Slider1.Value canvas1.PC1y = Slider2.Value

Este será o método encarregado de atualizar tanto o valor máximo dos sliders (com a largura da janela), quanto de atualizar o desenho do gráfico passando os novos valores ajustados.

Mova a curva!

Já temos tudo o que precisamos. É hora de executar o aplicativo e usar os controles deslizantes para mover o ponto de controle. Ao fazer isso, você verá como o design da curva varia na tela.

Você já tem um ponto de partida! Tente usar o restante dos métodos da classe GraphicsPath ou adicionar mais curvas de Bezier para desenhar as formas que você precisa.