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

control mousemoves

Browse Source
This commit is contained in:
Pomax
2015-12-29 22:57:12 -08:00
parent 2e6067dbae
commit 14d760c728
4 changed files with 93 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Article.jsx
View File

@@ -33,7 +33,7 @@ var Article = React.createClass({
generateNavItem: function(name, entry) {
var Type = this.state.sections[name];
return <li data-number={entry}><a href={'#' + name}>{Type.title || name}</a></li>;
return <li key={name} data-number={entry}><a href={'#' + name}>{Type.title || name}</a></li>;
},
render: function() {

54
components/Graphic.jsx
View File

@@ -1,5 +1,6 @@
var React = require("react");
var ReactDOM = require("react-dom");
var chroma = require("chroma-js");
var fix = function(e) {
e = e || window.event;
@@ -22,6 +23,7 @@ var Graphic = React.createClass({
mp: { x: 0, y: 0},
offset: { x: 0, y: 0},
lpts: [],
colorSeed: 0,
render: function() {
var href = "data:text/plain," + this.props.code;
@@ -31,6 +33,7 @@ var Graphic = React.createClass({
onMouseDown={this.mouseDown}
onMouseMove={this.mouseMove}
onMouseUp={this.mouseUp}
onMouseOver={this.mouseOver}
onClick={this.mouseClick}
/>
<figcaption>{this.props.title}</figcaption>
@@ -81,12 +84,18 @@ var Graphic = React.createClass({
});
this.cvs.style.cursor = found ? "pointer" : "default";
if(!this.moving) return;
this.ox = evt.offsetX - this.mx;
this.oy = evt.offsetY - this.my;
this.mp.x = this.cx + this.ox;
this.mp.y = this.cy + this.oy;
this.curve.update();
this.hover = {
x: evt.offsetX,
y: evt.offsetY
};
if(this.moving) {
this.ox = evt.offsetX - this.mx;
this.oy = evt.offsetY - this.my;
this.mp.x = this.cx + this.ox;
this.mp.y = this.cy + this.oy;
this.curve.update();
}
if (this.props.draw) {
this.props.draw(this, this.curve);
@@ -106,19 +115,18 @@ var Graphic = React.createClass({
},
/**
* API for curve drawing.
*/
reset: function() {
this.refs.canvas.width = this.refs.canvas.width;
this.ctx.strokeStyle = "black";
this.ctx.lineWidth = 1;
this.ctx.fillStyle = "none";
this.offset = {x:0, y:0};
this.colorSeed = 0;
},
getPanelWidth: function() {
@@ -167,19 +175,22 @@ var Graphic = React.createClass({
this.ctx.strokeStyle = "transparent";
},
setRandomColor: function() {
var r = ((205*Math.random())|0),
g = ((155*Math.random())|0),
b = ((255*Math.random())|0);
this.ctx.strokeStyle = "rgb("+r+","+g+","+b+")";
setRandomColor: function(a) {
a = (typeof a === "undefined") ? 1 : a;
var h = this.colorSeed % 360,
s = 1.0,
l = 0.34;
this.colorSeed += 87;
this.ctx.strokeStyle = chroma.hsl(h,s,l).alpha(a).css();
},
setRandomFill: function(a) {
a = (typeof a === "undefined") ? 1 : a;
var r = ((255*Math.random())|0),
g = ((255*Math.random())|0),
b = ((255*Math.random())|0);
this.ctx.fillStyle = "rgba("+r+","+g+","+b+","+a+")";
var h = this.colorSeed % 360,
s = 1.0,
l = 0.34;
this.colorSeed += 87;
this.ctx.fillStyle = chroma.hsl(h,s,l).alpha(a).css();
},
setFill: function(c) {
@@ -307,6 +318,15 @@ var Graphic = React.createClass({
this.ctx.stroke();
},
drawRect: function(p1, p2, offset) {
offset = offset || { x:0, y:0 };
var ox = offset.x + this.offset.x;
var oy = offset.y + this.offset.y;
this.ctx.rect(p1.x, p1.y, p2.x-p1.x, p2.y-p1.y);
this.ctx.fill();
this.ctx.stroke();
},
drawShape: function(shape, offset) {
offset = offset || { x:0, y:0 };
var ox = offset.x + this.offset.x;

56
components/sections/control/index.js
View File

@@ -42,12 +42,40 @@ var Control = React.createClass({
if (!!label) api.text(label, where);
},
drawLerpBox: function(api, dim, pad, p) {
api.noColor();
api.setFill("rgba(0,0,100,0.2)");
var p1 = {x: p.x-5, y:pad},
p2 = {x:p.x + 5, y:dim};
api.drawRect(p1, p2);
api.setColor("black");
},
drawLerpPoint: function(api, tf, pad, fwh, p) {
p.y = pad + tf*fwh;
api.drawCircle(p, 3)
api.setFill("black");
api.text(((tf*10000)|0)/100 + "%", {x:p.x+10, y:p.y+4});
api.noFill();
},
drawQuadraticLerp: function(api) {
api.reset();
var dim = api.getPanelWidth(),
pad = 20,
fwh = dim - pad*2;
this.drawGraphBasics(api, dim, pad, fwh);
var p = api.hover;
if (p && p.x >= pad && p.x <= dim-pad) {
this.drawLerpBox(api, dim, pad, p);
var t = (p.x-pad)/fwh, tf;
this.drawLerpPoint(api, (1-t)*(1-t), pad, fwh, p);
this.drawLerpPoint(api, 2*(1-t)*(t), pad, fwh, p);
this.drawLerpPoint(api, (t)*(t), pad, fwh, p);
}
this.drawFunction(api, "first term", {x: pad*2, y: fwh}, function(t) {
return {
x: pad + t * fwh,
@@ -69,11 +97,23 @@ var Control = React.createClass({
},
drawCubicLerp: function(api) {
api.reset();
var dim = api.getPanelWidth(),
pad = 20,
fwh = dim - pad*2;
this.drawGraphBasics(api, dim, pad, fwh);
var p = api.hover;
if (p && p.x >= pad && p.x <= dim-pad) {
this.drawLerpBox(api, dim, pad, p);
var t = (p.x-pad)/fwh, tf;
this.drawLerpPoint(api, (1-t)*(1-t)*(1-t), pad, fwh, p);
this.drawLerpPoint(api, 2*(1-t)*(1-t)*(t), pad, fwh, p);
this.drawLerpPoint(api, 3*(1-t)*(t)*(t), pad, fwh, p);
this.drawLerpPoint(api, (t)*(t)*(t), pad, fwh, p);
}
this.drawFunction(api, "first term", {x: pad*2, y: fwh}, function(t) {
return {
x: pad + t * fwh,
@@ -101,12 +141,24 @@ var Control = React.createClass({
},
draw15thLerp: function(api) {
api.reset();
var dim = api.getPanelWidth(),
pad = 20,
fwh = dim - pad*2;
this.drawGraphBasics(api, dim, pad, fwh);
var factor = [1,15,105,455,1365,3003,5005,6435,6435,5005,3003,1365,455,105,15,1]
var factors = [1,15,105,455,1365,3003,5005,6435,6435,5005,3003,1365,455,105,15,1]
var p = api.hover;
if (p && p.x >= pad && p.x <= dim-pad) {
this.drawLerpBox(api, dim, pad, p);
for(var n=0; n<=15; n++) {
var t = (p.x-pad)/fwh,
tf = factors[n] * Math.pow(1-t, 15-n) * Math.pow(t, n);
this.drawLerpPoint(api, tf, pad, fwh, p);
}
}
for(var n=0; n<=15; n++) {
var label = false, position = false;
@@ -121,7 +173,7 @@ var Control = React.createClass({
this.drawFunction(api, label, position, function(t) {
return {
x: pad + t * fwh,
y: pad + fwh * factor[n] * Math.pow(1-t, 15-n) * Math.pow(t, n)
y: pad + fwh * factors[n] * Math.pow(1-t, 15-n) * Math.pow(t, n)
};
});
}

1
package.json
View File

@@ -32,6 +32,7 @@
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"bezier-js": "^1.0.8",
"chroma-js": "^1.1.1",
"css-loader": "^0.23.0",
"file-loader": "^0.8.5",
"jsmin": "^1.0.1",