Verwenden des lokalen Koordinatenraums

In diesem Thema wird VML beschrieben, ein Feature, das ab Windows Internet Explorer 9 als veraltet gilt. Webseiten und Anwendungen, die auf VML basieren, sollten zu SVG oder anderen allgemein unterstützten Standards migriert werden.

Hinweis

Seit Dezember 2011 wurde dieses Thema archiviert. Daher wird sie nicht mehr aktiv verwaltet. Weitere Informationen finden Sie unter Archivierter Inhalt. Informationen, Empfehlungen und Anleitungen zur aktuellen Version von Windows Internet Explorer finden Sie unter Internet Explorer Developer Center.

Wie Sie gelernt haben, können Sie die Breiten- und Höhenformatattribute angeben, um die Größe eines enthaltenden Felds zu definieren, in dem der Inhalt einer Form oder Gruppe gerendert wird. In diesem Thema wird erläutert, was lokaler Koordinatenraum ist und wie er in VML zum Skalieren von Formen verwendet wird.

Wenn Sie aufgefordert würden, ein 1-Zoll-by-Two-Inch-Rechteck auf einem Datenblatt zu zeichnen, würden Sie zunächst herausfinden, wo Sie beginnen sollten (der Ursprungspunkt). Anschließend würden Sie herausfinden, wie Sie den Zellen des Rasterdokuments (der Koordinate) einen Zoll zuordnen.

Wenn der Inhalt einer Form oder Gruppe innerhalb des enthaltenden Felds auf einer Webseite gerendert wird, müssen auch der Ursprungspunkt und die Koordinate definiert werden. VML stellt einen lokalen Koordinatenbereich bereit, damit jede Form oder Gruppe ihren eigenen Ursprungspunkt und jede Koordinate definieren kann. Wenn Sie keinen Koordinatenbereich angeben, wird der Standardraum verwendet. Standardmäßig beginnt der Ursprung in der oberen linken Ecke des enthaltenden Felds.

Die unten gezeigte VML-Darstellung für das rote Oval gibt beispielsweise nicht die Eigenschaftenattribute coordsize und coordorigin an. Daher wird ein lokaler Standardkoordinatenraum verwendet. Die Größe des Ovals beträgt 100 Punkte (Breite) um 75 Punkte (Höhe). Sie können die Größe des Ovals ändern, indem Sie eine andere Breite oder Höhe angeben, wie Sie im Thema Skalieren von Formen gelernt haben.

oval1.gif (627 Bytes)

<v:oval style='width:100pt;height:75pt' fillcolor="red">
</v:oval>

Wenn die Form komplizierter wird oder Sie mehrere Formen gruppieren und zusammen skalieren möchten, sollten Sie das feature Lokaler Koordinatenraum verwenden, das in VML bereitgestellt wird.

Für jede Form oder Gruppe können Sie die Eigenschaftenattribute coordsize und coordorigin verwenden, um den lokalen Koordinatenraum der Form oder Gruppe zu definieren. Das Attribut coordsize gibt die Anzahl der Einheiten entlang der Breite und höhe des enthaltenden Felds an. Das coordorigin-Attribut definiert die Koordinate in der oberen linken Ecke des enthaltenden Felds. Alle positionsbezogenen Informationen (z. B. Breite, Höhe, links, oben, Pfad usw.) werden als Einheit im lokalen Koordinatenbereich ausgedrückt.

Wie in der folgenden VML-Darstellung gezeigt, definiert beispielsweise width: 100pt; height: 100pt; die Größe des enthaltenden Felds für die Form auf 100 Punkte x 100 Punkte.

cord1.gif (836 Bytes)

<v:shape style='position:relative;left:10pt;top:5pt; width:100pt; height:100pt;'
coordsize="21600,21600" path="m10800,0l0,10800,10800,21600,21600,10800xe"
fillcolor="red" strokecolor="blue" strokeweight="2pt">
</v:shape>
  • coordsize="21600,21600" definiert die Größe des lokalen Koordinatenraums für die Form auf 21.600 Einheiten und 21.600 Einheiten. Daher entspricht eine Einheit im lokalen Koordinatenbereich dem Punkt 1/216.
  • path="m10800,0l0,10800,10800,21600,21600,10800xe" definiert den Umriss der Form als Rautenform. Wie wir gelernt haben, werden alle positionsbezogenen Informationen (z. B. Breite, Höhe, links, oben, Pfad usw.) in Form der Einheit im lokalen Koordinatenraum ausgedrückt. Daher bedeutet 10800 in der <path> 10800 Einheiten, was 50 Punkten entspricht.

