|
|
@ -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
|
|
|
|