2013-08-09 16:47:08 +00:00
|
|
|
/// <reference path="../_definitions.ts" />
|
|
|
|
|
|
|
|
/**
|
2013-08-11 23:52:35 +00:00
|
|
|
* @author Richard Davey <rich@photonstorm.com>
|
|
|
|
* @copyright 2013 Photon Storm Ltd.
|
|
|
|
* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License
|
|
|
|
* @module Phaser
|
2013-08-09 16:47:08 +00:00
|
|
|
*/
|
|
|
|
module Phaser {
|
|
|
|
|
2013-08-11 23:52:35 +00:00
|
|
|
/**
|
|
|
|
* A collection of methods useful for manipulating canvas objects.
|
|
|
|
*
|
|
|
|
* @class CanvasUtils
|
|
|
|
*/
|
2013-08-09 16:47:08 +00:00
|
|
|
export class CanvasUtils {
|
|
|
|
|
2013-08-11 23:52:35 +00:00
|
|
|
/**
|
|
|
|
* Returns the aspect ratio of the given canvas.
|
|
|
|
*
|
|
|
|
* @method getAspectRatio
|
|
|
|
* @param {HTMLCanvasElement} canvas The canvas to get the aspect ratio from.
|
|
|
|
* @return {Number} Returns true on success
|
|
|
|
*/
|
2013-08-09 16:47:08 +00:00
|
|
|
public static getAspectRatio(canvas: HTMLCanvasElement): number {
|
|
|
|
return canvas.width / canvas.height;
|
|
|
|
}
|
|
|
|
|
2013-08-11 23:52:35 +00:00
|
|
|
/**
|
|
|
|
* Sets the background color behind the canvas. This changes the canvas style property.
|
|
|
|
*
|
|
|
|
* @method setBackgroundColor
|
|
|
|
* @param {HTMLCanvasElement} canvas The canvas to set the background color on.
|
|
|
|
* @param {String} color The color to set. Can be in the format 'rgb(r,g,b)', or '#RRGGBB' or any valid CSS color.
|
|
|
|
* @return {HTMLCanvasElement} Returns the source canvas.
|
|
|
|
*/
|
2013-08-09 16:47:08 +00:00
|
|
|
public static setBackgroundColor(canvas: HTMLCanvasElement, color: string = 'rgb(0,0,0)'): HTMLCanvasElement {
|
|
|
|
|
|
|
|
canvas.style.backgroundColor = color;
|
|
|
|
return canvas;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-08-11 23:52:35 +00:00
|
|
|
/**
|
|
|
|
* Sets the touch-action property on the canvas style. Can be used to disable default browser touch actions.
|
|
|
|
*
|
|
|
|
* @method setTouchAction
|
|
|
|
* @param {HTMLCanvasElement} canvas The canvas to set the touch action on.
|
|
|
|
* @param {String} value The touch action to set. Defaults to 'none'.
|
|
|
|
* @return {HTMLCanvasElement} Returns the source canvas.
|
|
|
|
*/
|
2013-08-09 16:47:08 +00:00
|
|
|
public static setTouchAction(canvas: HTMLCanvasElement, value: string= 'none'): HTMLCanvasElement {
|
|
|
|
|
|
|
|
canvas.style.msTouchAction = value;
|
|
|
|
canvas.style['ms-touch-action'] = value;
|
|
|
|
canvas.style['touch-action'] = value;
|
|
|
|
|
|
|
|
return canvas;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-08-11 23:52:35 +00:00
|
|
|
/**
|
|
|
|
* Adds the given canvas element to the DOM. The canvas will be added as a child of the given parent.
|
|
|
|
* If no parent is given it will be added as a child of the document.body.
|
|
|
|
*
|
|
|
|
* @method addToDOM
|
|
|
|
* @param {HTMLCanvasElement} canvas The canvas to set the touch action on.
|
|
|
|
* @param {String} parent The DOM element to add the canvas to. Defaults to ''.
|
2013-08-13 03:22:24 +00:00
|
|
|
* @param {bool} overflowHidden If set to true it will add the overflow='hidden' style to the parent DOM element.
|
2013-08-11 23:52:35 +00:00
|
|
|
* @return {HTMLCanvasElement} Returns the source canvas.
|
|
|
|
*/
|
2013-08-13 03:22:24 +00:00
|
|
|
public static addToDOM(canvas: HTMLCanvasElement, parent: string = '', overflowHidden: bool = true): HTMLCanvasElement {
|
2013-08-09 16:47:08 +00:00
|
|
|
|
|
|
|
if ((parent !== '' || parent !== null) && document.getElementById(parent))
|
|
|
|
{
|
|
|
|
document.getElementById(parent).appendChild(canvas);
|
|
|
|
|
|
|
|
if (overflowHidden)
|
|
|
|
{
|
|
|
|
document.getElementById(parent).style.overflow = 'hidden';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
document.body.appendChild(canvas);
|
|
|
|
}
|
|
|
|
|
|
|
|
return canvas;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-08-11 23:52:35 +00:00
|
|
|
/**
|
|
|
|
* Sets the transform of the given canvas to the matrix values provided.
|
|
|
|
*
|
|
|
|
* @method setTransform
|
|
|
|
* @param {CanvasRenderingContext2D} context The context to set the transform on.
|
|
|
|
* @param {Number} translateX The value to translate horizontally by.
|
|
|
|
* @param {Number} translateY The value to translate vertically by.
|
|
|
|
* @param {Number} scaleX The value to scale horizontally by.
|
|
|
|
* @param {Number} scaleY The value to scale vertically by.
|
|
|
|
* @param {Number} skewX The value to skew horizontaly by.
|
|
|
|
* @param {Number} skewY The value to skew vertically by.
|
|
|
|
* @return {CanvasRenderingContext2D} Returns the source context.
|
|
|
|
*/
|
2013-08-09 16:47:08 +00:00
|
|
|
public static setTransform(context: CanvasRenderingContext2D, translateX: number, translateY: number, scaleX: number, scaleY: number, skewX: number, skewY: number): CanvasRenderingContext2D {
|
|
|
|
|
|
|
|
context.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY);
|
|
|
|
|
|
|
|
return context;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-08-11 23:52:35 +00:00
|
|
|
/**
|
|
|
|
* Sets the Image Smoothing property on the given context. Set to false to disable image smoothing.
|
|
|
|
* By default browsers have image smoothing enabled, which isn't always what you visually want, especially
|
|
|
|
* when using pixel art in a game. Note that this sets the property on the context itself, so that any image
|
|
|
|
* drawn to the context will be affected. This sets the property across all current browsers but support is
|
|
|
|
* patchy on earlier browsers, especially on mobile.
|
|
|
|
*
|
|
|
|
* @method setSmoothingEnabled
|
|
|
|
* @param {CanvasRenderingContext2D} context The context to enable or disable the image smoothing on.
|
2013-08-13 03:22:24 +00:00
|
|
|
* @param {bool} overflowHidden If set to true it will enable image smoothing, false will disable it.
|
2013-08-11 23:52:35 +00:00
|
|
|
* @return {CanvasRenderingContext2D} Returns the source context.
|
|
|
|
*/
|
2013-08-13 03:22:24 +00:00
|
|
|
public static setSmoothingEnabled(context: CanvasRenderingContext2D, value: bool): CanvasRenderingContext2D {
|
2013-08-09 16:47:08 +00:00
|
|
|
|
|
|
|
context['imageSmoothingEnabled'] = value;
|
|
|
|
context['mozImageSmoothingEnabled'] = value;
|
|
|
|
context['oImageSmoothingEnabled'] = value;
|
|
|
|
context['webkitImageSmoothingEnabled'] = value;
|
|
|
|
context['msImageSmoothingEnabled'] = value;
|
|
|
|
return context;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-08-11 23:52:35 +00:00
|
|
|
/**
|
|
|
|
* Sets the CSS image-rendering property on the given canvas to be 'crisp' (aka 'optimize contrast on webkit').
|
|
|
|
* Note that if this doesn't given the desired result then see the CanvasUtils.setSmoothingEnabled method.
|
|
|
|
*
|
|
|
|
* @method setImageRenderingCrisp
|
|
|
|
* @param {HTMLCanvasElement} canvas The canvas to set image-rendering crisp on.
|
|
|
|
* @return {HTMLCanvasElement} Returns the source canvas.
|
|
|
|
*/
|
2013-08-09 16:47:08 +00:00
|
|
|
public static setImageRenderingCrisp(canvas: HTMLCanvasElement): HTMLCanvasElement {
|
|
|
|
|
|
|
|
canvas.style['image-rendering'] = 'crisp-edges';
|
|
|
|
canvas.style['image-rendering'] = '-moz-crisp-edges';
|
|
|
|
canvas.style['image-rendering'] = '-webkit-optimize-contrast';
|
|
|
|
canvas.style.msInterpolationMode = 'nearest-neighbor';
|
|
|
|
return canvas;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-08-11 23:52:35 +00:00
|
|
|
/**
|
|
|
|
* Sets the CSS image-rendering property on the given canvas to be 'bicubic' (aka 'auto').
|
|
|
|
* Note that if this doesn't given the desired result then see the CanvasUtils.setSmoothingEnabled method.
|
|
|
|
*
|
|
|
|
* @method setImageRenderingBicubic
|
|
|
|
* @param {HTMLCanvasElement} canvas The canvas to set image-rendering bicubic on.
|
|
|
|
* @return {HTMLCanvasElement} Returns the source canvas.
|
|
|
|
*/
|
2013-08-09 16:47:08 +00:00
|
|
|
public static setImageRenderingBicubic(canvas: HTMLCanvasElement): HTMLCanvasElement {
|
|
|
|
|
|
|
|
canvas.style['image-rendering'] = 'auto';
|
|
|
|
canvas.style.msInterpolationMode = 'bicubic';
|
|
|
|
return canvas;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|