Panorado FOV - Blickwinkel-Anzeigeelement
- eine Erweiterung für Panorado JS
Was ist das?
Panorado FOV ist ein sehr einfaches, in JavaScript geschriebenes visuelles Element
(field of view bzw. FOV heißt Blickwinkel).
Die Darstellung repräsentiert einen horizontalen Blickwinkel (FOV) in Form eines Kreissegments vor einem Hintergrundbild.
Die Richtung und die Breite des FOV sind variabel, d. h. programmierbar.
Das Hintergrundbild kann z. B. eine Kompassrose, ein Lageplan oder ein Grundriss sein.
Das Element soll in erster Linie die Visualisierung des Panorado JS-Viewers
unterstützen, ist aber nicht von diesem abhängig.
Sie können die unkomprimierte JavaScript-Datei downloaden;
die Verwendung ist kostenlos.
Die Integration in Ihre HTML-Seite erfordert folgende Schritte:
- Platzieren Sie ein
<canvas>-Element mit einer eindeutigen id
als Platzhalter innerhalb des <body>-Elements.
- Schreiben Sie eine Referenz auf die JS-Datei in Ihren Seiten-Header:
<script src="js/PanoradoFOV.js"></script>
- Schreiben Sie eine JavaScript-Funktion, die nach dem Laden der Seite (
window.onload) ausgeführt wird.
Diese
- initialisiert den Viewer (siehe Panorado JS-Referenz).
- definiert eine viewer.onImageMove-Funktion, welche für das Update der FOV-Anzeige sorgt.
- initialisiert das PanoradoFOV-Objekt und setzt ein paar seiner Eigenschaften, wie z. B. die URL des Hintergrundbildes.
Empfehlenswert ist ein Blick auf die Demo-Seite und den dazugehörigen Quellcode.
Klasse PanoradoFOV
PanoradoFOV ist eine gewöhnliche JavaScript-Klasse, mit einem Konstruktor und ein paar Eigenschaften.
Der Konstruktor erhält ein canvas-Element als Parameter:
fov = new PanoradoFOV(document.querySelector("#fov"));
PanoradoFOV
Eigenschaften
Ein PanoradoFOV-Objekt hat folgende Eigenschaften (alle Winkel in Grad):
version |
[get; String] Die Versionsnummer des Scripts. |
bkImage |
[set, get; String] Die URL des Hintergrundbildes.
Das Bild wird immer auf die volle Größe des canvas-Elements gestreckt. |
ctx |
[get; Object] Das Display Context-Objekt des canvas-Elements.
Sie können einige visuelle Eigenschaften des Objekts setzen (s. u.). |
xCenter |
[set, get; Num] Der Abstand zwischen dem linken Rand des canvas-Elements und dem Mittelpunkt des FOV-Kreisausschnitts,
bezogen auf die Breite des canvas-Elements (0..1; Default: 0.5). |
yCenter |
[set, get; Num] Der Abstand zwischen dem oberen Rand des canvas-Elements und dem Mittelpunkt des FOV-Kreisausschnitts,
bezogen auf die Höhe des canvas-Elements (0..1; Default: 0.5). |
radius |
[set, get; Num] Der Radius des FOV-Kreisausschnitts (20..x; Pixel).
Falls nicht gesetzt, erstreckt sich die FOV-Fläche bis zum Rand des canvas-Elements. |
pan |
[set, get; Num] Die zentrale Himmelsrichtung des FOV-Kreisausschnitts (0..360; in Grad).
0 is oben/Norden.
Änderungen werden normalerweise durch Ereignisse anderer Elemente ausgelöst,
wie z. B. die Bewegung eines Viewers. |
fov |
[set, get; Num] Die Breite des FOV-Kreisausschnitts (1..120; in Grad).
Änderungen werden normalerweise durch Ereignisse anderer Elemente ausgelöst,
wie z. B. die Bewegung eines Viewers. |
PanoradoFOV.ctx
Eigenschaften
Der Display Context eines PanoradoFOV-Objekts hat u. a. folgende Eigenschaften:
globalAlpha |
[set, get; Num] Die Deckkraft des FOV-Kreisausschnitts oberhalb des Hintergrunds (0..1).
Beachten Sie, dass das die Darstellung des Hintergrunds selbst nicht beeinflusst!
Mit den opacity- und background-color-Styles des canvas-Elements
können Sie die Darstellung des ganzen Elements bestimmen. |
lineWidth |
[set, get; Num] Die Randbreite des FOV-Kreisausschnitts (Pixel). |
strokeStyle |
[set, get; String] Die Randfarbe des FOV-Kreisausschnitts
(in CSS-Notation, z. B. '#fff'). |
fillStyle |
[set, get; String] Die Füllfarbe des FOV-Kreisausschnitts
(in CSS-Notation, z. B. '#fff'). |
