Code

<jscript>

function ArcModel() {
  this.Polygon = false;
  this.Segments = 8;
  this.Trans = 'window';
  this.YZoom = 1;
  this.InRect = false;
  this.InPath = false;
  this.Append = false;
  this.Close = false;
  this.RadiusX = 100;
  this.RadiusY = 50;
  this.Start = 0;
  this.End = 270;
  this.Rot = 30;
  this.Stroke = true;
  this.Fill = false;
  this.Width = 4;
  this.Cap = 'but';
}

var model = new ArcModel();

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

function Draw( g ) {
  g.Reset();
  g.DisableNativeArc = model.Polygon;
  g.MaxCurveSegments = model.Segments;
  g.SetLineCap( model.Cap );
  g.SetWindowWH( 0, 0, g.VpInnerWidth, g.VpInnerHeight/model.YZoom );
  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 );
  g.EllipseArc( 300, 200, model.RadiusX, model.RadiusY, model.Rot, model.Start, model.End, mode );
  if (model.InPath) {
    g.Path( mode );
  }
  g.Polygon( [ 0, 0, 10 ], [ 10, 0, 0 ] );
}

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

</jscript>

{{col|50}}

<jscript>

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

panel1.AddValueSliderField( { Name: 'RadiusX', Min: -300, Max: 300, Digits: 0 } );
panel1.AddValueSliderField( { Name: 'RadiusY', Min: -300, Max: 300, Digits: 0 } );
panel1.AddValueSliderField( { Name: 'Rot', Min: -450, Max: 450, Digits: 0 } );
panel1.AddValueSliderField( { Name: 'Start', Min: -750, Max: 750, Digits: 0 } );
panel1.AddValueSliderField( { Name: 'End', Min: -750, Max: 750, Digits: 0 } );
panel1.AddValueSliderField( { Name: 'YZoom', Min: 0.95, Max: 1.05, Digits: 3 } );
panel1.AddValueSliderField( { Name: 'Width', Min: 0, Max: 20, Digits: 1 } );

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.AddRadiobuttonField( {
  Name: 'Segments',
  ValueType: 'int',
  Items: [
    { Name: '8', Value: '8' },
    { Name: '64', Value: '64' }
  ]
} );

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

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

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

panel2.Render();

</jscript>

{{col|end}}