Thanks to visit codestin.com
Credit goes to github.com

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

Added point draw methods for styles 'surface' and 'grid' #2215

Merged
merged 1 commit into from
Oct 24, 2016
Merged

Added point draw methods for styles 'surface' and 'grid' #2215

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
248 changes: 131 additions & 117 deletions lib/graph3d/Graph3d.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -846,6 +846,12 @@ Graph3d.prototype.getPointDrawingMethod = function() {
case Graph3d.STYLE.DOTSIZE:
pointDrawingMethod = Graph3d.prototype._redrawDotSizeGraphPoint;
break;
case Graph3d.STYLE.SURFACE:
pointDrawingMethod = Graph3d.prototype._redrawSurfaceGraphPoint;
break;
case Graph3d.STYLE.GRID:
pointDrawingMethod = Graph3d.prototype._redrawGridGraphPoint;
break;
}

return pointDrawingMethod;
Expand Down Expand Up @@ -875,11 +881,7 @@ Graph3d.prototype.redraw = function() {
} else {
// Use the old style drawing methods

if (this.style === Graph3d.STYLE.GRID ||
this.style === Graph3d.STYLE.SURFACE) {
this._redrawDataGrid();
}
else if (this.style === Graph3d.STYLE.LINE) {
if (this.style === Graph3d.STYLE.LINE) {
this._redrawDataLine();
}
else {
Expand Down Expand Up @@ -1414,108 +1416,6 @@ Graph3d.prototype._hsv2rgb = function(H, S, V) {
};


Graph3d.prototype._drawGridLine = function(ctx, from, to) {
if (from === undefined || to === undefined) {
return;
}

// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
var zAvg = (from.point.z + to.point.z) / 2;
var h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;

ctx.lineWidth = this._getStrokeWidth(from) * 2;
ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
this._line(ctx, from.screen, to.screen);
};


/**
* Draw all datapoints as a grid
* This function can be used when the style is 'grid'
*/
Graph3d.prototype._redrawDataGrid = function() {
var ctx = this._getContext(),
point, right, top, cross,
i,
topSideVisible, fillStyle, strokeStyle, lineWidth,
h, s, v, zAvg;

if (this.dataPoints === undefined || this.dataPoints.length <= 0)
return; // TODO: throw exception?

this._calcTranslations(this.dataPoints);

if (this.style === Graph3d.STYLE.SURFACE) {
for (i = 0; i < this.dataPoints.length; i++) {
point = this.dataPoints[i];
right = point.pointRight;
top = point.pointTop;
cross = point.pointCross;

if (point !== undefined && right !== undefined && top !== undefined && cross !== undefined) {

if (this.showGrayBottom || this.showShadow) {
// calculate the cross product of the two vectors from center
// to left and right, in order to know whether we are looking at the
// bottom or at the top side. We can also use the cross product
// for calculating light intensity
var aDiff = Point3d.subtract(cross.trans, point.trans);
var bDiff = Point3d.subtract(top.trans, right.trans);
var crossproduct = Point3d.crossProduct(aDiff, bDiff);
var len = crossproduct.length();
// FIXME: there is a bug with determining the surface side (shadow or colored)

topSideVisible = (crossproduct.z > 0);
}
else {
topSideVisible = true;
}

if (topSideVisible) {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
s = 1; // saturation

if (this.showShadow) {
v = Math.min(1 + (crossproduct.x / len) / 2, 1); // value. TODO: scale
fillStyle = this._hsv2rgb(h, s, v);
strokeStyle = fillStyle;
}
else {
v = 1;
fillStyle = this._hsv2rgb(h, s, v);
strokeStyle = this.axisColor; // TODO: should be customizable
}
}
else {
fillStyle = 'gray';
strokeStyle = this.axisColor;
}

ctx.lineWidth = this._getStrokeWidth(point);
ctx.fillStyle = fillStyle;
ctx.strokeStyle = strokeStyle;
ctx.beginPath();
ctx.moveTo(point.screen.x, point.screen.y);
ctx.lineTo(right.screen.x, right.screen.y);
ctx.lineTo(cross.screen.x, cross.screen.y);
ctx.lineTo(top.screen.x, top.screen.y);
ctx.closePath();
ctx.fill();
ctx.stroke(); // TODO: only draw stroke when strokeWidth > 0
}
}
}
else { // grid style
for (i = 0; i < this.dataPoints.length; i++) {
point = this.dataPoints[i];
this._drawGridLine(ctx, point, point.pointRight);
this._drawGridLine(ctx, point, point.pointTop);
}
}
};

Graph3d.prototype._getStrokeWidth = function(point) {
if (point !== undefined) {
if (this.showPerspective) {
Expand All @@ -1539,7 +1439,7 @@ Graph3d.prototype._getStrokeWidth = function(point) {
* Draw a bar element in the view with the given properties.
*/
Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borderColor) {
var i, j, surface, corners;
var i, j, surface;

// calculate all corner points
var me = this;
Expand Down Expand Up @@ -1605,16 +1505,40 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde
// NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
for (j = 2; j < surfaces.length; j++) {
surface = surfaces[j];
corners = surface.corners;
ctx.beginPath();
ctx.moveTo(corners[3].screen.x, corners[3].screen.y);
ctx.lineTo(corners[0].screen.x, corners[0].screen.y);
ctx.lineTo(corners[1].screen.x, corners[1].screen.y);
ctx.lineTo(corners[2].screen.x, corners[2].screen.y);
ctx.lineTo(corners[3].screen.x, corners[3].screen.y);
ctx.fill();
ctx.stroke();
this._polygon(ctx, surface.corners);
}
};


/**
* Draw a polygon using the passed points and fill it with the passed style and stroke.
*
* @param points an array of points.
* @param fillStyle optional; the fill style to set
* @param strokeStyle optional; the stroke style to set
*/
Graph3d.prototype._polygon = function(ctx, points, fillStyle, strokeStyle) {
if (points.length < 2) {
return;
}

if (fillStyle !== undefined) {
ctx.fillStyle = fillStyle;
}
if (strokeStyle !== undefined) {
ctx.strokeStyle = strokeStyle;
}
ctx.beginPath();
ctx.moveTo(points[0].screen.x, points[0].screen.y);

for (var i = 1; i < points.length; ++i) {
var point = points[i];
ctx.lineTo(point.screen.x, point.screen.y);
}

ctx.closePath();
ctx.fill();
ctx.stroke(); // TODO: only draw stroke when strokeWidth > 0
};


Expand Down Expand Up @@ -1796,6 +1720,96 @@ Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) {
};


/**
* Draw single datapoint for graph style 'surface'.
*/
Graph3d.prototype._redrawSurfaceGraphPoint = function(ctx, point) {
var right = point.pointRight;
var top = point.pointTop;
var cross = point.pointCross;

if (point === undefined || right === undefined || top === undefined || cross === undefined) {
return;
}

var topSideVisible = true;
var fillStyle;
var strokeStyle;
var lineWidth;

if (this.showGrayBottom || this.showShadow) {
// calculate the cross product of the two vectors from center
// to left and right, in order to know whether we are looking at the
// bottom or at the top side. We can also use the cross product
// for calculating light intensity
var aDiff = Point3d.subtract(cross.trans, point.trans);
var bDiff = Point3d.subtract(top.trans, right.trans);
var crossproduct = Point3d.crossProduct(aDiff, bDiff);
var len = crossproduct.length();
// FIXME: there is a bug with determining the surface side (shadow or colored)

topSideVisible = (crossproduct.z > 0);
}

if (topSideVisible) {

// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
var zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
var h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
var s = 1; // saturation
var v;

if (this.showShadow) {
v = Math.min(1 + (crossproduct.x / len) / 2, 1); // value. TODO: scale
fillStyle = this._hsv2rgb(h, s, v);
strokeStyle = fillStyle;
}
else {
v = 1;
fillStyle = this._hsv2rgb(h, s, v);
strokeStyle = this.axisColor; // TODO: should be customizable
}
}
else {
fillStyle = 'gray';
strokeStyle = this.axisColor;
}

ctx.lineWidth = this._getStrokeWidth(point);
// TODO: only draw stroke when strokeWidth > 0

var points = [point, right, cross, top];
this._polygon(ctx, points, fillStyle, strokeStyle);
};


/**
* Helper method for _redrawGridGraphPoint()
*/
Graph3d.prototype._drawGridLine = function(ctx, from, to) {
if (from === undefined || to === undefined) {
return;
}

// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
var zAvg = (from.point.z + to.point.z) / 2;
var h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;

ctx.lineWidth = this._getStrokeWidth(from) * 2;
ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
this._line(ctx, from.screen, to.screen);
};


/**
* Draw single datapoint for graph style 'Grid'.
*/
Graph3d.prototype._redrawGridGraphPoint = function(ctx, point) {
this._drawGridLine(ctx, point, point.pointRight);
this._drawGridLine(ctx, point, point.pointTop);
};


/**
* Draw all datapoints for currently selected graph style.
*
Expand Down