WaBis

walter.bislins.ch

JSG Test: Clipping

Clippen an beliebigen Formen. In diesem Beispiel wird ein Clipping-Bereich gesetzt, der aus Kreis und zwei Ellipsen besteht, die sich gegenseitig überlagern. Die weisse Fläche ist der Bereich ausserhalb des Clipping-Bereiches. Als Figur innerhalb des Clipping-Bereiches wird die Grafik von JSG Test: Path verwendet, welche jedoch auf hellblauem Hintergrund gezeichnet wird.

JsGraph Ausgabe

Vergleichsbild

so sollte es aussehen:

JSG_Test_Clipping.png

Code

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

var jsg = NewGraph2D( { Width: 600, Height: 400, BorderColor: 'black', DrawFunc: Draw } );

function Draw( jsg ) {

  jsg.OpenPath();
  jsg.Circle( 300, 200, -185 );
  jsg.Ellipse( 300, 200, 240, 80, 45+5 );
  jsg.Ellipse( 300, 200, 240, 80, -45+5 );
  jsg.Clip();

  jsg.SetBgColor( '#aaf' )
  jsg.Frame( FillArea )

  jsg.SetAreaAttr( 'green', 'red', 4 );
  jsg.OpenPath();
  jsg.MoveTo( 100, 100 );
  jsg.LineTo( 500, 100 );
  jsg.LineTo( 300, 200 );
  jsg.Path( DrawBorder + FillArea + ClosePath );

  jsg.SetAreaAttr( 'yellow', 'blue', 2 );
  jsg.SetAlpha( 0.8 );
  jsg.OpenPath();
  jsg.Circle( 300, 200, -180 );
  jsg.Ellipse( 300, 200, 240, 80, 45 );
  jsg.Ellipse( 300, 200, 240, 80, -45 );
  jsg.Path( DrawBorder + FillArea );
}

Weitere Infos zur Seite
Erzeugt Donnerstag, 29. Januar 2015
von wabis
Zum Seitenanfang
Geändert Dienstag, 2. Februar 2016
von wabis