graphics/line.js

  1. 'use strict';
  3. var Thing = require('./thing.js');
  5. /**
  6.  * @class Line
  7.  * @augments Thing
  8.  * @param {number} x1 - x coordinate of starting point of line.
  9.  * @param {number} y1 - y coordinate of starting point of line.
  10.  * @param {number} x2 - x coordinate of end point of line.
  11.  * @param {number} y2 - y coordinate of end point of line.
  12.  */
  13. function Line(x1, y1, x2, y2) {
  14.     if (arguments.length !== 4) {
  15.         throw new Error(
  16.             'You should pass exactly 4 argument to <span ' +
  17.                 'class="code">new Line(x1, y1, x2, y2)</span>'
  18.         );
  19.     }
  20.     if (
  21.         typeof x1 !== 'number' ||
  22.         typeof y1 !== 'number' ||
  23.         typeof x2 !== 'number' ||
  24.         typeof y2 !== 'number'
  25.     ) {
  26.         throw new TypeError(
  27.             'You must pass 4 numbers to <span class="code">' +
  28.                 'new Line(x1, y1, x2, y2)</span>. Make sure each parameter you' +
  29.                 'are passing is a number.'
  30.         );
  31.     }
  32.     if (!isFinite(x1) || !isFinite(y1) || !isFinite(x2) || !isFinite(y2)) {
  33.         throw new TypeError(
  34.             'One or more of the values you passed to <span ' +
  35.                 'class="code">new Line(x1, y1, x2, y2)</span> is an illegal ' +
  36.                 'number. Did you forget the parentheses in <span class="code">' +
  37.                 'getWidth()</span> or <span class="code">getHeight()</span>? Or ' +
  38.                 'did you perform a calculation on a variable that is not a ' +
  39.                 'number?'
  40.         );
  41.     }
  42.     Thing.call(this);
  43.     this.x1 = x1;
  44.     this.y1 = y1;
  45.     this.x2 = x2;
  46.     this.y2 = y2;
  47.     this.lineWidth = 2;
  48.     this.type = 'Line';
  49. }
  51. Line.prototype = new Thing();
  52. Line.prototype.constructor = Line;
  54. /**
  55.  * Sets the color of a line.
  56.  *
  57.  * @param {Color} color - Sets the color of the line.
  58.  */
  59. Line.prototype.setColor = function(color) {
  60.     if (arguments.length !== 1) {
  61.         throw new Error(
  62.             'You should pass exactly 1 argument to <span ' + 'class="code">setColor(color)</span>.'
  63.         );
  64.     }
  65.     if (color === undefined) {
  66.         throw new TypeError('Invalid color');
  67.     }
  68.     this.stroke = color;
  69. };
  71. /**
  72.  * Gets the color of a line.
  73.  *
  74.  * @returns {Color} Color of the line.
  75.  */
  76. Line.prototype.getColor = function() {
  77.     return this.stroke;
  78. };
  80. /**
  81.  * Draws the line in the canvas.
  82.  *
  83.  * @param {CodeHSGraphics} __graphics__ - Instance of the __graphics__ module.
  84.  */
  85. Line.prototype.draw = function(__graphics__) {
  86.     var context = __graphics__.getContext();
  87.     // http://stackoverflow.com/questions/17125632/html5-canvas-rotate-object-without-moving-coordinates
  88.     context.save();
  89.     context.fillStyle = this.color.toString();
  90.     context.beginPath();
  91.     context.strokeStyle = this.stroke.toString();
  92.     context.lineWidth = this.lineWidth;
  93.     var rotatedPoints = getRotatedPoints(this.x1, this.y1, this.x2, this.y2, this.rotation);
  94.     context.moveTo(rotatedPoints[0], rotatedPoints[1]);
  95.     context.lineTo(rotatedPoints[2], rotatedPoints[3]);
  96.     context.closePath();
  97.     context.stroke();
  98.     context.restore();
  99. };
  101. /**
  102.  * Gets the new points based on their rotated values.
  103.  *
  104.  */
  105. /**
  106.  * Gets the new points based on their rotated values.
  107.  *
  108.  * @param  {number} x1       X coordinate of start point
  109.  * @param  {number} y1       Y coordinate of start point
  110.  * @param  {number} x2       X coordinate of end point
  111.  * @param  {number} y2       Y Coordinate of end point
  112.  * @param  {number} rotation radians rotated (Expected in radians)
  113.  * @return {array}          List of coordinates of both points.
  114.  */
  115. var getRotatedPoints = function(x1, y1, x2, y2, rotation) {
  116.     var midX = (x1 + x2) / 2;
  117.     var midY = (y1 + y2) / 2;
  118.     var sinAngle = Math.sin(rotation);
  119.     var cosAngle = Math.cos(rotation);
  120.     var newX;
  121.     var newY;
  122.     // Rotate point 1
  123.     x1 -= midX;
  124.     y1 -= midY;
  125.     newX = x1 * cosAngle - y1 * sinAngle;
  126.     newY = x1 * sinAngle + y1 * cosAngle;
  127.     x1 = newX + midX;
  128.     y1 = newY + midY;
  130.     // Rotate point 2
  131.     x2 -= midX;
  132.     y2 -= midY;
  133.     newX = x2 * cosAngle - y2 * sinAngle;
  134.     newY = x2 * sinAngle + y2 * cosAngle;
  135.     x2 = newX + midX;
  136.     y2 = newY + midY;
  138.     return [x1, y1, x2, y2];
  139. };
  141. /**
  142.  * Checks if a given point is contained in the line.
  143.  *
  144.  * @param {number} x - x coordinate of the point being tested.
  145.  * @param {number} y - y coordinate of the point being tested.
  146.  */
  147. Line.prototype.containsPoint = function(x, y) {
  148.     var betweenXs = (this.x1 <= x && x <= this.x2) || (this.x2 <= x && x <= this.x1);
  149.     var betweenYs = (this.y1 <= y && y <= this.y2) || (this.y2 <= y && y <= this.y1);
  150.     if (this.x1 == this.x2) {
  151.         return this.x1 == x && betweenYs;
  152.     } else {
  153.         var slope = (this.y2 - this.y1) / (this.x2 - this.x1);
  154.         return (
  155.             Math.abs(slope * (x - this.x1) - (y - this.y1)) <= this.lineWidth &&
  156.             betweenXs &&
  157.             betweenYs
  158.         );
  159.     }
  160. };
  162. /**
  163.  * Returns the width of the line.
  164.  *
  165.  * @returns {number} The width of the line.
  166.  */
  167. Line.prototype.getWidth = function() {
  168.     return this.width;
  169. };
  171. /**
  172.  * Returns the height of the line.
  173.  *
  174.  * @returns {number} The width of the line.
  175.  */
  176. Line.prototype.getHeight = function() {
  177.     return this.height;
  178. };
  180. /**
  181.  * Sets the width of the line.
  182.  *
  183.  * @param {number} width - The resulting width of the line.
  184.  */
  185. Line.prototype.setLineWidth = function(width) {
  186.     if (arguments.length !== 1) {
  187.         throw new Error(
  188.             'You should pass exactly 1 argument to <span ' + 'class="code">setLineWidth</span>'
  189.         );
  190.     }
  191.     if (typeof width !== 'number' || !isFinite(width)) {
  192.         throw new TypeError(
  193.             'You must pass a finite number to <span class=' +
  194.                 '"code">setLineWidth(width)</span>. Did you perform a ' +
  195.                 'calculation on a variable that is not a number?'
  196.         );
  197.     }
  198.     this.lineWidth = width;
  199. };
  201. /**
  202.  * Sets the *starting* point of the line.
  203.  *
  204.  * @param {number} x - The x coordinate of the resulting ending point.
  205.  * @param {number} y - The y coordinate of the resulting ending point.
  206.  */
  207. Line.prototype.setStartpoint = function(x, y) {
  208.     if (arguments.length !== 2) {
  209.         throw new Error(
  210.             'You should pass exactly 2 arguments to <span ' +
  211.                 'class="code">setStartpoint(x, y)</span>'
  212.         );
  213.     }
  214.     if (typeof x !== 'number' || !isFinite(x)) {
  215.         throw new TypeError(
  216.             'Invalid value for x-coordinate. ' +
  217.                 'Make sure you are passing finite numbers to <span ' +
  218.                 'class="code">setStartpoint(x, y)</span>. Did you ' +
  219.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  220.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  221.                 'calculation on a variable that is not a number?'
  222.         );
  223.     }
  224.     if (typeof y !== 'number' || !isFinite(y)) {
  225.         throw new TypeError(
  226.             'Invalid value for y-coordinate. ' +
  227.                 'Make sure you are passing finite numbers to <span ' +
  228.                 'class="code">setStartpoint(x, y)</span>. Did you ' +
  229.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  230.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  231.                 'calculation on a variable that is not a number?'
  232.         );
  233.     }
  235.     this.setPosition(x, y);
  236. };
  238. /**
  239.  * Sets the *starting* point of the line.
  240.  *
  241.  * @param {number} x - The x coordinate of the resulting starting point.
  242.  * @param {number} y - The y coordinate of the resulting starting point.
  243.  */
  244. Line.prototype.setPosition = function(x, y) {
  245.     if (arguments.length !== 2) {
  246.         throw new Error(
  247.             'You should pass exactly 2 arguments to <span ' +
  248.                 'class="code">setPosition(x, y)</span>'
  249.         );
  250.     }
  251.     if (typeof x !== 'number' || !isFinite(x)) {
  252.         throw new TypeError(
  253.             'Invalid value for x-coordinate. ' +
  254.                 'Make sure you are passing finite numbers to <span ' +
  255.                 'class="code">setPosition(x, y)</span>. Did you ' +
  256.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  257.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  258.                 'calculation on a variable that is not a number?'
  259.         );
  260.     }
  261.     if (typeof y !== 'number' || !isFinite(y)) {
  262.         throw new TypeError(
  263.             'Invalid value for y-coordinate. ' +
  264.                 'Make sure you are passing finite numbers to <span ' +
  265.                 'class="code">setPosition(x, y)</span>. Did you ' +
  266.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  267.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  268.                 'calculation on a variable that is not a number?'
  269.         );
  270.     }
  271.     this.x1 = x;
  272.     this.y1 = y;
  273. };
  275. /**
  276.  * Sets the *ending* point of the line.
  277.  *
  278.  * @param {number} x - The x coordinate of the resulting ending point.
  279.  * @param {number} y - The y coordinate of the resulting ending point.
  280.  */
  281. Line.prototype.setEndpoint = function(x, y) {
  282.     if (arguments.length !== 2) {
  283.         throw new Error(
  284.             'You should pass exactly 2 arguments to <span ' +
  285.                 'class="code">setEndpoint(x, y)</span>'
  286.         );
  287.     }
  288.     if (typeof x !== 'number' || !isFinite(x)) {
  289.         throw new TypeError(
  290.             'Invalid value for x-coordinate. ' +
  291.                 'Make sure you are passing finite numbers to <span ' +
  292.                 'class="code">setEndpoint(x, y)</span>. Did you ' +
  293.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  294.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  295.                 'calculation on a variable that is not a number?'
  296.         );
  297.     }
  298.     if (typeof y !== 'number' || !isFinite(y)) {
  299.         throw new TypeError(
  300.             'Invalid value for y-coordinate. ' +
  301.                 'Make sure you are passing finite numbers to <span ' +
  302.                 'class="code">setEndpoint(x, y)</span>. Did you ' +
  303.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  304.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  305.                 'calculation on a variable that is not a number?'
  306.         );
  307.     }
  308.     this.x2 = x;
  309.     this.y2 = y;
  310. };
  312. /**
  313.  * Moves the entire line.
  314.  *
  315.  * @param {number} dx - The change in x coordinate of both starting and ending points.
  316.  * @param {number} dy - The change in y coordinate of both starting and ending points.
  317.  */
  318. Line.prototype.move = function(dx, dy) {
  319.     if (arguments.length !== 2) {
  320.         throw new Error(
  321.             'You should pass exactly 2 arguments to <span ' + 'class="code">move</span>'
  322.         );
  323.     }
  324.     if (typeof dx !== 'number' || !isFinite(dx)) {
  325.         throw new TypeError(
  326.             'Invalid number passed for <span class="code">' +
  327.                 'dx</span>. Make sure you are passing finite numbers to <span ' +
  328.                 'class="code">move(dx, dy)</span>'
  329.         );
  330.     }
  331.     if (typeof dy !== 'number' || !isFinite(dy)) {
  332.         throw new TypeError(
  333.             'Invalid number passed for <span class="code">' +
  334.                 'dy</span>. Make sure you are passing finite numbers to <span ' +
  335.                 'class="code">move(dx, dy)</span>'
  336.         );
  337.     }
  338.     this.x1 += dx;
  339.     this.y1 += dy;
  340.     this.x2 += dx;
  341.     this.y2 += dy;
  342. };
  344. /**
  345.  * Gets the x coordinate of the Line's start point.
  346.  *
  347.  * @returns {number} The x coordinate of the Line's start point.
  348.  */
  349. Line.prototype.getX = function() {
  350.     return this.x1;
  351. };
  353. /**
  354.  * Gets the y coordinate of the Line's start point.
  355.  *
  356.  * @returns {number} The y coordinate of the Line's start point.
  357.  */
  358. Line.prototype.getY = function() {
  359.     return this.y1;
  360. };
  362. /**
  363.  * Gets the x coordinate of the Line's start point.
  364.  *
  365.  * @returns {number} The x coordinate of the Line's start point.
  366.  */
  367. Line.prototype.getStartX = function() {
  368.     return this.x1;
  369. };
  371. /**
  372.  * Gets the y coordinate of the Line's start point.
  373.  *
  374.  * @returns {number} The y coordinate of the Line's start point.
  375.  */
  376. Line.prototype.getStartY = function() {
  377.     return this.y1;
  378. };
  380. /**
  381.  * Gets the x coordinate of the Line's end point.
  382.  *
  383.  * @returns {number} The x coordinate of the Line's end point.
  384.  */
  385. Line.prototype.getEndX = function() {
  386.     return this.x2;
  387. };
  389. /**
  390.  * Gets the y coordinate of the Line's end point.
  391.  *
  392.  * @returns {number} The y coordinate of the Line's end point.
  393.  */
  394. Line.prototype.getEndY = function() {
  395.     return this.y2;
  396. };
  398. module.exports = Line;