Compartilhar via

Usando o elemento Shapetype

  • Artigo

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

Observação

Desde 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 o Centro de Desenvolvedores do Internet Explorer.

 

Neste tópico, ilustraremos como usar o <shapetype> elemento para definir suas próprias formas usadas com frequência e, em seguida, instanciar ou criar formas do tipo de forma.

Se você quisesse desenhar muitas formas que tenham as mesmas propriedades ou propriedades semelhantes, seria entediante se você tivesse que digitar repetidamente os mesmos atributos de propriedade para cada forma. O VML fornece o <shapetype> elemento para que você possa definir um protótipo de uma forma. Em seguida, você pode usar o <shape> elemento para instanciar muitas cópias de formas do mesmo tipo de forma.

Você pode seguir as três etapas para definir um tipo de forma e, em seguida, criar uma instância de uma forma do tipo de forma:

  1. Digite um <shapetype> elemento e dê-lhe um nome especificando o atributo id.
  2. Descreva o tipo de forma usando seus atributos de propriedade ou subconjuntos.
  3. Instancie uma forma digitando um <shape> elemento e consulte o atributo de tipo da forma para o atributo ID do tipo de forma.

Por exemplo, você digita as seguintes linhas para criar um tipo de forma chamado "MyShape":

<v:shapetype id="MyShape" >
</v:shapetype>

Em seguida, você altera o tipo de forma definindo alguns atributos de propriedade, como fillcolor="red" strokecolor="blue". Ou, você pode usar subconjuntos dentro do shapetype, como<path>, , <fill><stroke> (falaremos sobre esses subconjuntos em tópicos posteriores).

<v:shapetype id="MyShape" fillcolor="red" strokecolor="blue"...>
</v:shapetype>

Em seguida, você cria uma instância de uma forma do tipo de forma "MyShape" especificando type="#MyShape", conforme mostrado na representação VML a seguir. Essa forma herda todas as propriedades do tipo de forma "MyShape" e é exibida dentro de sua caixa de contenção com um tamanho de 100 por 80.

<v:shape type="#MyShape" style='width:100;height:80'/>

Você pode criar uma instância de outra forma do tipo de forma "MyShape" especificando e substituindo type="#MyShape" algumas propriedades, como fillcolor="maroon", conforme mostrado na representação VML a seguir. Essa forma herda todas as propriedades do tipo de forma "MyShape", exceto a propriedade fillcolor, e é exibida dentro de sua caixa de contenção com um tamanho de 70 por 90.

<v:shape type="#MyShape" fillcolor="maroon"
style='width:70; height:90'/>

Aqui está a representação VML completa para o exemplo anterior:

type1-1.gif (477 bytes)type1-2.gif (471 bytes)

<body>
<v:shapetype id="MyShape" fillcolor="red" strokecolor="blue" coordsize="21600,21600"
path="m10860,2187c10451,1746,9529,1018,9015,730,7865,152,6685,,5415,,4175,
152,2995,575,1967,1305,1150,2187,575,3222,242,4220,,5410,242,6560,575,7597l10860,
21600,20995,7597c21480,6560,21600,5410,21480,4220,21115,3222,20420,2187,19632,
1305,18575,575,17425,152,16275,,15005,,13735,152,12705,730,12176,1018,11254,1746,
10860,2187xe">
</v:shapetype>
<v:shape type="#MyShape" style='width:100;height:80;'/>
<v:shape type="#MyShape" style='width:70;height:90;' fillcolor="maroon"/>
</body>

Como você aprendeu, quando uma forma é instanciada de um tipo de forma, ela herda todos os atributos de propriedade do shapetype. Você pode substituir alguns ou todos os atributos herdados redefinindo atributos dentro do <shape> elemento. Lembre-se de que a herança é apenas um nível. Isso ocorre porque apenas um <shape> elemento pode referenciar um <shapetype> elemento. Um <shapetype> elemento não pode referenciar outro <shapetype> elemento.

Além disso, um tipo de forma não pertence a nenhum grupo. Portanto, o <shapetype> elemento pode aparecer sozinho ou dentro de um <group> elemento. Você pode ter muitas formas dentro de grupos diferentes que fazem referência ao mesmo tipo de forma. Se um shapetype aparecer dentro de um grupo, uma forma que vive em outro grupo ainda poderá referenciar esse tipo de forma.

Por exemplo, na seguinte representação VML, Rect1 e Rect2 estão em GroupA e Rect3 está no GroupB. Todos os três retângulos são instanciados do tipo de forma MyShape.

<body>
...
<v:shapetype id="MyShape" fillcolor="blue" strokecolor="red"...>
</v:shapetype>

<v:group id="GroupA"...>
<v:shape id="Rect1" type="#MyShape" .../>
<v:shape id="Rect2" type="#MyShape" strokecolor="black".../>
</v:group>

<v:group id="GroupB"...>
<v:shape id="Rect3" type="#MyShape" fillcolor="green".../>
</v:group>
...
</body>

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