graphics/rectangle.js

  1. 'use strict';
  3. var Thing = require('./thing.js');
  5. /**
  6.  * @class Rectangle
  7.  * @augments Thing
  8.  * @param {number} width - Desired width of resulting rectangle.
  9.  * @param {number} height - Desired height of resulting rectangle.
  10.  */
  11. function Rectangle(width, height) {
  12.     if (arguments.length !== 2) {
  13.         throw new Error(
  14.             'You should pass exactly 2 arguments to <span ' +
  15.                 'class="code">new Rectangle(width, height)</span>'
  16.         );
  17.     }
  18.     if (typeof width !== 'number' || !isFinite(width)) {
  19.         throw new TypeError(
  20.             'Invalid value for <span class="code">width' +
  21.                 '</span>. Make sure you are passing finite numbers to <span ' +
  22.                 'class="code">new Rectangle(width, height)</span>. Did you ' +
  23.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  24.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  25.                 'calculation on a variable that is not a number?'
  26.         );
  27.     }
  28.     if (typeof height !== 'number' || !isFinite(height)) {
  29.         throw new TypeError(
  30.             'Invalid value for <span class="code">height' +
  31.                 '</span>. Make sure you are passing finite numbers to <span ' +
  32.                 'class="code">new Rectangle(width, height)</span>. Did you ' +
  33.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  34.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  35.                 'calculation on a variable that is not a number?'
  36.         );
  37.     }
  38.     Thing.call(this);
  39.     this.width = Math.max(0, width);
  40.     this.height = Math.max(0, height);
  41.     this.type = 'Rectangle';
  42. }
  44. Rectangle.prototype = new Thing();
  45. Rectangle.prototype.constructor = Rectangle;
  47. /**
  48.  * Draws the rectangle in the canvas.
  49.  *
  50.  * @param {CodeHSGraphics} __graphics__ - Instance of the __graphics__ module.
  51.  */
  52. Rectangle.prototype.draw = function(__graphics__) {
  53.     var context = __graphics__.getContext();
  55.     // http://stackoverflow.com/questions/17125632/html5-canvas-rotate-object-without-moving-coordinates
  56.     context.save();
  57.     context.fillStyle = this.color.toString();
  59.     if (this.hasBorder) {
  60.         context.lineWidth = this.lineWidth;
  61.         context.strokeStyle = this.stroke.toString();
  62.     }
  64.     context.beginPath();
  65.     context.translate(this.x + this.width / 2, this.y + this.height / 2);
  66.     context.rotate(this.rotation);
  67.     // Note: after transforming [0,0] is visually [x,y]
  68.     // so the rect needs to be offset accordingly when drawn
  69.     context.rect(-this.width / 2, -this.height / 2, this.width, this.height);
  70.     context.closePath();
  72.     if (this.hasBorder) {
  73.         context.stroke();
  74.     }
  76.     context.fill();
  77.     context.restore();
  78. };
  80. /**
  81.  * Sets the size of the Rectangle.
  82.  *
  83.  * @param {number} width - The desired width of the resulting Rectangle.
  84.  * @param {number} height - The desired height of the resulting Rectangle.
  85.  */
  86. Rectangle.prototype.setSize = function(width, height) {
  87.     if (arguments.length !== 2) {
  88.         throw new Error(
  89.             'You should pass exactly 2 arguments to <span ' +
  90.                 'class="code">setSize(width, height)</span>'
  91.         );
  92.     }
  93.     if (typeof width !== 'number' || !isFinite(width)) {
  94.         throw new TypeError(
  95.             'Invalid value for <span class="code">width' +
  96.                 '</span>. Make sure you are passing finite numbers to <span ' +
  97.                 'class="code">setSize(width, height)</span>. Did you ' +
  98.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  99.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  100.                 'calculation on a variable that is not a number?'
  101.         );
  102.     }
  103.     if (typeof height !== 'number' || !isFinite(height)) {
  104.         throw new TypeError(
  105.             'Invalid value for <span class="code">height' +
  106.                 '</span>. Make sure you are passing finite numbers to <span ' +
  107.                 'class="code">setSize(width, height)</span>. Did you ' +
  108.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  109.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  110.                 'calculation on a variable that is not a number?'
  111.         );
  112.     }
  113.     this.width = Math.max(0, width);
  114.     this.height = Math.max(0, height);
  115. };
  117. /**
  118.  * Sets the width of the Rectangle.
  119.  *
  120.  * @param {number} width - The desired width of the resulting Rectangle.
  121.  */
  122. Rectangle.prototype.setWidth = function(width) {
  123.     if (arguments.length !== 1) {
  124.         throw new Error(
  125.             'You should pass exactly 1 argument to <span class="code">setWidth(width)</span>'
  126.         );
  127.     }
  128.     if (typeof width !== 'number' || !isFinite(width)) {
  129.         throw new TypeError(
  130.             'Invalid value for <span class="code">width' +
  131.                 '</span>. Make sure you are passing finite numbers to <span ' +
  132.                 'class="code">setWidth(width)</span>. Did you ' +
  133.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  134.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  135.                 'calculation on a variable that is not a number?'
  136.         );
  137.     }
  138.     this.width = Math.max(0, width);
  139. };
  141. /**
  142.  * Sets the height of the Rectangle.
  143.  *
  144.  * @param {number} height - The desired height of the resulting Rectangle.
  145.  */
  146. Rectangle.prototype.setHeight = function(height) {
  147.     if (arguments.length !== 1) {
  148.         throw new Error(
  149.             'You should pass exactly 1 argument to <span class="code">setHeight(height)</span>'
  150.         );
  151.     }
  152.     if (typeof height !== 'number' || !isFinite(height)) {
  153.         throw new TypeError(
  154.             'Invalid value for <span class="code">height' +
  155.                 '</span>. Make sure you are passing finite numbers to <span ' +
  156.                 'class="code">setHeight(height)</span>. Did you ' +
  157.                 'forget the parentheses in <span class="code">getWidth()</span> ' +
  158.                 'or <span class="code">getHeight()</span>? Or did you perform a ' +
  159.                 'calculation on a variable that is not a number?'
  160.         );
  161.     }
  162.     this.height = Math.max(0, height);
  163. };
  165. /**
  166.  * Checks if the passed point is contained in the rectangle.
  167.  *
  168.  * @param {number} x - The x coordinate of the point being tested.
  169.  * @param {number} y - The y coordinate of the point being tested.
  170.  * @returns {boolean} Whether the passed point is contained in the rectangle.
  171.  */
  172. Rectangle.prototype.containsPoint = function(x, y) {
  173.     return x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + this.height;
  174. };
  176. /**
  177.  * Gets the width of the rectangle.
  178.  *
  179.  * @returns {number} Width of the rectangle.
  180.  */
  181. Rectangle.prototype.getWidth = function() {
  182.     return this.width;
  183. };
  185. /**
  186.  * Gets the height of the rectangle.
  187.  *
  188.  * @returns {number} Height of the rectangle.
  189.  */
  190. Rectangle.prototype.getHeight = function() {
  191.     return this.height;
  192. };
  194. module.exports = Rectangle;