From 9e1fd6671e1f6e1cf901b9c6a23ace1d374d474c Mon Sep 17 00:00:00 2001 From: Wim Rijnders Date: Sun, 23 Oct 2016 11:38:29 +0200 Subject: [PATCH] Add point draw methods for styles 'dot-color' and 'dot-size' --- lib/graph3d/Graph3d.js | 225 ++++++++++++++++++++--------------------- 1 file changed, 111 insertions(+), 114 deletions(-) diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index 27466cda..aae7e869 100644 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -837,9 +837,15 @@ Graph3d.prototype.getPointDrawingMethod = function() { case Graph3d.STYLE.DOT: pointDrawingMethod = Graph3d.prototype._redrawDotGraphPoint; break; - case Graph3d.STYLE.DOT: + case Graph3d.STYLE.DOTLINE: pointDrawingMethod = Graph3d.prototype._redrawDotLineGraphPoint; break; + case Graph3d.STYLE.DOTCOLOR: + pointDrawingMethod = Graph3d.prototype._redrawDotColorGraphPoint; + break; + case Graph3d.STYLE.DOTSIZE: + pointDrawingMethod = Graph3d.prototype._redrawDotSizeGraphPoint; + break; } return pointDrawingMethod; @@ -877,8 +883,8 @@ Graph3d.prototype.redraw = function() { this._redrawDataLine(); } else { - // style is DOT, DOTLINE, DOTCOLOR, DOTSIZE - this._redrawDataDot(); + // Should not be reached any more. + throw new Error('Unknown graph style \'' + this.style + '\''); } } @@ -893,6 +899,10 @@ Graph3d.prototype.redraw = function() { Graph3d.prototype._getContext = function() { var canvas = this.frame.canvas; var ctx = canvas.getContext('2d'); + + ctx.lineJoin = 'round'; + ctx.lineCap = 'round'; + return ctx; }; @@ -1430,9 +1440,6 @@ Graph3d.prototype._redrawDataGrid = function() { topSideVisible, fillStyle, strokeStyle, lineWidth, h, s, v, zAvg; - ctx.lineJoin = 'round'; - ctx.lineCap = 'round'; - if (this.dataPoints === undefined || this.dataPoints.length <= 0) return; // TODO: throw exception? @@ -1522,95 +1529,18 @@ Graph3d.prototype._getStrokeWidth = function(point) { return this.dataColor.strokeWidth; }; -/** - * Draw all datapoints as dots. - * This function can be used when the style is 'dot' or 'dot-line' - */ -Graph3d.prototype._redrawDataDot = function() { - var ctx = this._getContext(); - var i; - - if (this.dataPoints === undefined || this.dataPoints.length <= 0) - return; // TODO: throw exception? - - this._calcTranslations(this.dataPoints); - - // draw the datapoints as colored circles - var dotSize = this._dotSize(); - for (i = 0; i < this.dataPoints.length; i++) { - var point = this.dataPoints[i]; - - if (this.style === Graph3d.STYLE.DOTLINE) { - // draw a vertical line from the bottom to the graph value - //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin)); - var from = this._convert3Dto2D(point.bottom); - ctx.lineWidth = 1; - this._line(ctx, from, point.screen, this.gridColor); - } - - // calculate radius for the circle - var size; - if (this.style === Graph3d.STYLE.DOTSIZE) { - size = dotSize/2 + 2*dotSize * (point.point.value - this.valueMin) / (this.valueMax - this.valueMin); - } - else { - size = dotSize; - } - - var radius; - if (this.showPerspective) { - radius = size / -point.trans.z; - } - else { - radius = size * -(this.eye.z / this.camera.getArmLength()); - } - if (radius < 0) { - radius = 0; - } - - var hue, color, borderColor; - if (this.style === Graph3d.STYLE.DOTCOLOR ) { - // calculate the color based on the value - hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240; - color = this._hsv2rgb(hue, 1, 1); - borderColor = this._hsv2rgb(hue, 1, 0.8); - } - else if (this.style === Graph3d.STYLE.DOTSIZE) { - color = this.dataColor.fill; - borderColor = this.dataColor.stroke; - } - else { - // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0 - hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240; - color = this._hsv2rgb(hue, 1, 1); - borderColor = this._hsv2rgb(hue, 1, 0.8); - } - - // draw the circle - ctx.lineWidth = this._getStrokeWidth(point); - ctx.strokeStyle = borderColor; - ctx.fillStyle = color; - ctx.beginPath(); - ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true); - ctx.fill(); - ctx.stroke(); - } -}; - // ----------------------------------------------------------------------------- // Drawing primitives for the graphs // ----------------------------------------------------------------------------- + /** * 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; - ctx.lineJoin = 'round'; - ctx.lineCap = 'round'; - // calculate all corner points var me = this; var point3d = point.point; @@ -1688,7 +1618,12 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde }; -Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor) { +/** + * @param size optional; if not specified use value from 'this._dotSize()` + */ +Graph3d.prototype._drawCircle = function(ctx, point, color, borderColor, size) { + var radius = this._calcRadius(point, size); + ctx.lineWidth = this._getStrokeWidth(point); ctx.strokeStyle = borderColor; ctx.fillStyle = color; @@ -1699,7 +1634,10 @@ Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor) }; -Graph3d.prototype._getColorsRegular = function(ctx, point) { +/** + * Determine the colors for the 'regular' graph styles. + */ +Graph3d.prototype._getColorsRegular = function(point) { // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0 var hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240; var color = this._hsv2rgb(hue, 1, 1); @@ -1711,6 +1649,63 @@ Graph3d.prototype._getColorsRegular = function(ctx, point) { }; }; + +/** + * Get the colors for the 'color' graph styles. + * These styles are currently: 'bar-color' and 'dot-color' + */ +Graph3d.prototype._getColorsColor = function(point) { + // calculate the color based on the value + var hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240; + var color = this._hsv2rgb(hue, 1, 1); + var borderColor = this._hsv2rgb(hue, 1, 0.8); + + return { + fill : color, + border : borderColor + }; +}; + + +/** + * Get the colors for the 'size' graph styles. + * These styles are currently: 'bar-size' and 'dot-size' + */ +Graph3d.prototype._getColorsSize = function() { + return { + fill : this.dataColor.fill, + border : this.dataColor.stroke + }; +}; + + +/** + * Determine the size of a point on-screen, as determined by the + * distance to the camera. + * + * @param size the size that needs to be translated to screen coordinates. + * optional; if not passed, use the default point size. + */ +Graph3d.prototype._calcRadius = function(point, size) { + if (size === undefined) { + size = this._dotSize(); + } + + var radius; + if (this.showPerspective) { + radius = size / -point.trans.z; + } + else { + radius = size * -(this.eye.z / this.camera.getArmLength()); + } + if (radius < 0) { + radius = 0; + } + + return radius; +}; + + // ----------------------------------------------------------------------------- // Methods for drawing points per graph style. // ----------------------------------------------------------------------------- @@ -1722,7 +1717,7 @@ Graph3d.prototype._getColorsRegular = function(ctx, point) { Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) { var xWidth = this.xBarWidth / 2; var yWidth = this.yBarWidth / 2; - var colors = this._getColorsRegular(ctx, point); + var colors = this._getColorsRegular(point); this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border); }; @@ -1734,13 +1729,9 @@ Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) { Graph3d.prototype._redrawBarColorGraphPoint = function(ctx, point) { var xWidth = this.xBarWidth / 2; var yWidth = this.yBarWidth / 2; + var colors = this._getColorsColor(point); - // calculate the color based on the value - var hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240; - var color = this._hsv2rgb(hue, 1, 1); - var borderColor = this._hsv2rgb(hue, 1, 0.8); - - this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor); + this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border); }; @@ -1753,11 +1744,9 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) { var xWidth = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2); var yWidth = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2); - // determine color - var color = this.dataColor.fill; - var borderColor = this.dataColor.stroke; + var colors = this._getColorsSize(); - this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor); + this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border); }; @@ -1765,22 +1754,9 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) { * Draw single datapoint for graph style 'dot'. */ Graph3d.prototype._redrawDotGraphPoint = function(ctx, point) { - var size = this._dotSize(); + var colors = this._getColorsRegular(point); - var radius; - if (this.showPerspective) { - radius = size / -point.trans.z; - } - else { - radius = size * -(this.eye.z / this.camera.getArmLength()); - } - if (radius < 0) { - radius = 0; - } - - var colors = this._getColorsRegular(ctx, point); - - this._drawCircle(ctx, point, radius, colors.fill, colors.border); + this._drawCircle(ctx, point, colors.fill, colors.border); }; @@ -1797,6 +1773,29 @@ Graph3d.prototype._redrawDotLineGraphPoint = function(ctx, point) { }; +/** + * Draw single datapoint for graph style 'dot-color'. + */ +Graph3d.prototype._redrawDotColorGraphPoint = function(ctx, point) { + var colors = this._getColorsColor(point); + + this._drawCircle(ctx, point, colors.fill, colors.border); +}; + + +/** + * Draw single datapoint for graph style 'dot-size'. + */ +Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) { + var dotSize = this._dotSize(); + var fraction = (point.point.value - this.valueMin) / (this.valueMax - this.valueMin); + var size = dotSize/2 + 2*dotSize * fraction; + var colors = this._getColorsSize(); + + this._drawCircle(ctx, point, colors.fill, colors.border, size); +}; + + /** * Draw all datapoints for currently selected graph style. * @@ -1843,8 +1842,6 @@ Graph3d.prototype._redrawDataLine = function() { point = this.dataPoints[0]; ctx.lineWidth = this._getStrokeWidth(point); - ctx.lineJoin = 'round'; - ctx.lineCap = 'round'; ctx.strokeStyle = this.dataColor.stroke; for (i = 0; i < this.dataPoints.length; i++) {