.
Aurium.Colivre.Coop.br Esse site é Legal Demais para Internet Explorer

Aurium :: PontoMedioCurvaBezier

Últimas blogadas:

%HEADLINES{"http://softwarelivre.org/aurium/blog/feed" refresh="600" header="SoftwareLivre.org" limit="15" format=" * $title" }% %HEADLINES{"http://cirandas.net/aurium/blog/feed" refresh="600" header="Cirandas.net" limit="15" format=" * $title" }%



Os usuários de Inkscape já perceberam que a adição de um nó em uma linha (pelo botão adicionar nó) é feito no meio desta. A curva bézier é fácil de ser manipulada pelo usuário da aplicação com suas alças 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.

[[http://wiki.colivre.net/pub/Aurium/PontoMedioCurvaBezier/bezier.svg][]]

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:

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:
  1. Crie uma linha entre os pontos de controle e encontre o ponto médio desta. (o ponto azul no topo)
  2. Encontre o ponto médio de cada uma das linhas de controle. (os pontos azuis nas linhas verde escuro)
  3. Una cada um dos pontos medios das linhas de controle com o primeiro ponto médio encontrado. (são as linhas azuis)
  4. Encontre os pontos médios destas linhas (são os pontos laranja) e una-os. (cria a linha laranja)
  5. 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. wink

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

DiggThis

Topic attachments
I Attachment Action Size Date Who Comment
bezier.gifgif bezier.gif manage 29 K 24 Jun 2006 - 21:23 AurelioAHeckert  
bezier.svgsvg bezier.svg manage 2 K 24 Jun 2006 - 21:23 AurelioAHeckert  
Copyright © 2004 - 2019 Aurélio A. Heckert
Conteúdo licenciado sob Creative Commons by-nc-sa