Code

var mat = {
  a: [[1,0,0],[0,1,0]],
  TextAngle: 0,
  PicAngle: 0
};

var graphic = NewGraph2D( {
  Width: '100%', Height: '50%',
  DrawFunc: Draw
} );

function Draw( g ) {
  g.Reset();
  g.SetWindow( -30, -9, 30, 9 );
  g.Frame();
  g.Axes();
  var txt = 'Mm>>mM';

  g.SetTextAlign( align.HAlign, align.VAlign );
  g.SetTextRotation( mat.TextAngle );

  g.TransRotate( mat.PicAngle );
  g.AddTrans( mat.a );

  g.Rect( -2, -2, 2, 2 );
  g.Circle( 0, 0, 4 );

  g.SetTextAttr( 'Arial', 18, 'red', 'normal', 'normal' );
  g.SetTextPadding( 5, 2 );

  g.SetAreaAttr( 'yellow', 'blue', 1 );
  g.SetMarkerAttr( 'Plus', 8 );

  g.TextBox( txt, 4, -2 );
  g.Text( txt, 4, -2 );
  g.Marker( 4, -2 );

  g.TextBox( txt, 6, -4 );
  g.Text( txt, 6, -4 );
  g.Marker( 6, -4 );

  g.TextBox( txt, 4, 2 );
  g.Text( txt, 4, 2 );
  g.Marker( 4, 2 );

  g.TextBox( txt, 6, 4 );
  g.Text( txt, 6, 4 );
  g.Marker( 6, 4 );

  g.TextBox( txt, -4, -2 );
  g.Text( txt, -4, -2 );
  g.Marker( -4, -2 );

  g.TextBox( txt, -4, 2 );
  g.Text( txt, -4, 2 );
  g.Marker( -4, 2 );

  g.TextBox( txt, -6, 4 );
  g.Text( txt, -6, 4 );
  g.Marker( -6, 4 );

  g.TextBox( txt, -6, -4 );
  g.Text( txt, -6, -4 );
  g.Marker( -6, -4 );

  g.SetLineAttr( 'blue', 3 );
  g.SetMarkerSymbol( 'Arrow2' );
  g.Arrow( 0, 0, 6, 0 );
  g.Arrow( 0, 0, 0, 6 );

  g.SetAreaAttr( 'yellow', 'blue', 2 );
  g.SetFontWeight( 'bold' );
  g.SetTextSize( 32 );
  g.Text( txt, 0, 0, 3 );
}

function Update() {
  ControlPanels.Update();
  Draw( graphic );
}

ControlPanels.NewSliderPanel( { 
  ModelRef: 'mat', 
  NCols: 2, 
  OnModelChange: Update, 
  Format: 'fix0', 
  Digits: 2,

} ).AddValueSliderField( { 
  Name: 'a00', 
  ValueRef: 'a[0][0]', 
  Min: -5, Max: 5 

} ).AddValueSliderField( { 
  Name: 'a01', 
  ValueRef: 'a[0][1]', 
  Min: -5, Max: 5 

} ).AddValueSliderField( { 
  Name: 'a10', 
  ValueRef: 'a[1][0]', 
  Min: -5, Max: 5 

} ).AddValueSliderField( { 
  Name: 'a11', 
  ValueRef: 'a[1][1]', 
  Min: -5, Max: 5 

} ).AddValueSliderField( { 
  Name: 'a02', 
  ValueRef: 'a[0][2]', 
  Min: -5, Max: 5 

} ).AddValueSliderField( { 
  Name: 'a12', 
  ValueRef: 'a[1][2]', 
  Min: -5, Max: 5 

} ).AddValueSliderField( { 
  Name: 'PicAngle', 
  Min: -180, Max: 180 

} ).AddValueSliderField( { 
  Name: 'TextAngle', 
  Min: -180, Max: 180 

} ).Render();

var align = {
  HAlign: 'center',
  VAlign: 'middle'
};

ControlPanels.NewPanel( { 
  ModelRef: 'align',
  NCols: 2, 
  OnModelChange: Update,

} ).AddRadiobuttonField( {
  Name: 'HAlign',
  ValueType: 'str',
  Items: [
    { Name: 'left' },
    { Name: 'center' },
    { Name: 'right' }
  ]

} ).AddRadiobuttonField( {
  Name: 'VAlign',
  ValueType: 'str',
  Items: [
    { Name: 'top' },
    { Name: 'middle' },
    { Name: 'bottom' }
  ]

} ).Render();