Code

#INCLUDE JsGraph.inc
#INCLUDE ControlPanel.inc

<jscript>

function BezierModel() {
  this.Trans = 'window';
  this.InRect = false;
  this.InPath = false;
  this.Append = false;
  this.Close = false;
  this.Stroke = true;
  this.Fill = false;
  this.Invert = false;
  this.Width = 4;
  this.Cap = 'but';
  this.Sx = 200;
  this.Sy = 300;
  this.Ex = 400;
  this.Ey = 300;
  this.Cx1 = 200;
  this.Cy1 = 100;
  this.Cx2 = 400;
  this.Cy2 = 100;
}

var model = new BezierModel();

var jsg = NewGraph2D( { Width: 602, Height: 403, DrawFunc: Draw, AutoReset: false } );

function Draw( g ) {
  g.Reset();
  g.SetLineCap( model.Cap );
  g.SetWindowWH( 0, 0, g.VpInnerWidth, g.VpInnerHeight );
  g.SelectTrans( model.Trans );

  g.SetAreaAttr( 'orange', 'blue', model.Width );
  var mode = 0;
  if (model.Stroke) mode += 1;
  if (model.Fill) mode += 2;
  if (model.Close) mode += 4;
  if (model.Append) mode += 8;
  if (model.InPath) {
    g.OpenPath();
  }
  if (model.InRect) g.Rect( 50, 50, 550, 350 );
  if (model.Invert) {
    g.BezierCurve( model.Ex, model.Ey, model.Cx2, model.Cy2, model.Cx1, model.Cy1, model.Sx, model.Sy, mode );
  } else {
    g.BezierCurve( model.Sx, model.Sy, model.Cx1, model.Cy1, model.Cx2, model.Cy2, model.Ex, model.Ey, mode );
  }
  if (model.InPath) {
    g.Path( mode );
  }
  g.Polygon( [ 0, 0, 10 ], [ 10, 0, 0 ] );

  g.SetLineAttr( 'gray', 0 );
  g.Line( model.Sx, model.Sy, model.Cx1, model.Cy1 );
  g.Line( model.Ex, model.Ey, model.Cx2, model.Cy2 );
  g.Marker( model.Cx1, model.Cy1 );
  g.Marker( model.Cx2, model.Cy2 );

}

function Update() {
  panel1.Update();
  panel2.Update();
  Draw( jsg );
}

</jscript>

{{col|50}}

<jscript>

var panel1 = ControlPanels.NewSliderPanel( { ModelRef: 'model', OnModelChange: Update } );

panel1.AddValueSliderField( { Name: 'Width', Min: 0, Max: 20, Digits: 1 } );
panel1.AddValueSliderField( { Name: 'Cx1', Min: 0, Max: 600, Digits: 0 } );
panel1.AddValueSliderField( { Name: 'Cy1', Min: 0, Max: 400, Digits: 0 } );
panel1.AddValueSliderField( { Name: 'Cx2', Min: 0, Max: 600, Digits: 0 } );
panel1.AddValueSliderField( { Name: 'Cy2', Min: 0, Max: 400, Digits: 0 } );

panel1.Render();

</jscript>

{{col}}

<jscript>

var panel2 = ControlPanels.NewPanel( { ModelRef: 'model', OnModelChange: Update } );

panel2.AddRadiobuttonField( {
  Name: 'Trans', 
  Items: [ 
    { Name: 'window' }, 
    { Name: 'viewport' },
    { Name: 'canvas' }
  ]
});

panel2.AddRadiobuttonField( {
  Name: 'Cap',
  Items: [
    { Name: 'but' },
    { Name: 'round' },
    { Name: 'square' }
  ]
} );

panel2.AddCheckboxField( {
  Name: 'Mode',
  Items: [
    { Name: 'Stroke' },
    { Name: 'Fill' },
    { Name: 'Close' },
    { Name: 'Append' }
  ]
} );

panel2.AddCheckboxField( {
  Name: 'Path',
  Items: [
    { Name: 'InRect' },
    { Name: 'InPath' },
    { Name: 'Invert' }
  ]
} );

panel2.AddHtmlField( { Label: '-', Html: ControlPanels.SmallButton( 'Redraw', 'Update()' ) } );

panel2.Render();

</jscript>

{{col|end}}