graphics/arc.js

  1. 'use strict';
  3. /**
  4.  * @namespace Arc
  5.  */
  7. var Thing = require('./thing.js');
  8. var graphicsUtils = require('./graphics-utils.js');
  10. /* The angles are always stored in radians.
  11.  * Based on the unit (by default, degrees), the angles might be converted
  12.  * when calling getters or setters on the start/end angles.
  13.  */
  15. /**
  16.  * @class Arc
  17.  * @augments Thing
  18.  * @param {number} radius - Desired radius of the arc.
  19.  * @param {number} startAngle - Start angle of the arc.
  20.  * @param {number} endAngle - End angle of the arc.
  21.  * @param {number} angleUnit - Integer representing unit.
  22.  * Degrees ===0, Radians ===1
  23.  */
  24. function Arc(radius, startAngle, endAngle, angleUnit) {
  25.     if (arguments.length !== 4) {
  26.         throw new Error('You should pass exactly 4 arguments to <span ' +
  27.             'class="code">new Arc(raduis, startAngle, endAngle, ' +
  28.             'angleUnit)</span>');
  29.     }
  30.     if (typeof radius !== 'number' || !isFinite(radius)) {
  31.         throw new TypeError('Invalid value for <span class="code">radius' +
  32.             '</span>. Make sure you are passing finite numbers to <span ' +
  33.             'class="code">new Arc(raduis, startAngle, endAngle, ' +
  34.             'angleUnit)</span>');
  35.     }
  36.     if (typeof startAngle !== 'number' || !isFinite(startAngle)) {
  37.         throw new TypeError('Invalid value for <span class="code">startAngle' +
  38.             '</span>. Make sure you are passing finite numbers to <span ' +
  39.             'class="code">new Arc(raduis, startAngle, endAngle, ' +
  40.             'angleUnit)</span>');
  41.     }
  42.     if (typeof endAngle !== 'number' || !isFinite(endAngle)) {
  43.         throw new TypeError('Invalid value for <span class="code">endAngle' +
  44.             '</span>. Make sure you are passing finite numbers to <span ' +
  45.             'class="code">new Arc(raduis, startAngle, endAngle, ' +
  46.             'angleUnit)</span>');
  47.     }
  48.     if (typeof angleUnit !== 'number' || !isFinite(angleUnit)) {
  49.         throw new TypeError('Invalid value for <span class="code">angleUnit' +
  50.             '</span>. Make sure you are passing finite numbers to <span ' +
  51.             'class="code">new Arc(raduis, startAngle, endAngle, ' +
  52.             'angleUnit)</span>');
  53.     }
  55.     Thing.call(this);
  57.     this.radius = radius;
  58.     this.angleUnit = angleUnit == Arc.DEGREES ? Arc.DEGREES : Arc.RADIANS;
  60.     this.counterclockwise = Arc.COUNTER_CLOCKWISE;
  61.     this.type = 'Arc';
  63.     if (this.angleUnit == Arc.DEGREES) {
  64.         startAngle = degreesToRadians(startAngle);
  65.         endAngle = degreesToRadians(endAngle);
  66.     }
  68.     this.startAngle = startAngle;
  69.     this.endAngle = endAngle;
  70. }
  72. Arc.prototype = new Thing();
  73. Arc.prototype.constructor = Arc;
  75. // Constants for Arcs.
  76. Arc.COUNTER_CLOCKWISE = true;
  77. Arc.CLOCKWISE = false;
  78. Arc.DEGREES = 0;
  79. Arc.RADIANS = 1;
  81. /**
  82.  * Draws the arc in the canvas.
  83.  *
  84.  * @param {CodeHSGraphics} __graphics__ - Instance of the __graphics__ module.
  85.  */
  86. Arc.prototype.draw = function(__graphics__) {
  87.     var context = __graphics__.getContext();
  88.     // http://stackoverflow.com/questions/17125632/html5-canvas-rotate-object-without-moving-coordinates
  89.     context.save();
  90.     context.beginPath();
  91.     context.translate(this.x, this.y);
  92.     context.rotate(this.rotation);
  93.     context.arc(0, 0, this.radius, prepareAngle(this.startAngle),
  94.         prepareAngle(this.endAngle), this.counterclockwise);
  95.     context.lineTo(0, 0);
  97.     if (this.hasBorder) {
  98.         context.lineWidth = this.lineWidth;
  99.         context.strokeStyle = this.stroke.toString();
  100.         context.stroke();
  101.     }
  103.     context.fillStyle = this.color.toString();
  104.     context.fill();
  105.     context.restore();
  106. };
  108. /* Sets the starting angle of the arc.
  109.  * Note: All angles are stored in radians, so we must first convert
  110.  * to radians (if the unit is degrees) before storing the new angle.
  111.  * @param {number} angle - The desired start angle of the arc.
  112.  */
  113. Arc.prototype.setStartAngle = function(angle) {
  114.     if (arguments.length !== 1) {
  115.         throw new Error('You should pass exactly 1 argument to ' +
  116.             '<span class="code">setStartAngle</span>');
  117.     }
  118.     if (typeof angle !== 'number' || !isFinite(angle)) {
  119.         throw new Error('Invalid value passed to <span class="code">' +
  120.             'setStartAngle</span>. Make sure you are passing a ' +
  121.             'finite number.');
  122.     }
  123.     if (this.angleUnit == Arc.DEGREES) {
  124.         angle = degreesToRadians(angle);
  125.     }
  126.     this.startAngle = angle;
  127. };
  129. /* Sets the ending angle of the arc.
  130.  * Note: All angles are stored in radians, so we must first convert
  131.  * to radians (if the unit is degrees) before storing the new angle.
  132.  * @param {number} angle - The desired end angle of the arc.
  133.  */
  134. Arc.prototype.setEndAngle = function(angle) {
  135.     if (arguments.length !== 1) {
  136.         throw new Error('You should pass exactly 1 argument to ' +
  137.             '<span class="code">setEndAngle</span>');
  138.     }
  139.     if (typeof angle !== 'number' || !isFinite(angle)) {
  140.         throw new Error('Invalid value passed to <span class="code">' +
  141.             'setEndAngle</span>. Make sure you are passing a ' +
  142.             'finite number.');
  143.     }
  144.     if (this.angleUnit == Arc.DEGREES) {
  145.         angle = degreesToRadians(angle);
  146.     }
  147.     this.endAngle = angle;
  148. };
  150. /* Gets the starting angle of the arc.
  151.  * @returns {number} The start angle of the arc.
  152.  */
  153. Arc.prototype.getStartAngle = function() {
  154.     var angle = this.startAngle;
  155.     if (this.angleUnit == Arc.DEGREES) {
  156.         angle = radiansToDegrees(this.startAngle);
  157.     }
  159.     return Math.round(angle);
  160. };
  162. /* Gets the starting angle of the arc.
  163.  * @returns {number} The start angle of the arc.
  164.  */
  165. Arc.prototype.getEndAngle = function() {
  166.     var angle = this.endAngle;
  167.     if (this.angleUnit == Arc.DEGREES) {
  168.         angle = radiansToDegrees(this.endAngle);
  169.     }
  170.     return Math.round(angle);
  171. };
  173. /* Gets the direction of the arc (CW or CCW).
  174.  * @param {boolean} val - Boolean representing CW or CCW.
  175.  * `True` sets counterclockwise to true.
  176.  */
  177. Arc.prototype.setDirection = function(val) {
  178.     if (arguments.length !== 1) {
  179.         throw new Error('You should pass exactly 1 argument to ' +
  180.             '<span class="code">setDirection</span>');
  181.     }
  182.     if (typeof val !== 'boolean') {
  183.         throw new Error('Invalid value passed to <span class="code">' +
  184.             'setDirection</span>. Make sure you are passing a ' +
  185.             'boolean value. true for counterclockwise, false for clockwise.');
  186.     }
  187.     this.counterclockwise = val;
  188. };
  190. /**
  191.  * Checks if a given point is contained within the arc. We always fill the arc
  192.  * so it is technically a segment of the circle
  193.  *
  194.  * @param {number} x - x coordinate of the point being tested.
  195.  * @param {number} y - y coordinate of the point being tested.
  196.  */
  197. Arc.prototype.containsPoint = function(x, y) {
  198.     // First check whether the point is in the circle
  199.     var dist = graphicsUtils.getDistance(this.x, this.y, x, y);
  200.     if (dist > this.radius) {
  201.         return false;
  202.     }
  204.     // Get vector/ angle for the point
  205.     var vx = x - this.x;
  206.     var vy = this.y - y;
  207.     var theta = Math.atan(vy / vx)
  209.     // Adjust the arctan based on the quadran the point is in using the
  210.     // position of the arc as the origin
  211.     // Quadrant II and III
  212.     if (vx < 0) {
  213.         theta += Math.PI;
  214.     // Quadrant IV
  215.     } else if (vy < 0) {
  216.         theta += 2 * Math.PI
  217.     }
  219.     // Check whether angle is between start and end, take into account fill
  220.     // direction
  221.     var betweenCCW = theta >= this.startAngle && theta <= this.endAngle;
  222.     if (this.counterclockwise) {
  223.         return betweenCCW;
  224.     } else {
  225.         return !betweenCCW;
  226.     }
  227. };
  229. /**
  230.  * Prepares an angle to be drawn.
  231.  *
  232.  * @memberof Arc
  233.  * @param {number} angle - The angle to be prepared.
  234.  * @returns {number} The prepared angle.
  235.  */
  236. var prepareAngle = function(angle) {
  237.     // First, convert to degrees (may lose some accuracy)
  238.     angle = radiansToDegrees(angle);
  239.     angle = Math.round(angle);
  241.     // The canvas arc angles go clockwise, but we want them
  242.     // to go counterclockwise (like the unit circle). Here,
  243.     // we adjust the angle for that.
  244.     angle = (360 - angle) % 360;
  245.     angle = degreesToRadians(angle);
  247.     return angle;
  248. };
  250. /**
  251.  * Helper to convert degrees to radians.
  252.  *
  253.  * @memberof Arc
  254.  * @param {number} angleInDegrees - The angle represented as degrees.
  255.  * @returns {number} The angle represented as radians.
  256.  */
  257. var degreesToRadians = function(angleInDegrees) {
  258.     return angleInDegrees / 180 * Math.PI;
  259. };
  261. /**
  262.  * Helper to convert radians to degrees.
  263.  *
  264.  * @memberof Arc
  265.  * @param {number} angleInRadians - The angle represented as radians.
  266.  * @returns {number} The angle represented as degrees.
  267.  */
  268. var radiansToDegrees = function(angleInRadians) {
  269.     return angleInRadians / Math.PI * 180;
  270. };
  272. module.exports = Arc;