Beim Darüberstreichen
Wenn Sie als Auslöser die Option Beim Darüberstreichen auswählen, wird die Verhaltensregel dann auf das Shape angewandt, wenn der Benutzer mit gedrückter Maustaste über das Shape fährt oder mit dem Finger darüber streicht. Damit ist es möglich, ein Shape in einen Schieberegler zu verwandeln.
Im Feld Wert können Sie das genaue Verhalten des Schiebereglers mit dem folgenden Format parametrieren:
\(D_1\) und \(D_2\) stellen dabei den Definitionsbereich dar, d.h. den kleinsten und größten möglichen Pixelwert, auf den eine Benutzereingabe reagiert, während \(W_1\) und \(W_2\) den Wertebereich definieren, also den minimalen und maximalen Wert, der beim Darüberstreichen auf das Zielobjekt geschrieben werden soll. \(R\) bestimmt schließlich die Richtung des Schiebereglers, wobei hier nur die Werte 0 (für horizontale Schieberegler) und 1 (für vertikale Schieberegler) gültig sind. Bei horizontalen Schiebereglern können Sie \(R\) auch einfach weglassen, da dies der Standardwert ist.
Beispiel: Schieberegler
Das folgende Beispiel beschreibt die korrekte Konfiguration eines horizontalen Schiebereglers, der 200 Pixel breit ist und die Pixelwerte zwischen 0 und 200 in Werte zwischen 0 und 100 umrechnet, bevor sie auf das Zielobjekt geschrieben werden.
<g>
<rect class="slider-path"
x="0" y="0" width="200" height="20"
fill="#777" stroke="#333" stroke-width="2"></rect>
<path id="MySlideHandler"
d="M-1,3 L11,3 L11,22 L5,28 L-1,22Z"
fill="#179ce3" stroke="black"></path>
</g>
Warnung
Das umschließende <g>-Element ist für die korrekte Funktionsweise des Schiebereglers zwingend notwendig. Das darin enthaltene <rect>-Element fungiert als aktive Fläche, das auf Benutzereingaben reagiert. Dazu muss auf diesem Element unbedingt das Attribut class auf den Wert slider-path gesetzt werden. Das <path>-Element zeigt schließlich den aktuellen Wert des Schiebereglers an. Die ID dieses Elements kann in den Verhaltensregeln verwendet werden, wie in den nachfolgenden Tabellen veranschaulicht wird.
Schieberegler, bestehend aus dem Schaft (Hintergrund) und dem eigentlichen Schieberegler (blauer Pfeil).
Verhaltensregel 1
Die folgende Verhaltensregel reagiert auf die Benutzereingabe und setzt automatisch den Livewert des Datenpunkts abhängig der aktuellen Position des Mauszeigers.
Verhalten |
|
|---|---|
Auslöser |
Beim Darüberstreichen |
Aktion |
|
|---|---|
Aktionstyp |
Datenpunkt-Eigenschaft setzen |
Element |
MySlideHandler |
Eigenschaft |
<LiveValue> |
Wert |
0:200:0:100 |
Verhaltensregel 2
Die folgende Verhaltensregel verschiebt den Kopf des Schiebereglers an die korrekte Position, die durch den aktuellen Livewert des Datenpunkts bestimmt wird.
Verhalten |
|
|---|---|
Auslöser |
Datenpunkt-Eigenschaft |
Eigenschaft |
<LiveValue> |
Bedingung |
|
|---|---|
Funktion |
Immer |
Aktion |
|
|---|---|
Aktionstyp |
Verschiebung X |
Element |
MySlideHandler |
Wert |
0:2:100 |
Bitte lesen Sie auch die weiterführenden Informationen unter Beim Anklicken.