WaBis

walter.bislins.ch

JSG Test: Canvas Text

Test der Text-Ausrichtung TextHAlign/TextVAlign und Padding TextHPad/TextVPad bei Verwendung des TextRendering = 'canvas'.

JsGraph Ausgabe

Vergleichsbild

so sollte es aussehen:

JSG_Test_Text.png

Code

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

var FillArea = 2;

function DrawGraphic( g ) {

  var txt = 'Hello World';
  g.SetWindow( 0, 0, 4, 4 );

  g.SetBgColor( 'rgba(0,0,255,0.2)' );
  g.SetTextAttr( 'Arial', 25, 'black', 'normal', 'normal', 'right', 'top', 5, 3 );

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

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

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

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

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

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

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

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

  g.SetTextAlign( 'left', 'bottom' );
  var box = g.GetTextBox( txt, 3, 3 );
  g.RectWH( box, FillArea );
  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 Sonntag, 1. November 2015
Scroll to Top of Page
Changed Donnerstag, 25. Februar 2016