Test des Grafik-Clippings, siehe Funktion SetGraphClipping(). Beachte, dass Kreise erst ab dann geclippt werden, wenn sie den äusseren Clippbereich (extend) überschreiten. Innerhalb dieses Bereiches werden sie allenfalls von den Canvas-Funktionen geclippt. Diese Testseite verwendet negative Extend, um das Clipping sichtbar zu machen. Negative Extend-Werte können für das Debuging verwendet werden.

var Model = {
  Extend: 0
};

function UpdateAll() {
  ControlPanels.Update();
  graph.Redraw();
}

var DrawBorder = 1;
var FillArea   = 2;
var ClosePath  = 4;

var graph = NewGraph2D( { Width: 600, Height: 400, DrawFunc: draw } );

function draw( jsg ) {
  jsg.SelectTrans( 'window' );
  jsg.Grid(50,50);

  jsg.SetGraphClipping( true, 'viewport', Model.Extend );

  jsg.SetAreaAttr( 'yellow', 'red', 2 );
  jsg.OpenPath();
  jsg.MoveTo( 150, 100 );
  jsg.LineTo( 250, 100 );
  jsg.ArcTo( 300, 150, 50 );
  jsg.LineTo( 300, 250 );
  jsg.ArcTo( 250, 300, -50 );
  jsg.Polygon( [210, 250, 200, 150, 190], [300, 325, 350, 325, 300], 8 );
  jsg.LineTo( 150, 300 );
  jsg.ArcTo( 100, 250, 50, true );
  jsg.LineTo( 100, 150 );
  jsg.ArcTo( 150, 100, -50, true );
  jsg.Circle( 200, 200, -50 );
  jsg.Path( 3 );

  jsg.Text( '1', 275, 125 );
  jsg.Text( '2 r<0', 275, 275 );
  jsg.Text( '3 big', 125, 275 );
  jsg.Text( '4 big r<0', 125, 125 );

  jsg.OpenPath();
  jsg.MoveTo( 500, 100 );
  jsg.ArcTo( 500, 200, 50 );
  jsg.LineTo( 400, 200 );
  jsg.ArcTo( 400, 100, 50 );
  jsg.Path( 7 );

  for (var r = 10; r < 100; r+=5) {
    jsg.ArcPt( 400, 300, 500, 300, -r, false );
    jsg.ArcPt( 400, 300, 500, 300, r, true );
  }
}

ControlPanels.NewSliderPanel( { 
  Name: 'SliderPanel1',
  ModelRef: 'Model',
  NCols: 1, 
  ValuePos: 'left',
  OnModelChange: UpdateAll, 
  Format: 'fix0', 
  Digits: 2,
  ReadOnly: true, 
  PanelFormat: 'InputShortWidth'

} ).AddValueSliderField( {
  Name: 'Extend',
  Min: -1,
  Max: 1

} ).Render();