Skalierung
Mit der Skalierungsanimation können Sie Elemente in Ihrem Shape abhängig vom Wert eines Datenpunkts skalieren.
Als Ursprung der Skalierung dient die linke obere Ecke des betroffenen Elements. Um mehrere Elemente gemeinsam zu skalieren, umschließen Sie diese mit einem <g>-Element. Verwenden Sie allenfalls eine Verschiebungstransformation, um den Ursprung zu verschieben (siehe Verschiebung).
Im Feld Wert können Sie die Skalierung gemäss dem folgenden Format parametrieren:
\(D_1\) und \(D_2\) stellen dabei den Definitionsbereich dar, d.h. den kleinsten und größten möglichen Wert, den der Datenpunkt annehmen kann, während \(W_1\) und \(W_2\) den Wertebereich definieren, also der minimale und maximale Skalierungsfaktor. Ein Skalierungsfaktor von 1 entspricht dabei der Einheitstransformation.
Als mögliche Aktionen stehen Ihnen sowohl eine horizontale Skalierung (Skalierung X) als auch eine vertikale Skalierung (Skalierung Y) zur Verfügung. Verwenden Sie zwei separate Aktionen, um beide Skalierungsrichtungen miteinander zu kombinieren.
Beispiel
Im folgenden Beispiel skaliert das rote Rechteck mit dem weißen Pfeil vom rechten Rand aus dermassen, dass es beim Erreichen des Messwerts 100 das äußere, graue Rechteck horizontal vollständig überdeckt.
Als Aktionstyp wurde Skalierung X ausgewählt, und im Feld Wert wurde [0,100],[0,2] eingegeben.
Dies bedeutet, dass der Skalierungsfaktor bei einem Messwert von 0 ebenfalls 0 beträgt, d.h. das Element wird auf 0 Pixel zusammengestaucht. Bei einem Messwert von 100 beträgt der Skalierungsfaktor 2, d.h. das Element wird auf seine doppelte Größe gestreckt. Dementsprechend wird das Element bei einem Messwert von 20 mit dem Faktor 0.4 skaliert.
<rect x="0" y="0" fill="whitesmoke" stroke="darkgray" width="100" height="100" />
<g id="Target" transform="translate(25,50)">
<g transform="translate(-25,-25)">
<rect fill="red" stroke="crimson" width="50" height="50" />
<polygon points="10,10 40,25 10,40" fill="white" />
</g>
</g>
|
Messwert: 33 → Skalierungsfaktor: 0.66 |
|
Messwert: 100 → Skalierungsfaktor: 2 |
Simulator
Sobald Sie den Simulator mit Simulator starten aktiviert haben, können Sie die Skalierungsanimation testen, indem Sie in der Spalte Testwert einen beliebigen Wert innerhalb des Definitionsbereichs eingeben.