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:

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 );
}