Komplexe Graphiken

Punkte als komplexe Graphiken

Punkte werden im CSS mittels der Eigenschaft complex-graphics definiert. Diese komplexe Graphik kann verschiedenste Typen beinhalten: arc, circle, line, path, pixmap, polygon, polyline, text. Diese Blocktypen können für die Punkterstellung genutzt und auch kombiniert werden.

Beispiel: Soll das Symbol eines Punktes aus einer Schriftart kommen, so ist der Blocktyp text zu nutzen:

point {
 complex-graphics: 
	text{
		text:53; /* als dezimaler Wert*/
		/* text: 0x35; /*als hexadezimaler Wert */
		text-color: green;
		text-font-name: "Webdings";
		text-height: 40px;
   };			
}

Der Wert 53 ist der dezimale Wert aus der Schriftart Webdings für das Zeichen. Ebenso kann auch der hexadezimale Wert notiert werden. Um die Werte zu ermitteln, kann die Zeichentabelle genutzt werden.

Sollen in einem Punktsymbol mehrere Blöcke gezeichnet werden, so sind diese hintereinander zu notieren und durch Komma zu trennen:

point {
 complex-graphics:
     circle {
         line-width: 2px;
         line-color: black;			
         radius: 50m;
         min-radius: 8;
         max-radius: 15;
         fill-color: white;
         fill-pattern: solid;
     },
     text {		
         /*Spalte, wo die Nummer her kommt*/
         text: [nummer];    
         text-font-name: "arial";
         text-height: 10px;	
     };	
}

Weitere Beispiele für die Definition von Punkten finden Sie hier.

Flächen mit komplexen Mustern

Polygone können mittels der Eigenschaft complex-fill-pattern mit den verschiedensten Mustern erstellt werden. Für dieses komplexe Muster sind einige Parameter zu notieren. Die Eigenschaft fill-pattern muss mit dem Wert complex belegt werden.

• fill-pattern: complex;

Die BoundingBox gibt die Breite und Höhe des komplexen Füllmusters in m an. Hierbei handelt es sich um eine virtuelle Box. Wir empfehlen, wenn möglich, diese quadratisch zu definieren:

• complex-fill-pattern-bbox-width: 100;
• complex-fill-pattern-bbox-height: 100;

Weiterhin wird die Größe des Füllmusters in der Karte definiert. Diese Angabe kann in Pixel oder m erfolgen. Beachten Sie bitte, dass das Verhältnis zwischen virtueller Box und Ausgabegröße gleich sein sollte.

• complex-fill-pattern-width:100m;
• complex-fill-pattern-height:100m;

Definieren Sie diese Parameter in m, so kann zusätzlich die min und max Angabe dieser Eigenschaft notiert werden.

• complex-fill-patter-min-width: 10;
• complex-fill-patter-max-width: 30;
• complex-fill-patter-min-height: 10;
• complex-fill-patter-max-heigth: 30;

Das komplexe Muster wird dann in dieser virtuellen Box angeordnet.

Für diesen Punkt muss die Position in m definiert werden.

polygon::gepunktet {					
	fill-pattern: complex;
	/*Breite des komplexen Füllmusters in m*/
	complex-fill-pattern-bbox-width: 100;
	complex-fill-pattern-bbox-height: 100;
	/*Breite des komplexen Füllmusters in der Karte*/
	complex-fill-pattern-width: 100m;
	/*Mindestbreite des Musters in der Karte in Pixel*/
	complex-fill-pattern-min-width: 10;
	complex-fill-pattern-max-width: 30;
	complex-fill-pattern-height: 100m;
	complex-fill-pattern-min-height: 10;
	complex-fill-pattern-max-height: 30;
	complex-fill-pattern:
	 circle: {
		line-width: 2px;
		line-color: red;
		position-x: 50m;
		position-y: 50m;
		radius: 10m;
		fill-pattern: solid;
		fill-color: red;
	 };
	 border-line: {
		line-width: 2px;
		line-color: red;
		line-join: round;
	 };	
}
     

Komplexe Muster mittels Path Angaben

Komplexe Muster können auch mittels Path Angaben erstellt werden. Dazu muss ein entsprechendes path-commands erstellt werden. Dazu finden Sie im Internet Beschreibungen und auch Programme, um diesen Path zu erstellen.

• https://www.w3schools.com/graphics/svg_path.asp

• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths