#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}}