Checks an object to see if it is a JavaScript array. Returns a boolean result.
obj
Object
The object to be checked.
console.log(isArray([1, 2, 3, 4, 5])); // true
console.log(isArray({ x: 0, y: 0, width: 100, height: 100 })); // false
function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]' ? true : false;
}
Boolean
Result of the test.
Creates a new Facade.js object with either a preexisting canvas tag or a unique name, width, and height.
canvas
Object|String
Optional
Reference to an HTML canvas element or a unique name.
width
Integer
Optional
Width of the canvas.
height
Integer
Optional
Height of the canvas.
canvas Object
Reference to the canvas element.
context Object
Reference to the CanvasRenderingContext2D object.
dt Integer
Current time in milliseconds since last canvas draw.
fps Integer
Current frames per second.
ftime Integer
Time of last canvas draw.
var stage = new Facade(document.getElementById('stage'));
var stage = new Facade('stage', 500, 300);
function Facade(canvas, width, height) {
if (!(this instanceof Facade)) {
return new Facade(canvas, width, height);
}
if (canvas && typeof canvas === 'object' && canvas.nodeType === 1) {
this.canvas = canvas;
} else {
this.canvas = document.createElement('canvas');
if (typeof canvas === 'string') {
this.canvas.setAttribute('id', canvas);
}
}
if (width && height) {
this.canvas.setAttribute('width', parseInt(width, 10));
this.canvas.setAttribute('height', parseInt(height, 10));
}
try {
this.context = this.canvas.getContext('2d');
} catch (e) {
throw new Error('Parameter passed to Facade.js is not a valid canvas element');
}
this.dt = 0;
this.fps = 0;
this.ftime = null;
this._callback = null;
this._requestAnimation = null;
}
Object
New Facade.js object.
Draws a Facade.js object to the stage. Allows for temporary options to be use while drawing an object.
obj
Object
Facade.js entity object.
options
Object
Optional
Temperary options.
stage.addToStage(circle);
stage.addToStage(circle, { scale: 2 });
Facade.prototype.addToStage = function (obj, options) {
var metrics;
if (!(obj instanceof Facade.Entity)) {
throw new Error('Parameter passed to Facade.addToStage is not a valid Facade.js entity object');
}
if (options) {
options = obj.setOptions(options, true);
metrics = obj._setMetrics(options, true);
} else {
options = obj.getAllOptions();
metrics = obj.getAllMetrics();
}
if (obj.isVisible(this, metrics)) {
this.context.save();
obj._draw.call(obj, this, options, metrics);
this.context.restore();
}
return this;
};
Object
Facade.js object.
Method called by requestAnimationFrame. Sets Facade.dt
and Facade.fps
.
time
Integer
DOMTimeStamp or DOMHighResTimeStamp (Google Chrome Only)
this._requestAnimation = _requestAnimationFrame(this._animate.bind(this));
Facade.prototype._animate = function (time) {
if (typeof this._callback === 'function') {
if (this.ftime) {
this.dt = time - this.ftime;
this.fps = (1000 / this.dt).toFixed(2);
}
this._requestAnimation = _requestAnimationFrame(this._animate.bind(this));
this.ftime = time;
this.context.save();
this._callback.call(this);
this.context.restore();
} else {
this.stop();
}
return this;
};
Object
Facade.js object.
Clears the canvas.
stage.clear();
Facade.prototype.clear = function () {
this.context.clearRect(0, 0, this.width(), this.height());
return this;
};
Object
Facade.js object.
Sets a callback function to run in a loop using requestAnimationFrame.
callback
Function
Function callback.
stage.draw(function () {
this.clear();
this.addToStage(circle, { x: 100, y: 100 });
});
Facade.prototype.draw = function (callback) {
if (typeof callback === 'function') {
this._callback = callback;
this.start();
} else {
throw new Error('Parameter passed to Facade.draw is not a valid function');
}
return this;
};
Object
Facade.js object.
Exports a base64 encoded representation of the current rendered canvas.
type
String
Optional
Image format: image/png
(Default), image/jpeg
, image/webp
(Google Chrome Only)
quality
Integer
Optional
Number between 0 and 100.
console.log(stage.exportBase64('image/png', 100));
Facade.prototype.exportBase64 = function (type, quality) {
if (!type) {
type = 'image/png';
}
if (typeof quality === 'number') {
quality = quality / 100;
} else {
quality = 1;
}
return this.canvas.toDataURL(type, quality);
};
String
Base64 encoded string.
Gets and sets the canvas height.
height
Integer
Optional
Height in pixels.
console.log(stage.height()); // 300
console.log(stage.height(600)); // 600
Facade.prototype.height = function (height) {
if (height) {
this.canvas.setAttribute('height', parseInt(height, 10));
}
return this.canvas.height;
};
Integer
Height in pixels.
Starts the callback supplied in Facade.draw
.
stage.start();
Facade.prototype.start = function () {
this._requestAnimation = _requestAnimationFrame(this._animate.bind(this));
return this;
};
Object
Facade.js object.
Stops the callback supplied in Facade.draw
.
stage.stop();
Facade.prototype.stop = function () {
this.dt = 0;
this.fps = 0;
this.ftime = null;
this._requestAnimation = _cancelAnimationFrame(this._requestAnimation);
return this;
};
Object
Facade.js object.
Gets and sets the canvas width.
width
Integer
Optional
Width in pixels.
console.log(stage.width()); // 400
console.log(stage.width(800)); // 800
Facade.prototype.width = function (width) {
if (width) {
this.canvas.setAttribute('width', parseInt(width, 10));
}
return this.canvas.width;
};
Integer
Width in pixels.
The constructor for all Facade.js shapes, images and text objects.
Facade.Entity = function () { };
False
Returns a default set of options common to all Facade.js entities.
console.log(Facade.Entity.prototype._defaultOptions());
Facade.Entity.prototype._defaultOptions = function () {
return {
x: 0,
y: 0,
shadowBlur: 0,
shadowColor: '#000',
shadowOffsetX: 0,
shadowOffsetY: 0,
anchor: 'top/left',
opacity: 100,
flip: '',
rotate: 0,
scale: 1
};
};
Object
Default set of options.
Returns a default set of metrics common to all Facade.js entities.
console.log(Facade.Entity.prototype._defaultMetrics());
Facade.Entity.prototype._defaultMetrics = function () {
return {
x: null,
y: null,
width: null,
height: null
};
};
Object
Default set of metrics.
Sets options for a given CanvasRenderingContext2D object based on passed options and metrics.
context
Object
A CanvasRenderingContext2D object.
options
Object
An options object based on Facade.Entity._defaultOptions() and the extended key/value pairs through the custom options.
metrics
Object
A metrics object based on Facade.Entity._defaultMetrics() and the extended key/value pairs through the custom metrics.
this._setContext(context, options, metrics);
Facade.Entity.prototype._setContext = function (context, options, metrics) {
var rotate = this._getRotatePoint(options, metrics),
flip_horizontal = options.flip.match(/horizontal/),
flip_vertical = options.flip.match(/vertical/);
context.translate(metrics.x, metrics.y);
if (options.rotate) {
context.translate(rotate[0], rotate[1]);
context.rotate(options.rotate * Math.PI / 180);
context.translate(-rotate[0], -rotate[1]);
}
if (flip_horizontal) {
context.translate(metrics.width, 0);
}
if (flip_vertical) {
context.translate(0, metrics.height);
}
context.scale(options.scale, options.scale);
if (flip_horizontal) {
context.scale(-1, 1);
}
if (flip_vertical) {
context.scale(1, -1);
}
context.globalAlpha = options.opacity / 100;
if (options.fillStyle) {
context.fillStyle = options.fillStyle;
}
if (options.lineCap) {
context.lineCap = options.lineCap;
}
if (options.lineWidth) {
context.lineWidth = options.lineWidth;
context.strokeStyle = options.strokeStyle;
}
if (options.shadowBlur) {
context.shadowBlur = options.shadowBlur;
context.shadowColor = options.shadowColor;
context.shadowOffsetX = options.shadowOffsetX;
context.shadowOffsetY = options.shadowOffsetY;
}
if (options.fontStyle) {
context.font = options.fontStyle + ' ' + options.fontSize + 'px ' + options.fontFamily;
context.textBaseline = options.textBaseline;
}
};
void
Retrives the value of a given option. Only retrieves options set when creating a new Facade.js entity object or setOptions
not through temperary options set through Facade.addToStage
.
key
String
The name of the option.
console.log(text.getOption('value'));
Facade.Entity.prototype.getOption = function (key) {
if (this._options.hasOwnProperty(key)) {
return this._options[key];
}
return undefined;
};
Object
Value of the option requested.
Retrives the value of all options. Only retrieves options set when creating a new Facade.js entity object or setOptions
not through temperary options set through Facade.addToStage
.
console.log(text.getAllOptions());
Facade.Entity.prototype.getAllOptions = function () {
var options = {},
key;
for (key in this._options) {
if (this._options.hasOwnProperty(key)) {
options[key] = this._options[key];
}
}
return options;
};
Object
Object containing all options.
Sets all options for a given object.
updated
Object
The options to update. Does not need to be entire set of options.
test
Boolean
Flag to determine if options are to be saved or not.
console.log(text.setOptions({ value: 'Hello world!', fontFamily: 'Georgia' }));
Facade.Entity.prototype.setOptions = function (updated, test) {
var options = {},
key;
for (key in this._options) {
if (this._options.hasOwnProperty(key)) {
if (updated && updated.hasOwnProperty(key)) {
if (typeof this._options[key] === typeof updated[key]) {
options[key] = updated[key];
if (test !== true) {
this._options[key] = updated[key];
}
} else {
throw new Error('The value for ' + key + ' was a ' + typeof updated[key] + ' not a ' + typeof this._options[key]);
}
} else {
options[key] = this._options[key];
}
}
}
if (test !== true) {
this._setMetrics(options, test);
}
return options;
};
Object
Updated options.
Retrives the value of a given metric. Only retrieves metrics set when creating a new Facade.js entity object or setOptions
not through temperary options set through Facade.addToStage
.
key
String
The name of the metric.
console.log(text.getMetric('width'));
Facade.Entity.prototype.getMetric = function (key) {
if (this._metrics.hasOwnProperty(key)) {
return this._metrics[key];
}
return undefined;
};
Integer
Value of the metric requested.
Retrives the value of all metrics. Only retrieves metrics set when creating a new Facade.js entity object or setOptions
not through temperary options set through Facade.addToStage
.
console.log(text.getAllMetrics());
Facade.Entity.prototype.getAllMetrics = function () {
var metrics = {},
key;
for (key in this._metrics) {
if (this._metrics.hasOwnProperty(key)) {
metrics[key] = this._metrics[key];
}
}
return metrics;
};
Object
Object containing all metrics.
Method used to test if an object is visible on a given canvas. Optional metrics parameter used to test an object with different metrics.
canvas
Object
Facade.js object or canvas element.
metrics
Object
Optional
Optional test metrics.
console.log(box.isVisible(stage.canvas));
console.log(box.isVisible(stage.canvas, { x: 200, y: 200, width: 100, height: 100 }));
Facade.Entity.prototype.isVisible = function (canvas, metrics) {
if (canvas instanceof Facade) {
canvas = canvas.canvas;
}
if (canvas && typeof canvas === 'object' && canvas.nodeType === 1) {
if (typeof metrics === 'undefined') {
metrics = this._metrics;
}
if (metrics.x < canvas.width && metrics.x + metrics.width > 0 && metrics.y < canvas.height && metrics.y + metrics.height > 0) {
return true;
}
} else {
throw new Error('Parameter passed to Facade.Entity.isVisible is not a valid canvas element');
}
return false;
};
Boolean
Result of the test.
Gets the anchor point to draw an object at.
options
Object
Facade.js object options.
metrics
Object
Facade.js object metrics.
var anchor = this._getAnchorPoint(options, metrics);
Facade.Entity.prototype._getAnchorPoint = function (options, metrics) {
var x = options.x,
y = options.y;
if (options.anchor.match(/^center/)) {
y = options.y - (metrics.height / 2);
} else if (options.anchor.match(/^bottom/)) {
y = options.y - metrics.height;
}
if (options.anchor.match(/center$/)) {
x = options.x - (metrics.width / 2);
} else if (options.anchor.match(/right$/)) {
x = options.x - metrics.width;
}
return [ x, y ];
};
Object
Array with x and y coordinates.
Gets the anchor point to rotate an object at.
options
Object
Facade.js object options.
metrics
Object
Facade.js object metrics.
var rotate = this._getRotatePoint(options, metrics);
Facade.Entity.prototype._getRotatePoint = function (options, metrics) {
var x = 0,
y = 0;
if (options.anchor.match(/^center/)) {
y = metrics.height / 2;
} else if (options.anchor.match(/^bottom/)) {
y = metrics.height;
}
if (options.anchor.match(/center$/)) {
x = metrics.width / 2;
} else if (options.anchor.match(/right$/)) {
x = metrics.width;
}
return [ x, y ];
};
Object
Array with x and y coordinates.
Create a circle object. Inherits all methods from Facade.Entity.
options
Object
Optional
Options to create the circle with.
x
Integer
Optional
X coordinate to begin drawing an object. Default: 0
y
Integer
Optional
Y coordinate to begin drawing an object. Default: 0
shadowBlur
Integer
Optional
Blur level for drop shadow. Default: 0
shadowColor
String
Optional
Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"
shadowOffsetX
Integer
Optional
X offset of drop shadow. Default: 0
shadowOffsetY
Integer
Optional
Y offset of drop shadow. Default: 0
anchor
String
Optional
Position to anchor the object. Default: "top/left"
opacity
Integer
Optional
Opacity of the object. Integer between 0 and 100. Default: 100
flip
String
Optional
Direction to flip the object. Can be either one or both of the following options. Delimited by a /
. Default: ""
rotate
Integer
Optional
Degrees to rotate the object. Default: 0
scale
Integer
Optional
Scaling of the object. A float starting at 1. Default: 1
radius
Integer
Optional
Radius of the circle. Default: 10
start
Integer
Optional
Degree at which the circle begins. Default: 0
end
Integer
Optional
Degree at which the circle ends. Default: 360
counterclockwise
Boolean
Optional
Determines if the circle will be drawn in a counter clockwise direction. Default: false
fillStyle
String
Optional
Fill color for the object. Default: "#000"
strokeStyle
String
Optional
Color of an object's stroke. Default: "#000"
strokePosition
String
Optional
Position to draw the stroke. Default: "default"
lineWidth
Integer
Optional
Width of the stroke. Default: 0
lineCap
String
Optional
The style of line cap (end of line). Default: "butt"
var circle = new Facade.Circle({ x: 250, y: 250, radius: 50, anchor: 'center' });
Facade.Circle = function (options) {
if (!(this instanceof Facade.Circle)) {
return new Facade.Circle(options);
}
this._options = this._defaultOptions();
this._metrics = this._defaultMetrics();
this._options.radius = 10;
this._options.start = 0;
this._options.end = 360;
this._options.counterclockwise = false;
this._options.fillStyle = '#000';
this._options.strokeStyle = '#000';
this._options.strokePosition = 'default';
this._options.lineWidth = 0;
this._options.lineCap = 'butt';
this.setOptions(options);
};
Object
Reference to the new Facade.js circle object.
Renders the circle on the specified Facade.js canvas with the custom options and metrics.
facade
Object
Facade.js object.
options
Object
The options to render the circle with.
metrics
Object
The metrics to render the circle with.
circle._draw(stage, circle.getAllOptions(), circle.getAllMetrics());
Facade.Circle.prototype._draw = function (facade, options, metrics) {
var context = facade.context,
strokeOffset = 0;
this._setContext(context, options, metrics);
context.beginPath();
context.arc(
0,
0,
options.radius,
options.start * Math.PI / 180,
options.end * Math.PI / 180,
options.counterclockwise
);
if (options.fillStyle) {
context.fill();
}
if (options.strokePosition.match(/(in|out)set/)) {
if (options.strokePosition === 'inset') {
strokeOffset = -(options.lineWidth / 2);
} else if (options.strokePosition === 'outset') {
strokeOffset = (options.lineWidth / 2);
}
context.closePath();
context.beginPath();
context.arc(
0,
0,
options.radius + strokeOffset,
options.start * Math.PI / 180,
options.end * Math.PI / 180,
options.counterclockwise
);
}
if (options.lineWidth) {
context.stroke();
}
context.closePath();
};
void
Sets the metrics of the circle based on supplied options.
options
Object
Options to set the metrics with.
test
Boolean
Optional
Flag to determine if metrics are saved or not.
console.log(circle._setMetrics(circle.getAllOptions()));
Facade.Circle.prototype._setMetrics = function (options, test) {
var metrics = this.getAllMetrics(),
anchor,
strokeWidth = 0;
if (options.strokePosition === 'default') {
strokeWidth = options.lineWidth / 2;
} else if (options.strokePosition === 'outset') {
strokeWidth = options.lineWidth;
}
metrics.width = ((options.radius + strokeWidth) * 2) * options.scale;
metrics.height = ((options.radius + strokeWidth) * 2) * options.scale;
anchor = this._getAnchorPoint(options, metrics);
metrics.x = anchor[0] + ((options.radius + strokeWidth) * options.scale);
metrics.y = anchor[1] + ((options.radius + strokeWidth) * options.scale);
if (test !== true) {
this._metrics = metrics;
}
return metrics;
};
Object
Updated metrics.
Create an image object. Inherits all methods from Facade.Entity.
source
Object|String
Local image file or reference to an HTML image tag.
options
Object
Optional
Options to create the image with.
image Object
Reference to the image element.
currentFrame Integer
Current frame of sprite animation.
isAnimating Boolean
Boolean state of sprite animation.
x
Integer
Optional
X coordinate to begin drawing an object. Default: 0
y
Integer
Optional
Y coordinate to begin drawing an object. Default: 0
shadowBlur
Integer
Optional
Blur level for drop shadow. Default: 0
shadowColor
String
Optional
Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"
shadowOffsetX
Integer
Optional
X offset of drop shadow. Default: 0
shadowOffsetY
Integer
Optional
Y offset of drop shadow. Default: 0
anchor
String
Optional
Position to anchor the object. Default: "top/left"
opacity
Integer
Optional
Opacity of the object. Integer between 0 and 100. Default: 100
flip
String
Optional
Direction to flip the object. Can be either one or both of the following options. Delimited by a /
. Default: ""
rotate
Integer
Optional
Degrees to rotate the object. Default: 0
scale
Integer
Optional
Scaling of the object. A float starting at 1. Default: 1
width
Integer
Optional
Width of the object. Default: 0
height
Integer
Optional
Height of the object. Default: 0
offsetX
Integer
Optional
X coordinate within the image where rendering begins. Default: 0
offsetY
Integer
Optional
Y coordinate within the image where rendering begins. Default: 0
tileX
Integer
Optional
Number of times to tile the image horizontally. Default: 1
tileY
Integer
Optional
Number of times to tile the image vertically. Default: 1
frames
Array
Optional
Array of frames for sprite animation. Default: []
speed
Integer
Optional
Speed of sprite animation. Default: 120
loop
Boolean
Optional
Determines if the animation should loop. Default: true
callback
Function
Optional
Function called for every frame of a sprite animation. Default: `function (frame) { };`
var image = new Facade.Image('images/player.png', { width: 50, height: 90, anchor: 'bottom/center' });
Facade.Image = function (source, options) {
if (typeof source === 'undefined') {
throw new Error('Required parameter "source" missing from Facade.Image call');
}
if (!(this instanceof Facade.Image)) {
return new Facade.Image(source, options);
}
this._options = this._defaultOptions();
this._metrics = this._defaultMetrics();
this._options.width = 0;
this._options.height = 0;
this._options.offsetX = 0;
this._options.offsetY = 0;
this._options.tileX = 1;
this._options.tileY = 1;
this._options.frames = [];
this._options.speed = 120;
this._options.loop = true;
this._options.callback = function (frame) { };
this.image = this.load(source);
this.currentFrame = 0;
this.isAnimating = false;
this.setOptions(options);
};
Object
Reference to the new Facade.js image object.
Starts an image sprite animation.
image.play();
Facade.Image.prototype.play = function () {
this.isAnimating = true;
return this;
};
Object
Facade.js image object.
Pauses an image sprite animation.
image.pause();
Facade.Image.prototype.pause = function () {
this.isAnimating = false;
return this;
};
Object
Facade.js image object.
Resets an image sprite animation.
image.reset();
Facade.Image.prototype.reset = function () {
this.currentFrame = 0;
return this;
};
Object
Facade.js image object.
Stops and resets an image sprite animation.
image.stop();
Facade.Image.prototype.stop = function () {
this.currentFrame = 0;
this.isAnimating = false;
return this;
};
Object
Facade.js image object.
Loads an image into a Facade.js image object.
source
Object|String
Local image file or reference to an HTML image element.
image.load('image/tiles.png');
image.load(document.getElementById('avatar'));
Facade.Image.prototype.load = function (source) {
var image;
if (typeof source === 'object' && source.nodeType === 1) {
image = source;
if (image.complete) {
this._setMetrics.call(this, this._options);
} else {
image.addEventListener('load', this._setMetrics.bind(this, this._options));
}
} else {
image = document.createElement('img');
image.setAttribute('src', source);
image.addEventListener('load', this._setMetrics.bind(this, this._options));
}
return image;
};
Object
Reference to the HTML image element.
Renders the image on the specified Facade.js canvas with the custom options and metrics.
facade
Object
Facade.js object.
options
Object
The options to render the image with.
metrics
Object
The metrics to render the image with.
image._draw(stage, image.getAllOptions(), image.getAllMetrics());
Facade.Image.prototype._draw = function (facade, options, metrics) {
var context = facade.context,
currentOffsetX = 0,
x = 0,
y = 0;
if (this.image.complete) {
this._setContext(context, options, metrics);
if (options.frames.length) {
currentOffsetX = options.frames[this.currentFrame] || 0;
}
for (x = 0; x < options.tileX; x += 1) {
for (y = 0; y < options.tileY; y += 1) {
context.drawImage(
this.image,
(options.width * currentOffsetX) + options.offsetX,
options.offsetY,
options.width,
options.height,
options.width * x,
options.height * y,
options.width,
options.height
);
}
}
if (this.isAnimating && options.frames.length) {
if (!this.ftime) {
this.ftime = facade.ftime;
if (typeof options.callback === 'function') {
options.callback.call(this, options.frames[this.currentFrame]);
}
}
if (facade.ftime - this.ftime >= options.speed) {
this.ftime = facade.ftime;
this.currentFrame += 1;
if (this.currentFrame >= options.frames.length) {
if (options.loop) {
this.currentFrame = 0;
} else {
this.currentFrame = options.frames.length - 1;
this.isAnimating = false;
}
}
if (typeof options.callback === 'function') {
options.callback.call(this, options.frames[this.currentFrame]);
}
}
}
}
};
void
Sets the metrics of the image based on supplied options.
options
Object
Options to set the metrics with.
test
Boolean
Flag to determine if metrics are saved or not.
console.log(image._setMetrics(image.getAllOptions()));
Facade.Image.prototype._setMetrics = function (options, test) {
var metrics = this.getAllMetrics(),
anchor;
if (this.image.complete) {
options.width = options.width || this.image.width;
options.height = options.height || this.image.height;
metrics.width = (options.width * options.tileX) * options.scale;
metrics.height = (options.height * options.tileY) * options.scale;
anchor = this._getAnchorPoint(options, metrics);
metrics.x = anchor[0];
metrics.y = anchor[1];
if (test !== true) {
this._metrics = metrics;
}
return metrics;
}
};
Object
Updated metrics.
Create a line object. Inherits all methods from Facade.Entity.
options
Object
Options to create the line with.
x
Integer
Optional
X coordinate to begin drawing an object. Default: 0
y
Integer
Optional
Y coordinate to begin drawing an object. Default: 0
shadowBlur
Integer
Optional
Blur level for drop shadow. Default: 0
shadowColor
String
Optional
Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"
shadowOffsetX
Integer
Optional
X offset of drop shadow. Default: 0
shadowOffsetY
Integer
Optional
Y offset of drop shadow. Default: 0
anchor
String
Optional
Position to anchor the object. Default: "top/left"
opacity
Integer
Optional
Opacity of the object. Integer between 0 and 100. Default: 100
flip
String
Optional
Direction to flip the object. Can be either one or both of the following options. Delimited by a /
. Default: ""
rotate
Integer
Optional
Degrees to rotate the object. Default: 0
scale
Integer
Optional
Scaling of the object. A float starting at 1. Default: 1
startX
Integer
Optional
X coordinate where line starts. Default: 0
startY
Integer
Optional
Y coordinate where line starts. Default: 0
endX
Integer
Optional
X coordinate where line ends. Default: 0
endY
Integer
Optional
Y coordinate where line ends. Default: 0
strokeStyle
String
Optional
Color of an object's stroke. Default: "#000"
lineWidth
Integer
Optional
Width of the stroke. Default: 0
lineCap
String
Optional
The style of line cap (end of line). Default: "butt"
var line = new Facade.Line({ x: 250, y: 250, startX: 250, startY: 0, endX: 250, endY: 250, lineWidth: 1, anchor: 'center' });
Facade.Line = function (options) {
if (!(this instanceof Facade.Line)) {
return new Facade.Line(options);
}
this._options = this._defaultOptions();
this._metrics = this._defaultMetrics();
this._options.startX = 0;
this._options.startY = 0;
this._options.endX = 0;
this._options.endY = 0;
this._options.strokeStyle = '#000';
this._options.lineWidth = 0;
this._options.lineCap = 'butt';
this.setOptions(options);
};
Object
Reference to the new Facade.js line object.
Renders the line on the specified Facade.js canvas with the custom options and metrics.
facade
Object
Facade.js object.
options
Object
The options to render the line with.
metrics
Object
The metrics to render the line with.
line._draw(stage, line.getAllOptions(), line.getAllMetrics());
Facade.Line.prototype._draw = function (facade, options, metrics) {
var context = facade.context;
this._setContext(context, options, metrics);
context.beginPath();
context.moveTo(0, 0);
context.lineTo(
options.endX - options.startX,
options.endY - options.startY
);
context.stroke();
context.closePath();
};
void
Sets the metrics of the line based on supplied options.
options
Object
Options to set the metrics with.
test
Boolean
Optional
Flag to determine if metrics are saved or not.
console.log(line._setMetrics(line.getAllOptions()));
Facade.Line.prototype._setMetrics = function (options, test) {
var metrics = this.getAllMetrics(),
anchor;
metrics.width = Math.abs(options.endX - options.startX) * options.scale;
metrics.height = Math.abs(options.endY - options.startY) * options.scale;
anchor = this._getAnchorPoint(options, metrics);
metrics.x = anchor[0];
metrics.y = anchor[1];
if (test !== true) {
this._metrics = metrics;
}
return metrics;
};
Object
Updated metrics.
Create a rectangle object. Inherits all methods from Facade.Entity.
options
Object
Options to create the rectangle with.
x
Integer
Optional
X coordinate to begin drawing an object. Default: 0
y
Integer
Optional
Y coordinate to begin drawing an object. Default: 0
shadowBlur
Integer
Optional
Blur level for drop shadow. Default: 0
shadowColor
String
Optional
Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"
shadowOffsetX
Integer
Optional
X offset of drop shadow. Default: 0
shadowOffsetY
Integer
Optional
Y offset of drop shadow. Default: 0
anchor
String
Optional
Position to anchor the object. Default: "top/left"
opacity
Integer
Optional
Opacity of the object. Integer between 0 and 100. Default: 100
flip
String
Optional
Direction to flip the object. Can be either one or both of the following options. Delimited by a /
. Default: ""
rotate
Integer
Optional
Degrees to rotate the object. Default: 0
scale
Integer
Optional
Scaling of the object. A float starting at 1. Default: 1
width
Integer
Optional
Width of the object. Default: 100
height
Integer
Optional
Height of the object. Default: 100
fillStyle
String
Optional
Fill color for the object. Default: "#000"
strokeStyle
String
Optional
Color of an object's stroke. Default: "#000"
strokePosition
String
Optional
Position to draw the stroke. Default: "default"
lineWidth
Integer
Optional
Width of the stroke. Default: 0
borderRadius
Integer
Optional
Radius of the rectangle's corners. Default: 0
var rect = new Facade.Rect({ width: 100, height: 100, fillStyle: '#f00' });
Facade.Rect = function (options) {
if (!(this instanceof Facade.Rect)) {
return new Facade.Rect(options);
}
this._options = this._defaultOptions();
this._metrics = this._defaultMetrics();
this._options.width = 100;
this._options.height = 100;
this._options.fillStyle = '#000';
this._options.strokeStyle = '#000';
this._options.strokePosition = 'default';
this._options.lineWidth = 0;
this._options.borderRadius = 0;
this.setOptions(options);
};
Object
Reference to the new Facade.js rectangle object.
Renders the rectangle on the specified Facade.js canvas with the custom options and metrics.
facade
Object
Facade.js object.
options
Object
The options to render the rectangle with.
metrics
Object
The metrics to render the rectangle with.
rect._draw(stage, rect.getAllOptions(), rect.getAllMetrics());
Facade.Rect.prototype._draw = function (facade, options, metrics) {
var context = facade.context,
borderRadius;
this._setContext(context, options, metrics);
context.beginPath();
if (options.borderRadius) {
borderRadius = Math.min(
options.borderRadius,
options.height / 2,
options.width / 2
);
context.moveTo(borderRadius, 0);
context.arc(
options.width - borderRadius,
borderRadius,
borderRadius,
Math.PI * 1.5,
0
);
context.arc(
options.width - borderRadius,
options.height - borderRadius,
borderRadius,
0,
Math.PI * 0.5
);
context.arc(
borderRadius,
options.height - borderRadius,
borderRadius,
Math.PI * 0.5,
Math.PI
);
context.arc(
borderRadius,
borderRadius,
borderRadius,
Math.PI,
Math.PI * 1.5
);
if (options.fillStyle) {
context.fill();
}
if (options.lineWidth) {
context.stroke();
}
} else {
if (options.fillStyle) {
context.fillRect(0, 0, options.width, options.height);
}
if (options.lineWidth) {
if (options.strokePosition === 'inset') {
context.strokeRect(options.lineWidth / 2, options.lineWidth / 2, options.width - options.lineWidth, options.height - options.lineWidth);
} else if (options.strokePosition === 'outset') {
context.strokeRect(-options.lineWidth / 2, -options.lineWidth / 2, options.width + options.lineWidth, options.height + options.lineWidth);
} else {
context.strokeRect(0, 0, options.width, options.height);
}
}
}
context.closePath();
};
void
Sets the metrics of the rectangle based on supplied options.
options
Object
Options to set the metrics with.
test
Boolean
Flag to determine if metrics are saved or not.
console.log(rect._setMetrics(rect.getAllOptions()));
Facade.Rect.prototype._setMetrics = function (options, test) {
var metrics = this.getAllMetrics(),
anchor,
strokeWidth = 0;
if (options.strokePosition === 'default') {
strokeWidth = options.lineWidth / 2;
} else if (options.strokePosition === 'outset') {
strokeWidth = options.lineWidth;
}
metrics.width = (options.width + (strokeWidth * 2)) * options.scale;
metrics.height = (options.height + (strokeWidth * 2)) * options.scale;
anchor = this._getAnchorPoint(options, metrics);
metrics.x = anchor[0] + (strokeWidth * options.scale);
metrics.y = anchor[1] + (strokeWidth * options.scale);
if (test !== true) {
this._metrics = metrics;
}
return metrics;
};
Object
Updated metrics.
Create a text object. Inherits all methods from Facade.Entity.
options
Object
Options to create the text with.
x
Integer
Optional
X coordinate to begin drawing an object. Default: 0
y
Integer
Optional
Y coordinate to begin drawing an object. Default: 0
shadowBlur
Integer
Optional
Blur level for drop shadow. Default: 0
shadowColor
String
Optional
Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"
shadowOffsetX
Integer
Optional
X offset of drop shadow. Default: 0
shadowOffsetY
Integer
Optional
Y offset of drop shadow. Default: 0
anchor
String
Optional
Position to anchor the object. Default: "top/left"
opacity
Integer
Optional
Opacity of the object. Integer between 0 and 100. Default: 100
flip
String
Optional
Direction to flip the object. Can be either one or both of the following options. Delimited by a /
. Default: ""
rotate
Integer
Optional
Degrees to rotate the object. Default: 0
scale
Integer
Optional
Scaling of the object. A float starting at 1. Default: 1
width
Integer
Optional
Width of the object.
value
String
Optional
Value of the text object.
fontFamily
String
Optional
Sets the font family of the text. Only one font can be specified at a time. Default: "Arial"
fontSize
Integer
Optional
Font size in pixels. Default: 30
fontStyle
String
Optional
Font style of the text. Default: "normal"
lineHeight
String
Optional
Line height of the text drawn on multiple lines. New lines are delimited with \n
. Default: Inherits from fontSize
textAlign
String
Optional
Horizontal alignment of the text. Default: "left"
textBaseline
String
Optional
Baseline to set the vertical alignment of the text drawn. Default: "top"
fillStyle
String
Optional
Fill color for the object. Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"
strokeStyle
String
Optional
Color of an object's stroke. Can be a text representation of a color, a HEX value or RBG(A). Default: "#000"
lineWidth
Integer
Optional
Width of the stroke. Default: 0
var text = new Facade.Text({ value: 'Hello World!', x: 250, y: 250, anchor: 'center' });
Facade.Text = function (options) {
if (!(this instanceof Facade.Text)) {
return new Facade.Text(options);
}
this._options = this._defaultOptions();
this._metrics = this._defaultMetrics();
this._options.width = 0;
this._options.value = '';
this._options.fontFamily = 'Arial';
this._options.fontSize = 30;
this._options.fontStyle = 'normal';
this._options.lineHeight = 0;
this._options.textAlign = 'left';
this._options.textBaseline = 'top';
this._options.fillStyle = '#000';
this._options.strokeStyle = '#000';
this._options.lineWidth = 0;
this.setOptions(options);
};
Object
Reference to the new Facade.js text object.
Renders the text on the specified Facade.js canvas with the custom options and metrics.
facade
Object
Facade.js object.
options
Object
The options to render the text with.
metrics
Object
The metrics to render the text with.
text._draw(stage, text.getAllOptions(), text.getAllMetrics());
Facade.Text.prototype._draw = function (facade, options, metrics) {
var context = facade.context,
offsetX = 0,
line,
length;
this._setContext(context, options, metrics);
if (!isArray(options.value)) {
options.value = options.value.split(/[ ]*\n[ ]*/);
}
if (!options.lineHeight) {
options.lineHeight = options.fontSize;
}
for (line = 0, length = options.value.length; line < length; line += 1) {
if (options.textAlign === 'center') {
offsetX = (options.width - context.measureText(options.value[line]).width) / 2;
} else if (options.textAlign === 'right') {
offsetX = options.width - context.measureText(options.value[line]).width;
}
if (options.fillStyle) {
context.fillText(options.value[line], offsetX, line * options.lineHeight);
}
if (options.lineWidth) {
context.strokeText(options.value[line], offsetX, line * options.lineHeight);
}
}
};
void
Sets the metrics of the text based on supplied options.
options
Object
Options to set the metrics with.
test
Boolean
Optional
Flag to determine if metrics are saved or not.
console.log(text._setMetrics(text.getAllOptions()));
Facade.Text.prototype._setMetrics = function (options, test) {
var metrics = this.getAllMetrics(),
anchor,
line,
length;
_context.font = options.fontStyle + ' ' + options.fontSize + 'px ' + options.fontFamily;
if (!isArray(options.value)) {
options.value = options.value.split(/[ ]*\n[ ]*/);
}
if (!options.lineHeight) {
options.lineHeight = options.fontSize;
}
for (line = 0, length = options.value.length; line < length; line += 1) {
options.width = Math.max(options.width, _context.measureText(options.value[line]).width);
}
metrics.width = options.width * options.scale;
metrics.height = (length * options.lineHeight) * options.scale;
anchor = this._getAnchorPoint(options, metrics);
metrics.x = anchor[0];
metrics.y = anchor[1];
if (test !== true) {
this._metrics = metrics;
}
return metrics;
};
Object
Updated metrics.