Browse Source

Added 2D line drawing method

codeClimate
Wim Rijnders 8 years ago
parent
commit
0330e2ff15
1 changed files with 33 additions and 73 deletions
  1. +33
    -73
      lib/graph3d/Graph3d.js

+ 33
- 73
lib/graph3d/Graph3d.js View File

@ -1182,6 +1182,23 @@ Graph3d.prototype._redrawInfo = function() {
};
/**
* Draw a line between 2d points 'from' and 'to'.
*
* If stroke style specified, set that as well.
*/
Graph3d.prototype._line = function(ctx, from, to, strokeStyle) {
if (strokeStyle !== undefined) {
ctx.strokeStyle = strokeStyle;
}
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x , to.y );
ctx.stroke();
}
/**
* Redraw the axis
*/
@ -1216,28 +1233,16 @@ Graph3d.prototype._redrawAxis = function() {
if (this.showGrid) {
from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
ctx.strokeStyle = this.gridColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
this._line(ctx, from, to, this.gridColor);
}
else {
from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(x, this.yMin+gridLenX, this.zMin));
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
this._line(ctx, from, to, this.axisColor);
from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
to = this._convert3Dto2D(new Point3d(x, this.yMax-gridLenX, this.zMin));
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
this._line(ctx, from, to, this.axisColor);
}
yText = (Math.cos(armAngle) > 0) ? this.yMin : this.yMax;
@ -1273,28 +1278,16 @@ Graph3d.prototype._redrawAxis = function() {
if (this.showGrid) {
from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
ctx.strokeStyle = this.gridColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
this._line(ctx, from, to, this.gridColor);
}
else {
from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin));
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
this._line(ctx, from, to, this.axisColor);
from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin));
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
this._line(ctx, from, to, this.axisColor);
}
xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax;
@ -1331,11 +1324,8 @@ Graph3d.prototype._redrawAxis = function() {
while (!step.end()) {
// TODO: make z-grid lines really 3d?
from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(from.x - textMargin, from.y);
ctx.stroke();
to = new Point2d(from.x - textMargin, from.y);
this._line(ctx, from, to, this.axisColor);
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
@ -1347,49 +1337,29 @@ Graph3d.prototype._redrawAxis = function() {
ctx.lineWidth = 1;
from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
this._line(ctx, from, to, this.axisColor);
// draw x-axis
ctx.lineWidth = 1;
// line at yMin
xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(xMin2d.x, xMin2d.y);
ctx.lineTo(xMax2d.x, xMax2d.y);
ctx.stroke();
this._line(ctx, xMin2d, xMax2d, this.axisColor);
// line at ymax
xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(xMin2d.x, xMin2d.y);
ctx.lineTo(xMax2d.x, xMax2d.y);
ctx.stroke();
this._line(ctx, xMin2d, xMax2d, this.axisColor);
// draw y-axis
ctx.lineWidth = 1;
// line at xMin
from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
this._line(ctx, from, to, this.axisColor);
// line at xMax
from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
this._line(ctx, from, to, this.axisColor);
// draw x-label
var xLabel = this.xLabel;
@ -1591,10 +1561,7 @@ Graph3d.prototype._redrawDataGrid = function() {
ctx.lineWidth = this._getStrokeWidth(point) * 2;
ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
ctx.beginPath();
ctx.moveTo(point.screen.x, point.screen.y);
ctx.lineTo(right.screen.x, right.screen.y);
ctx.stroke();
this._line(ctx, point.screen, right.screen);
}
if (point !== undefined && top !== undefined) {
@ -1604,10 +1571,7 @@ Graph3d.prototype._redrawDataGrid = function() {
ctx.lineWidth = this._getStrokeWidth(point) * 2;
ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
ctx.beginPath();
ctx.moveTo(point.screen.x, point.screen.y);
ctx.lineTo(top.screen.x, top.screen.y);
ctx.stroke();
this._line(ctx, point.screen, top.screen);
}
}
}
@ -1665,11 +1629,7 @@ Graph3d.prototype._redrawDataDot = function() {
//var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
var from = this._convert3Dto2D(point.bottom);
ctx.lineWidth = 1;
ctx.strokeStyle = this.gridColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(point.screen.x, point.screen.y);
ctx.stroke();
this._line(ctx, from, point.screen, this.gridColor);
}
// calculate radius for the circle

Loading…
Cancel
Save