Merge pull request #2159 from wimrijnders/PR3

Added 2D line drawing method

lib/graph3d/Graph3d.js

@@ -1182,6 +1182,23 @@ Graph3d.prototype._redrawInfo = function() {
 };
 
 
+/**
+ * Draw a line between 2d points 'from' and 'to'.
+ *
+ * If stroke style specified, set that as well.
+ */
+Graph3d.prototype._line = function(ctx, from, to, strokeStyle) {
+  if (strokeStyle !== undefined) {
+    ctx.strokeStyle = strokeStyle;
+  }
+
+  ctx.beginPath();
+  ctx.moveTo(from.x, from.y);
+  ctx.lineTo(to.x  , to.y  );
+  ctx.stroke();
+}
+
+
 /**
  * Redraw the axis
  */
@@ -1216,28 +1233,16 @@ Graph3d.prototype._redrawAxis = function() {
     if (this.showGrid) {
       from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
       to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
-      ctx.strokeStyle = this.gridColor;
-      ctx.beginPath();
-      ctx.moveTo(from.x, from.y);
-      ctx.lineTo(to.x, to.y);
-      ctx.stroke();
+      this._line(ctx, from, to, this.gridColor);
     }
     else {
       from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
       to = this._convert3Dto2D(new Point3d(x, this.yMin+gridLenX, this.zMin));
-      ctx.strokeStyle = this.axisColor;
-      ctx.beginPath();
-      ctx.moveTo(from.x, from.y);
-      ctx.lineTo(to.x, to.y);
-      ctx.stroke();
+      this._line(ctx, from, to, this.axisColor);
 
       from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
       to = this._convert3Dto2D(new Point3d(x, this.yMax-gridLenX, this.zMin));
-      ctx.strokeStyle = this.axisColor;
-      ctx.beginPath();
-      ctx.moveTo(from.x, from.y);
-      ctx.lineTo(to.x, to.y);
-      ctx.stroke();
+      this._line(ctx, from, to, this.axisColor);
     }
 
     yText = (Math.cos(armAngle) > 0) ? this.yMin : this.yMax;
@@ -1273,28 +1278,16 @@ Graph3d.prototype._redrawAxis = function() {
     if (this.showGrid) {
       from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
       to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
-      ctx.strokeStyle = this.gridColor;
-      ctx.beginPath();
-      ctx.moveTo(from.x, from.y);
-      ctx.lineTo(to.x, to.y);
-      ctx.stroke();
+      this._line(ctx, from, to, this.gridColor);
     }
     else {
       from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
       to = this._convert3Dto2D(new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin));
-      ctx.strokeStyle = this.axisColor;
-      ctx.beginPath();
-      ctx.moveTo(from.x, from.y);
-      ctx.lineTo(to.x, to.y);
-      ctx.stroke();
+      this._line(ctx, from, to, this.axisColor);
 
       from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
       to = this._convert3Dto2D(new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin));
-      ctx.strokeStyle = this.axisColor;
-      ctx.beginPath();
-      ctx.moveTo(from.x, from.y);
-      ctx.lineTo(to.x, to.y);
-      ctx.stroke();
+      this._line(ctx, from, to, this.axisColor);
     }
 
     xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax;
@@ -1331,11 +1324,8 @@ Graph3d.prototype._redrawAxis = function() {
   while (!step.end()) {
     // TODO: make z-grid lines really 3d?
     from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
-    ctx.strokeStyle = this.axisColor;
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(from.x - textMargin, from.y);
-    ctx.stroke();
+    to = new Point2d(from.x - textMargin, from.y);
+    this._line(ctx, from, to, this.axisColor);
 
     ctx.textAlign = 'right';
     ctx.textBaseline = 'middle';
@@ -1347,49 +1337,29 @@ Graph3d.prototype._redrawAxis = function() {
   ctx.lineWidth = 1;
   from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
   to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
-  ctx.strokeStyle = this.axisColor;
-  ctx.beginPath();
-  ctx.moveTo(from.x, from.y);
-  ctx.lineTo(to.x, to.y);
-  ctx.stroke();
+  this._line(ctx, from, to, this.axisColor);
 
   // draw x-axis
   ctx.lineWidth = 1;
   // line at yMin
   xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
   xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
-  ctx.strokeStyle = this.axisColor;
-  ctx.beginPath();
-  ctx.moveTo(xMin2d.x, xMin2d.y);
-  ctx.lineTo(xMax2d.x, xMax2d.y);
-  ctx.stroke();
+  this._line(ctx, xMin2d, xMax2d, this.axisColor);
   // line at ymax
   xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
   xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
-  ctx.strokeStyle = this.axisColor;
-  ctx.beginPath();
-  ctx.moveTo(xMin2d.x, xMin2d.y);
-  ctx.lineTo(xMax2d.x, xMax2d.y);
-  ctx.stroke();
+  this._line(ctx, xMin2d, xMax2d, this.axisColor);
 
   // draw y-axis
   ctx.lineWidth = 1;
   // line at xMin
   from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
   to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
-  ctx.strokeStyle = this.axisColor;
-  ctx.beginPath();
-  ctx.moveTo(from.x, from.y);
-  ctx.lineTo(to.x, to.y);
-  ctx.stroke();
+  this._line(ctx, from, to, this.axisColor);
   // line at xMax
   from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
   to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
-  ctx.strokeStyle = this.axisColor;
-  ctx.beginPath();
-  ctx.moveTo(from.x, from.y);
-  ctx.lineTo(to.x, to.y);
-  ctx.stroke();
+  this._line(ctx, from, to, this.axisColor);
 
   // draw x-label
   var xLabel = this.xLabel;
@@ -1591,10 +1561,7 @@ Graph3d.prototype._redrawDataGrid = function() {
 
         ctx.lineWidth = this._getStrokeWidth(point) * 2;
         ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
-        ctx.beginPath();
-        ctx.moveTo(point.screen.x, point.screen.y);
-        ctx.lineTo(right.screen.x, right.screen.y);
-        ctx.stroke();
+        this._line(ctx, point.screen, right.screen);
       }
 
       if (point !== undefined && top !== undefined) {
@@ -1604,10 +1571,7 @@ Graph3d.prototype._redrawDataGrid = function() {
 
         ctx.lineWidth = this._getStrokeWidth(point) * 2;
         ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
-        ctx.beginPath();
-        ctx.moveTo(point.screen.x, point.screen.y);
-        ctx.lineTo(top.screen.x, top.screen.y);
-        ctx.stroke();
+        this._line(ctx, point.screen, top.screen);
       }
     }
   }
@@ -1665,11 +1629,7 @@ Graph3d.prototype._redrawDataDot = function() {
       //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
       var from = this._convert3Dto2D(point.bottom);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = this.gridColor;
-      ctx.beginPath();
-      ctx.moveTo(from.x, from.y);
-      ctx.lineTo(point.screen.x, point.screen.y);
-      ctx.stroke();
+      this._line(ctx, from, point.screen, this.gridColor);
     }
 
     // calculate radius for the circle