Wenn Sie die Größe dieser Rautenform ändern möchten, geben Sie einfach eine andere Breite oder Höhe an. Sie müssen keinen Wert in <path> ändern. Wenn Sie für diese komplizierte Form nicht das Feature Lokaler Koordinatenbereich verwendet haben, müssen Sie jeden Wert in <path> ändern, wenn Sie die Größe ändern möchten.

Beispielsweise können Sie die Rautenform skalieren, indem Sie einfach eine andere Breite oder Höhe angeben, wie in der folgenden VML-Darstellung gezeigt:

cord2.gif (1692 Bytes)

<v:shape style='position:relative;left:10pt;top:5pt;width:200pt; height:200pt;'
coordsize="21600,21600" path="m10800,0l0,10800,10800,21600,21600,10800xe"
fillcolor="red" strokecolor="blue" strokeweight="2pt">
</v:shape>

Sie können auch den lokalen Koordinatenraum im <group> -Element verwenden, damit der Inhalt aller Formen innerhalb der Gruppe entsprechend derselben Koordinate skaliert wird. Wenn Sie dann eine Gruppe von Formen skalieren oder verschieben möchten, ändern Sie einfach die Breite und Höhe oder die Einstellungen für Coordsize und Coordorigin der Gruppe.

Beispielsweise definiert in der folgenden VML-Darstellung <v:group style='... width:200pt;height:200pt;'> die Größe des enthaltenden Felds für die Gruppe auf 200 Punkte und 200 Punkte.

cord3.gif (645 Bytes)

<v:group style='position:relative;left:1pt;top:2pt;width:200pt; height:200pt;'
coordsize="1000,1000" coordorigin="-500,-500">
<v:oval style='position:relative;left:0;top:0;width:400;height:300;' fillcolor="red" />
<v:roundrect style='position:relative;left:0;top:0;width:250;height:200;' fillcolor="green" />
</v:group>
  • coordsize="1000,1000" definiert die Größe des lokalen Koordinatenbereichs für die Gruppe auf 1.000 Einheiten und 1.000 Einheiten. Daher entspricht 1 Einheit im lokalen Koordinatenbereich 1/5 Punkt.
  • coordorigin="-500,-500" definiert die obere linke Ecke des enthaltenden Felds als "-500, -500". Daher liegt das Koordinatensystem innerhalb des enthaltenden Felds zwischen -500 und 500 entlang der x-Achse und -500 bis 500 entlang der y-Achse. Anders ausgedrückt: Die Mitte des enthaltenden Felds ist "0, 0".
  • <v:oval style='... width:400;height:300;'> definiert die Größe des enthaltenden Felds für das rote Oval auf 400 Einheiten (Breite) bis 300 Einheiten (Höhe). Da eine Einheit im lokalen Koordinatenbereich 1/5 Punkt entspricht, beträgt die Größe des enthaltenden Felds für das rote Oval 80 Punkte (Breite) um 60 Punkte (Höhe).

Ebenso beträgt die Größe des enthaltenden Felds für die grüne Rundung 50 Punkte (Breite) um 40 Punkte (Höhe).

Wenn Sie sowohl die Größe des roten Ovals als auch des grünen Rundungszeichens ändern möchten, ändern Sie einfach <v:group style='... width:200pt;height:200pt;'> . Das war's. Sie müssen die Größe der beiden Formen nicht einzeln ändern.

Wenn Sie z. B. in ändern, <v:group style='... width:200pt;height:200pt;'> <v:group style='... width:300pt;height:300pt;'> werden die Formen größer, wie in der folgenden Abbildung dargestellt:

cord4.gif (943 Bytes)

Sie würden auch feststellen, dass sich die Formen unterschiedlich befinden. Dies liegt daran, dass die Formen aus "0, 0" gezeichnet werden, das sich in der Mitte des enthaltenden Felds befindet. Da Sie die enthaltende Box vergrößern, wird auch die Mitte des enthaltenden Felds verschoben.

Wenn Sie coordorigin="-500,-500" in coordorigin="0,0" ändern, wie in der folgenden Abbildung dargestellt, werden Sie feststellen, dass das rote Oval und die grüne Rundung an die neue Position verschoben werden. Dies liegt daran, dass "0, 0" jetzt in der oberen linken Ecke des enthaltenden Felds gesucht wird.

cord5.gif (648 Byte)

Es ist auch wichtig zu beachten, dass das enthaltende Feld keinen Ausschneidebereich festlegt. Grafiken können außerhalb der Grenzen des enthaltenden Felds gezeichnet werden. Das enthaltende Feld dient lediglich dazu, den lokalen Koordinatenbereich dem Seitenbereich zuzuordnen.

Weitere Informationen zu diesem Element finden Sie in der VML-Spezifikation.