Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Commit

Permalink
Merge pull request #2171 from wimrijnders/PR10
Browse files Browse the repository at this point in the history 
Added methods for drawing Y and Z axis labels
  • Loading branch information
@yotamberk
yotamberk committed Oct 18, 2016
2 parents db89162 + 9b5eb3f commit 5740c13
Showing 1 changed file with 75 additions and 55 deletions.
130 changes: 75 additions & 55 deletions lib/graph3d/Graph3d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'.
*
Expand Down Expand Up @@ -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();
}
Expand All @@ -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);
Expand Down Expand Up @@ -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);
}
};

Expand Down

0 comments on commit 5740c13

Please sign in to comment.