Os usuários de
Inkscape já perceberam que a adição de um ponto em uma linha sempre é feito no meio desta. A curva bézier é fácil de ser manipulada pelo usuário da aplicação com suas linhas de controle, mas não é suficientemente simples de ser "interpretada" para fazermos um código que a manipule. Então, como ele encontra esse ponto? Responder essa questão pode ser interessante para quem pretende fazer extensões para o Inkscape que tratem essas curvas.
Considere que temos a seguinte tag de caminho
(essa tag é equivalente a da curva na animação ao lado):
<path d="M 10,150 C 50,10 170,10 210,150" />
O atributo
d define o caminho. O
M significa "mover para", depois dele infoma-se o
x,y do ponto, neste caso indica o ponto inicial. O
C informa que estamos criando uma curva bezier para o próximo ponto, depois dele informa-se o
x1,y1 do ponto de controle do inicio, o
x2,y2 do ponto de controle do ponto do fim e o
x,y do ponto de chegada.
Então o que temos agora:
- Posição do ponto verde no início (lado esquerdo) da curva:
10,150
- Posição do ponto verde no fim (lado direito) da curva:
210,150
- Posição do primeiro ponto verde de controle:
50,10
- Posição do segundo ponto verde de controle:
170,10
O ponto médio de uma curva bezier pode ser encontrado com uma sucessão de divisões baseadas nas linhas de controle da curva.
Para encontra-lo como mostra a animação ao lado, siga os 5 passos:
- Crie uma linha entre os pontos de controle e encontre o ponto médio desta. (o ponto azul no topo)
- Encontre o ponto médio de cada uma das linhas de controle. (os pontos azuis nas linhas verde escuro)
- Una cada um dos pontos medios das linhas de controle com o primeiro ponto médio encontrado. (são as linhas azuis)
- Encontre os pontos médios destas linhas (são os pontos laranja) e una-os. (cria a linha laranja)
- Encontre o ponto médio desta ultima linha e este será o ponto médio da curva. No caso:
110,45. (o ponto vermelho)
E quais serão os novos pontos de controle caso decida-se adicionar esse ponto na curva? Simples! já está tudo aí. Os pontos laranja são os pontos de controle relativos ao ponto vermelho e os pontos azuis nas linhas de controle originais são os novos pontos de controle dos pontos originais.
Para saber mais sobre a definição dessas curvas em SVG, veja:
http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands
Mais sobre implementação:
http://www.w3.org/TR/SVG/implnote.html
Álgebra da curva Bézier:
http://en.wikipedia.org/wiki/Bezier_curve#Cubic_B.C3.A9zier_curves
Considere que temos a seguinte tag de caminho (essa tag é equivalente a da curva na animação ao lado):
gif 
svg 
