Usando formas predefinidas

Este tópico descreve o VML, um recurso que foi preterido a partir do Windows Internet Explorer 9. Páginas da Web e aplicativos que dependem de VML devem ser migrados para SVG ou outros padrões amplamente compatíveis.

Observação

A partir de dezembro de 2011, este tópico foi arquivado. Como resultado, ele não é mais mantido ativamente. Para obter mais informações, consulte Conteúdo arquivado. Para obter informações, recomendações e diretrizes sobre a versão atual do Windows Internet Explorer, consulte Internet Explorer Developer Center.

 

Como você aprendeu, você pode usar o <oval> elemento de VML para criar uma elipse simples. O VML fornece vários outros elementos predefinidos. Neste tópico, ilustraremos como desenhar elementos gráficos usando esses elementos.

Neste tópico:

• rect
• Roundrect
• Linha
• Polilinha
• curva
• arc
• Resumo

rect

Você pode usar o <rect> elemento para desenhar um retângulo. Em seguida, você pode personalizar o retângulo especificando atributos de propriedade diferentes.

Por exemplo, você pode desenhar um retângulo preenchido com azul especificando fillcolor="blue" e dar a ele um contorno vermelho de 3,5 pontos especificando strokecolor="red" strokeweight="3.5pt", conforme mostrado na seguinte representação VML:

<v:rect style='width:100pt;height:75pt' fillcolor="blue"
strokecolor="red" strokeweight="3.5pt"/>

Para obter mais informações sobre esse elemento, consulte a especificação VML . (Observação: a especificação VML não tem um indicador para o <rect> elemento.)

Voltar ao início

Roundrect

Você pode usar o <roundrect> elemento para desenhar um retângulo com cantos arredondados. Em seguida, você pode personalizar o retângulo arredondado especificando atributos de propriedade diferentes.

Por exemplo, você pode desenhar um retângulo que tenha cantos arredondados 30% da metade da dimensão menor do retângulo especificando arcsize="0,3", preenchê-lo com amarelo especificando fillcolor="yellow" e dar-lhe um contorno vermelho de 2 pontos especificando strokecolor="red" strokeweight="2pt", conforme mostrado na seguinte representação VML:

<v:roundrect style='width:100pt;height:75pt"
arcsize="0.3" fillcolor="yellow"
strokecolor="red" strokeweight="2pt"/>

Para obter mais informações sobre esse elemento, consulte a especificação VML .

Voltar ao início

line

Você pode usar o <line> elemento para criar uma linha reta. Em seguida, você pode personalizar a linha especificando atributos de propriedade diferentes.

Por exemplo, você pode desenhar uma linha horizontal especificando from="20pt,20pt" to="100pt,20pt" e torná-la 2 pontos e vermelho especificando strokecolor="red" strokeweight="2pt", conforme mostrado na seguinte representação VML:

<v:line from="20pt,20pt" to="100pt,20pt" '
strokecolor="red" strokeweight="2pt">

Você pode desenhar uma linha vertical ou diagonal simplesmente especificando valores diferentes para os atributos de propriedade from e to , conforme mostrado na seguinte representação VML:

<v:line from="20pt,20pt" to="20pt,100pt"
strokecolor="red" strokeweight="2pt">

Para obter mais informações sobre esse elemento, consulte a especificação VML .

Voltar ao início

Polilinha

Você pode usar o <polyline> elemento para definir formas criadas a partir de segmentos de linha conectados. Em seguida, você pode personalizar a forma especificando atributos de propriedade diferentes.

Por exemplo, para desenhar a forma mostrada na imagem a seguir, você pode digitar a seguinte representação VML:

<v:polyline points="18pt,54pt,90pt,-9pt,180pt,63pt,261pt,27pt"
strokecolor="red" strokeweight="2pt"/>

Para obter mais informações sobre esse elemento, consulte a especificação VML .

Voltar ao início

curva

Você pode usar o <curve> elemento para desenhar uma curva de bézier cúbica. Em seguida, você pode personalizar a curva especificando atributos de propriedade diferentes.

Por exemplo, para desenhar uma curva conforme mostrado na imagem a seguir, você pode digitar a seguinte representação VML:

<v:curve style='position:relative'
from="0,0" control1="100pt,100pt" control2="200pt,100pt"
to="300pt,0" strokecolor="red" strokeweight="3pt"/>

Para obter mais informações sobre esse elemento, consulte a especificação VML .

Voltar ao início

arco

Você pode usar o <arc> elemento para desenhar um arco definido como um segmento de uma elipse. O arco é definido pela interseção da elipse com os vetores de raio inicial e final fornecidos pelos ângulos. Os ângulos são calculados usando as propriedades de um círculo (largura igual à altura) e, em seguida, dimensionados anisotrópicamente para a largura e altura desejadas.

Por exemplo, você pode desenhar um arco que começa em 0 graus e termina em 90 graus especificando startangle="0" endangle="90", conforme mostrado na seguinte representação VML:

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="90"
strokecolor="red" strokeweight="2pt"/>

Você pode alterar o arco especificando diferentes valores startangle e endangle , conforme mostrado na seguinte representação VML:

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="180"
strokecolor="red" strokeweight="2pt"/>

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="270"
strokecolor="red" strokeweight="2pt"/>

Para obter mais informações sobre esse elemento, consulte a especificação VML .

Voltar ao início

Resumo

Você pode usar elementos predefinidos de VML como <oval>, <line>, <polyline>, <curve>, <rect>, <roundrect>e <arc> para desenhar elementos gráficos facilmente em uma página da Web e personalizar esses elementos gráficos simplesmente alterando seus atributos de propriedade.