info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-22 16:23:12 +02:00
Code Issues Releases Wiki Activity

reset buttons for all graphics (#230)

Browse Source 
* reset buttons for all graphics

* resetting

* .

* build

* build
This commit is contained in:
Pomax
2020-01-05 11:57:46 -08:00
committed by GitHub
parent d695c08480
commit f4e9f77f9c
15 changed files with 118 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/sections/curvefitting/content.en-GB.md
View File

@@ -253,10 +253,9 @@ So let's try it out! The following graphic lets you place points, and will start
<div className="figure">
<Graphic title="Fitting a Bézier curve" setup={this.setup} draw={this.draw} onClick={this.onClick}>
<button onClick={this.toggle}>toggle</button>
<button onClick={this.reset}>reset</button>
<button onClick={this.toggle} style="position:absolute; right: 0;">toggle</button>
<SliderSet ref={ set => (this.sliders=set) } onChange={this.processTimeUpdate} />
</Graphic>
</div>
You'll note there are also two convenient buttons: the "toggle" button lets you toggle between equidistance `t` values, and distance ratio along the polygon, and the "reset" button just clears the graphic so you can draw a new set of points. Arguably more interesting is that once you have points to abstract a curve, you also get <em>direct control</em> over the time values, because if the time values are our degree of freedom, you should be able to freely manipulate them and see what the effect on your curve is.
You'll note there is a convenient "toggle" buttons that lets you toggle between equidistance `t` values, and distance ratio along the polygon. Arguably more interesting is that once you have points to abstract a curve, you also get <em>direct control</em> over the time values through sliders for each, because if the time values are our degree of freedom, you should be able to freely manipulate them and see what the effect on your curve is.

2
components/sections/curvefitting/handler.js
View File

@@ -3,11 +3,13 @@ var fit = require('../../../lib/curve-fitter.js');
module.exports = {
setup: function(api) {
this.api = api;
api.noDrag = true; // do not allow points to be dragged around
this.reset();
},
reset: function() {
this.points = [];
this.sliders.setOptions([]);
this.curveset = false;
this.mode = 0;
if (this.api) {