WaBis

walter.bislins.ch

JSG Test: Html Text

Test der Text-Ausrichtung und des Padding im TextRendering = 'html'.

Beachte, dass bei Überlauf des Textes am linken und/oder rechten Rand automatisch die Textbreite begrenzt wird. Dadurch wird der Text umgebrochen. Trotzdem muss die Position des Textes rel. zum Bezugspunkt korrekt bleiben. Intern wird daher nach der Begrenzung der Breite die Positionierung für den nun umgebrochenen Text erneut berechnet. Die berechnete Textbox wird als blaues Rechteck gezeichnet. Die gestrichelte Box umschliesst den Text ohne Padding.

JsGraph Ausgabe

Vergleichsbild

so sollte es aussehen:

JSG_Test_Text.png

Code

var graphic = NewGraph2D( { 
  Width: 600, Height: 300, BorderColor: 'black', 
  TextRendering: 'html',
  DrawFunc: DrawGraphic 
} );

function DrawGraphic( g ) {
  var FillAreaMode = 2;

  var txt = '<div style="border:1px dotted gray;">Dies ist ein längerer Text mit Umbruch.<\/div>';
  g.SetWindow( 0, 0, 4, 4 );

  g.SetBgColor( 'rgba(0,0,255,0.2)' );
  g.SetTextAttr( 'Arial', 15, 'black', 'normal', 'normal', 'right', 'top', 6, 10 );

  var box = g.GetTextBox( txt, 1, 1 );
  g.RectWH( box, FillAreaMode );
  g.Text( txt, 1, 1 );

  g.SetTextAlign( 'center', 'top' );
  var box = g.GetTextBox( txt, 2, 1 );
  g.RectWH( box, FillAreaMode );
  g.Text( txt, 2, 1 );

  g.SetTextAlign( 'left', 'top' );
  var box = g.GetTextBox( txt, 3, 1 );
  g.RectWH( box, FillAreaMode );
  g.Text( txt, 3, 1 );

  g.SetTextAlign( 'right', 'middle' );
  var box = g.GetTextBox( txt, 1, 2 );
  g.RectWH( box, FillAreaMode );
  g.Text( txt, 1, 2 );

  g.SetTextAlign( 'center', 'middle' );
  var box = g.GetTextBox( txt, 2, 2 );
  g.RectWH( box, FillAreaMode );
  g.Text( txt, 2, 2 );

  g.SetTextAlign( 'left', 'middle' );
  var box = g.GetTextBox( txt, 3, 2 );
  g.RectWH( box, FillAreaMode );
  g.Text( txt, 3, 2 );

  g.SetTextAlign( 'right', 'bottom' );
  var box = g.GetTextBox( txt, 1, 3 );
  g.RectWH( box, FillAreaMode );
  g.Text( txt, 1, 3 );

  g.SetTextAlign( 'center', 'bottom' );
  var box = g.GetTextBox( txt, 2, 3 );
  g.RectWH( box, FillAreaMode );
  g.Text( txt, 2, 3 );

  g.SetTextAlign( 'left', 'bottom' );
  var box = g.GetTextBox( txt, 3, 3 );
  g.RectWH( box, FillAreaMode );
  g.Text( txt, 3, 3 );

  g.SetMarkerAttr( 'Plus', 12 ); 
  g.SetLineAttr( 'red', 1 );
  g.Marker( 1, 1 );
  g.Marker( 2, 1 );
  g.Marker( 3, 1 );
  g.Marker( 1, 2 );
  g.Marker( 2, 2 );
  g.Marker( 3, 2 );
  g.Marker( 1, 3 );
  g.Marker( 2, 3 );
  g.Marker( 3, 3 );
}

More Page Infos / Sitemap
Created Dienstag, 2. Februar 2016
Scroll to Top of Page
Changed Freitag, 26. Februar 2016