Browse Source

Merge pull request #2171 from wimrijnders/PR10

Added methods for drawing Y and Z axis labels
codeClimate
yotamberk 8 years ago
committed by GitHub
parent
commit
5740c139c4
1 changed files with 75 additions and 55 deletions
  1. +75
    -55
      lib/graph3d/Graph3d.js

+ 75
- 55
lib/graph3d/Graph3d.js View File

@ -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);
}
};

Loading…
Cancel
Save