From 9b5eb3f4da3d4029e380e728f83b6d4d07cf8313 Mon Sep 17 00:00:00 2001 From: Wim Rijnders Date: Tue, 18 Oct 2016 15:43:00 +0200 Subject: [PATCH] Added methods for drawing Y and Z axis labels --- lib/graph3d/Graph3d.js | 130 ++++++++++++++++++++++++----------------- 1 file changed, 75 insertions(+), 55 deletions(-) diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index ec556b95..c43f507b 100644 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -1254,6 +1254,48 @@ Graph3d.prototype.drawAxisLabelX = function(ctx, point3d, text, armAngle, yMargi } +Graph3d.prototype.drawAxisLabelY = function(ctx, point3d, text, armAngle, yMargin) { + if (yMargin === undefined) { + yMargin = 0; + } + + var point2d = this._convert3Dto2D(point3d); + + if (Math.cos(armAngle * 2) < 0) { + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; + point2d.y += yMargin; + } + else if (Math.sin(armAngle * 2) > 0){ + ctx.textAlign = 'right'; + ctx.textBaseline = 'middle'; + } + else { + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; + } + + ctx.fillStyle = this.axisColor; + ctx.fillText(text, point2d.x, point2d.y); +} + + +Graph3d.prototype.drawAxisLabelZ = function(ctx, point3d, text, offset) { + if (offset === undefined) { + offset = 0; + } + + var point2d = this._convert3Dto2D(point3d); + ctx.textAlign = 'right'; + ctx.textBaseline = 'middle'; + ctx.fillStyle = this.axisColor; + ctx.fillText(text, point2d.x - offset, point2d.y); +}; + + +/** + + /** * Draw a line between 2d points 'from' and 'to'. * @@ -1326,38 +1368,27 @@ Graph3d.prototype._redrawAxis = function() { step.start(true); while (!step.end()) { + var y = step.getCurrent(); + if (this.showGrid) { - from = new Point3d(this.xMin, step.getCurrent(), this.zMin); - to = new Point3d(this.xMax, step.getCurrent(), this.zMin); + from = new Point3d(this.xMin, y, this.zMin); + to = new Point3d(this.xMax, y, this.zMin); this._line3d(ctx, from, to, this.gridColor); } else { - from = new Point3d(this.xMin, step.getCurrent(), this.zMin); - to = new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin); + from = new Point3d(this.xMin, y, this.zMin); + to = new Point3d(this.xMin+gridLenY, y, this.zMin); this._line3d(ctx, from, to, this.axisColor); - from = new Point3d(this.xMax, step.getCurrent(), this.zMin); - to = new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin); + from = new Point3d(this.xMax, y, this.zMin); + to = new Point3d(this.xMax-gridLenY, y, this.zMin); this._line3d(ctx, from, to, this.axisColor); } - xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax; - text = this._convert3Dto2D(new Point3d(xText, step.getCurrent(), this.zMin)); - if (Math.cos(armAngle * 2) < 0) { - ctx.textAlign = 'center'; - ctx.textBaseline = 'top'; - text.y += textMargin; - } - else if (Math.sin(armAngle * 2) > 0){ - ctx.textAlign = 'right'; - ctx.textBaseline = 'middle'; - } - else { - ctx.textAlign = 'left'; - ctx.textBaseline = 'middle'; - } - ctx.fillStyle = this.axisColor; - ctx.fillText(' ' + this.yValueLabel(step.getCurrent()) + ' ', text.x, text.y); + xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax; + point3d = new Point3d(xText, y, this.zMin); + var msg = ' ' + this.yValueLabel(y) + ' '; + this.drawAxisLabelY(ctx, point3d, msg, armAngle, textMargin); step.next(); } @@ -1370,19 +1401,22 @@ Graph3d.prototype._redrawAxis = function() { xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax; yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax; + while (!step.end()) { + var z = step.getCurrent(); + // TODO: make z-grid lines really 3d? - from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent())); - to = new Point2d(from.x - textMargin, from.y); - this._line(ctx, from, to, this.axisColor); + var from3d = new Point3d(xText, yText, z); + var from2d = this._convert3Dto2D(from3d); + to = new Point2d(from2d.x - textMargin, from2d.y); + this._line(ctx, from2d, to, this.axisColor); - ctx.textAlign = 'right'; - ctx.textBaseline = 'middle'; - ctx.fillStyle = this.axisColor; - ctx.fillText(this.zValueLabel(step.getCurrent()) + ' ', from.x - 5, from.y); + var msg = this.zValueLabel(z) + ' '; + this.drawAxisLabelZ(ctx, from3d, msg, 5); step.next(); } + ctx.lineWidth = 1; from = new Point3d(xText, yText, this.zMin); to = new Point3d(xText, yText, this.zMax); @@ -1424,37 +1458,23 @@ Graph3d.prototype._redrawAxis = function() { var yLabel = this.yLabel; if (yLabel.length > 0) { xOffset = 0.1 / this.scale.x; - xText = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset; - yText = (this.yMin + this.yMax) / 2; - text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin)); - if (Math.cos(armAngle * 2) < 0) { - ctx.textAlign = 'center'; - ctx.textBaseline = 'top'; - } - else if (Math.sin(armAngle * 2) > 0){ - ctx.textAlign = 'right'; - ctx.textBaseline = 'middle'; - } - else { - ctx.textAlign = 'left'; - ctx.textBaseline = 'middle'; - } - ctx.fillStyle = this.axisColor; - ctx.fillText(yLabel, text.x, text.y); + xText = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset; + yText = (this.yMin + this.yMax) / 2; + text = new Point3d(xText, yText, this.zMin); + + this.drawAxisLabelY(ctx, text, yLabel, armAngle); } // draw z-label var zLabel = this.zLabel; if (zLabel.length > 0) { offset = 30; // pixels. // TODO: relate to the max width of the values on the z axis? - xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax; - yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax; - zText = (this.zMin + this.zMax) / 2; - text = this._convert3Dto2D(new Point3d(xText, yText, zText)); - ctx.textAlign = 'right'; - ctx.textBaseline = 'middle'; - ctx.fillStyle = this.axisColor; - ctx.fillText(zLabel, text.x - offset, text.y); + xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax; + yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax; + zText = (this.zMin + this.zMax) / 2; + text = new Point3d(xText, yText, zText); + + this.drawAxisLabelZ(ctx, text, zLabel, offset); } };