info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-28 10:40:52 +02:00
Code Issues Releases Wiki Activity

.

Browse Source
This commit is contained in:
Pomax
2016-01-03 17:08:58 -08:00
parent fe9749d5c1
commit 8b78e22ac4
2 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/Graphic.jsx
View File

@@ -10,10 +10,12 @@ var fix = function(e) {
e.offsetY = e.clientY - rect.top; e.offsetY = e.clientY - rect.top;
}; };
var defaultWidth = 275;
var defaultHeight = 275;
var Graphic = React.createClass({ var Graphic = React.createClass({
defaultWidth: 275,
defaultHeight: 275,
Bezier: require("bezier-js"), Bezier: require("bezier-js"),
curve: false, curve: false,
mx:0, mx:0,
@@ -63,8 +65,8 @@ var Graphic = React.createClass({
componentDidMount: function() { componentDidMount: function() {
var cvs = this.refs.canvas; var cvs = this.refs.canvas;
cvs.width = defaultWidth; cvs.width = this.defaultWidth;
cvs.height = defaultHeight; cvs.height = this.defaultHeight;
this.cvs = cvs; this.cvs = cvs;
var ctx = cvs.getContext("2d"); var ctx = cvs.getContext("2d");
this.ctx = ctx; this.ctx = ctx;
@@ -199,18 +201,18 @@ var Graphic = React.createClass({
}, },
setSize: function(w,h) { setSize: function(w,h) {
defaultWidth = w; this.defaultWidth = w;
defaultHeight = h; this.defaultHeight = h;
this.refs.canvas.width = w; this.refs.canvas.width = w;
this.refs.canvas.height = h; this.refs.canvas.height = h;
}, },
getPanelWidth: function() { getPanelWidth: function() {
return defaultWidth; return this.defaultWidth;
}, },
getPanelHeight: function() { getPanelHeight: function() {
return defaultHeight; return this.defaultHeight;
}, },
getDefaultQuadratic: function() { getDefaultQuadratic: function() {
@@ -230,7 +232,7 @@ var Graphic = React.createClass({
setPanelCount: function(c) { setPanelCount: function(c) {
var cvs = this.refs.canvas; var cvs = this.refs.canvas;
cvs.width = c*defaultWidth; cvs.width = c * this.defaultWidth;
}, },
setCurve: function(c) { setCurve: function(c) {

12
components/sections/canonical/index.js
View File

@@ -16,13 +16,15 @@ var Canonical = React.createClass({
}, },
draw: function(api, curve) { draw: function(api, curve) {
var w = 400,
h = w,
unit = this.unit,
center = {x:w/2, y:h/2};
api.setSize(w,h);
api.setPanelCount(2); api.setPanelCount(2);
api.reset(); api.reset();
var w = api.getPanelWidth(),
h = api.getPanelHeight(),
unit = this.unit;
api.drawSkeleton(curve); api.drawSkeleton(curve);
api.drawCurve(curve); api.drawCurve(curve);
@@ -38,7 +40,6 @@ var Canonical = React.createClass({
]; ];
var canonical = new api.Bezier(npts); var canonical = new api.Bezier(npts);
var center = {x:w/2, y:h/2};
api.setColor("blue"); api.setColor("blue");
api.drawCurve(canonical, center); api.drawCurve(canonical, center);
api.drawCircle(npts[3], 3, center); api.drawCircle(npts[3], 3, center);
@@ -65,6 +66,7 @@ var Canonical = React.createClass({
h = w, h = w,
unit = this.unit = w/5, unit = this.unit = w/5,
center = {x:w/2, y:h/2}; center = {x:w/2, y:h/2};
api.setSize(w,h); api.setSize(w,h);
// axes + gridlines // axes + gridlines