#INCLUDE JsGraph.inc #INCLUDE ControlPanel.inc <jscript> function SplineModel() { this.Mat = [[1,0,0],[0,1,0]]; this.Trans = 'window'; this.InRect = true; this.InPath = true; this.Append = false; this.Close = true; this.Stroke = true; this.Fill = true; this.Invert = false; this.ShowPoints = true; this.ShowControl = false; this.Width = 2; this.Size = 0.75; this.Cap = 'but'; this.Tension = 0.5; this.LastNPoints = 7; this.NPoints = 7; this.PolyTemplate = new JsgPolygon(); this.Poly = new JsgPolygon(); this.MakePoly(); this.Update(); } SplineModel.prototype.MakePoly = function() { this.PolyTemplate.Reset(); for (var i = 0; i < this.NPoints; i++ ) { this.PolyTemplate.AddPoint( Math.random(), Math.random() ); } } SplineModel.prototype.Update = function() { this.Poly.Reset(); var w = this.Size * 600; var h = this.Size * 400; for (var i = 0; i < this.NPoints; i++) { var x = this.PolyTemplate.X[i] * w - this.Size * 300; var y = this.PolyTemplate.Y[i] * h - this.Size * 200; this.Poly.AddPoint( x, y ); } } var model = new SplineModel(); var jsg = NewGraph2D( { Width: 602, Height: 403, DrawFunc: Draw, AutoReset: false } ); function Draw( g ) { g.Reset(); g.SetLineCap( model.Cap ); g.SetWindowWH( -g.VpInnerWidth/2, -g.VpInnerHeight/2, g.VpInnerWidth, g.VpInnerHeight ); g.SelectTrans( model.Trans ); g.AddTrans( model.Mat ); 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( -200, -100, 200, 100 ); if (model.Invert) { model.Poly.Invert(); g.SplineCurve( model.Poly, model.Tension, mode ); model.Poly.Invert(); } else { g.SplineCurve( model.Poly, model.Tension, mode ); } if (model.InPath) g.Path( mode ); //g.Polygon( [ 0, 0, 10 ], [ 10, 0, 0 ] ); if (model.ShowControl) { g.SetLineAttr( 'gray', 1 ); var wpoly = g.WorkPoly; var last = wpoly.Size - 1; for (var i = 0; i <= last; i += 3) { if (i > 0) g.Line( wpoly.X[i-1], wpoly.Y[i-1], wpoly.X[i], wpoly.Y[i] ); if (i < last) g.Line( wpoly.X[i], wpoly.Y[i], wpoly.X[i+1], wpoly.Y[i+1] ); } } if (model.ShowPoints) { g.SetLineAttr( 'gray', 0 ); g.Marker( model.Poly ); } } function Update() { if (model.LastNPoints != model.NPoints) { model.MakePoly(); model.LastNPoints = model.NPoints; } model.Update(); panel1.Update(); panel2.Update(); Draw( jsg ); } function NewSpline() { model.MakePoly(); Update(); } </jscript> {{col|50}} <jscript> var panel1 = ControlPanels.NewSliderPanel( { ModelRef: 'model', OnModelChange: Update } ); panel1.AddValueSliderField( { Name: 'NPoints', Min: 3, Max: 10, Steps: 7, Digits: 0 } ); panel1.AddValueSliderField( { Name: 'Size', Min: 0.1, Max: 1, Digits: 2 } ); panel1.AddValueSliderField( { Name: 'Tension', Min: -2, Max: 2, Digits: 2 } ); panel1.AddValueSliderField( { Name: 'Width', Min: 0, Max: 20, Digits: 1 } ); panel1.AddValueSliderField( { Name: 'a00', ValueRef: 'Mat[0][0]', Min: -5, Max: 5 } ); panel1.AddValueSliderField( { Name: 'a01', ValueRef: 'Mat[0][1]', Min: -5, Max: 5 } ); panel1.AddValueSliderField( { Name: 'a10', ValueRef: 'Mat[1][0]', Min: -5, Max: 5 } ); panel1.AddValueSliderField( { Name: 'a11', ValueRef: 'Mat[1][1]', Min: -5, Max: 5 } ); panel1.AddValueSliderField( { Name: 'a02', ValueRef: 'Mat[0][2]', Min: -100, Max: 100 } ); panel1.AddValueSliderField( { Name: 'a12', ValueRef: 'Mat[1][2]', Min: -100, Max: 100 } ); 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.AddCheckboxField( { Name: 'Show', Items: [ { Name: 'ShowPoints' }, { Name: 'ShowControl' } ] } ); panel2.AddHtmlField( { Label: '-', Html: ControlPanels.SmallButton( 'New Spline', 'NewSpline()' ) } ); panel2.Render(); </jscript> {{col|end}}