Anpassen des FramedCloud.js
| Einleitung | Software-Sammlung | FramedCloud-Popups | Grafikdatei | FramedCloud.js | Kompilieren |
In diesem Abschnitt wird erklärt, was im FramedCloud-Script steht und wo man welche entscheidenden Änderungen vornehmen kann.
Die Werte für Höhe, Breite und Positionen in jedem DecorationDiv sind so gewählt, dass die entsprechende runde Ecke (in DecorationDiv_4 die Nase) an die richtige Stelle im Popup gerückt wird. Diese Werte sind im OpenLayers-Script FramedCloud.js (in ol2-master\lib\OpenLayers\Popup\) eingetragen.
Wichtig für Änderungen sind zu Beginn des FramedCloud-Scripts die Zeile 46
46 imageSize: new OpenLayers.Size(1276,736 neu 1383),
in der die Größe der Grafik cloud-popup-relative.png angegeben ist und am Ende des Scripts (Zeile 202) die maximale Popup-Größe.
202 maxSize: new OpenLayers.Size(1200,660 neu 1200),
Da ein Popup links und rechts, über und unter dem Ortspunkt eingeblendet werden kann, muss es auch vier Positionen geben, die allesamt unterschiedliche Werte aufweisen. Den meisten Raum im Script nimmt deshalb die Eigenschaft positionBlocks in Anspruch. Sie gelten für die Positionen, die das Popup relativ zum Ortspunkt einnehmen kann: oben links (tl), oben rechts (tr), unten links (bl) und unten rechts (br).
Jede Position besitzt drei Parameter, nämlich
offset: horizontaler und vertikaler Versatz der Nasenspitze zum Ortspunkt
padding: innerer Abstand des Popups zum Content (links, unten, rechts, oben). Um Platz zu sparen, kann man das Padding etwas verringern.
blocks: Für jede Position ist jedes Decoration-Div mit einem Satz (size, anchor und position) von Abmessungen beziehungsweise Abständen vertreten. Exemplarisch werfen wir einen Blick auf die Position "tr" rechts über dem Ortspunkt.
size (w,h): Abmessungen der DecorationDivs. Bei Div_0 (oben links) sind Breite und Höhe maximal (im Rahmen des Popups). Div_1 oben rechts ist 22px breit und maximal hoch. Unten links befindet sich Div_2 mit einer Höhe von 19px und maximaler Breite. Für die untere rechte Ecke (Div_3) werden 22x19 px reserviert, für den Stem 81x35 px.
anchor (left, bottom, right, top): Spielt in diesem Zusammenhang keine Rolle...
position (x,y): Size bestimmt nur die Größe der Divs, nicht aber die Position der Grafik innerhalb des Divs. Ohne weiteres Zutun (x=y=0) befindet sich immer die linke obere Ecke der Grafik links oben im Div. Die Grafik wird durch die Positionswerte so in den Divs verschoben, dass die relevante runde Ecke im oben links im Div liegt.
Die Angabe (0,0) bedeutet also, dass die Grafik gegenüber dem Div_0 nicht verschoben wird. Die obere linke runde Ecke der Grafik liegt genau im linken oberen Eck des Div_0. Die Koordinate (-1238,0) bedeutet, dass die Grafik im Div_1 um 1238 Pixel nach links verschoben wird. Damit befindet sich die rechte obere Ecke der Grafik im DecorationDiv_1 oben. Bei den beiden unteren Divs_2 und _3 wird die Grafik entsprechend nach oben verschoben.
Die vertikale Position 1238px ergibt sich aus der Bildbreite von 1276px minus der Breite des transparenten Streifens rechts (16px) und minus der Breite einer runden Ecke (Radius = 20px). Bei der Höhe von 631px ist es ähnlich, aber der transparente Streifen unten mit den Stems ist 86px hoch. Die runden Ecke á 20px muss ebenfalls von der Bildhöhe von 736px abgezogen werden: 736-20-86=631. Stimmt alles nicht so richtig? Richtig! In den Scripts sind die Pixelangaben nicht 100%ig korrekt.
Die Positionswerte für DecorationDiv_0...3 sind bei allen vier Blöcken gleich, unterscheiden sich aber bei den Nasen. Im Bild sind die Bezugspunkte für die vier Nasen eingezeichnet, die in den linken oberen Ecken der jeweiligen Div_4 liegen sollen. Aus dem vertikalen Abstand des Punktes zur Nasenspitze ergibt sich so auch der X-Offset unter size.
Nun sollte es kein Problem bereiten, für eine beliebig große Grafik die Werte zu ermitteln und in das Script einzutragen. Ich habe die weiße Fläche der „cloud-popup-relative.png“ auf meiner Webseite quadratisch gestaltet (die Breite bleibt dabei gleich), um gleichermaßen Portrait- wie Landscape-Fotos im Format 800x800 px ohne Scrollbalken darstellen zu können. Die komplette Grafik samt Nasenstreifen besitzt die Abmessungen 1276x1383 px. Die horizontalen Werte bleiben in FramedCloud.js natürlich gleich, die vertikalen rücken um 1383-736=647px nach unten. Zu den vertikalen Positionswerten (außer natürlich denen für Div_0 und Div_1) muss also -647px addiert werden. So einfach geht das!
