2013-11-28 15:57:09 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Phaser Source: gameobjects/BitmapData.js< / title >
<!-- [if lt IE 9]>
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
< link type = "text/css" rel = "stylesheet" href = "styles/sunlight.default.css" >
< link type = "text/css" rel = "stylesheet" href = "styles/site.cerulean.css" >
< / head >
< body >
< div class = "container-fluid" >
< div class = "navbar navbar-fixed-top navbar-inverse" >
< div class = "navbar-inner" >
< a class = "brand" href = "index.html" > Phaser< / a >
< ul class = "nav" >
< li class = "dropdown" >
< a href = "namespaces.list.html" class = "dropdown-toggle" data-toggle = "dropdown" > Namespaces< b
class="caret">< / b > < / a >
< ul class = "dropdown-menu " >
< li >
< a href = "Phaser.html" > Phaser< / a >
< / li >
< / ul >
< / li >
< li class = "dropdown" >
< a href = "classes.list.html" class = "dropdown-toggle" data-toggle = "dropdown" > Classes< b
class="caret">< / b > < / a >
< ul class = "dropdown-menu " >
< li >
< a href = "Phaser.Animation.html" > Animation< / a >
< / li >
< li >
< a href = "Phaser.AnimationManager.html" > AnimationManager< / a >
< / li >
< li >
< a href = "Phaser.AnimationParser.html" > AnimationParser< / a >
< / li >
< li >
< a href = "Phaser.BitmapData.html" > BitmapData< / a >
< / li >
< li >
< a href = "Phaser.BitmapText.html" > BitmapText< / a >
< / li >
< li >
< a href = "Phaser.Button.html" > Button< / a >
< / li >
< li >
< a href = "Phaser.Cache.html" > Cache< / a >
< / li >
< li >
< a href = "Phaser.Camera.html" > Camera< / a >
< / li >
< li >
< a href = "Phaser.Canvas.html" > Canvas< / a >
< / li >
< li >
< a href = "Phaser.Circle.html" > Circle< / a >
< / li >
< li >
< a href = "Phaser.Color.html" > Color< / a >
< / li >
< li >
< a href = "Phaser.Device.html" > Device< / a >
< / li >
2014-02-05 06:29:17 +00:00
< li >
< a href = "Phaser.DOMSprite.html" > DOMSprite< / a >
< / li >
2013-11-28 15:57:09 +00:00
< li >
< a href = "Phaser.Easing.html" > Easing< / a >
< / li >
< li >
< a href = "Phaser.Easing.Back.html" > Back< / a >
< / li >
< li >
< a href = "Phaser.Easing.Bounce.html" > Bounce< / a >
< / li >
< li >
< a href = "Phaser.Easing.Circular.html" > Circular< / a >
< / li >
< li >
< a href = "Phaser.Easing.Cubic.html" > Cubic< / a >
< / li >
< li >
< a href = "Phaser.Easing.Elastic.html" > Elastic< / a >
< / li >
< li >
< a href = "Phaser.Easing.Exponential.html" > Exponential< / a >
< / li >
< li >
< a href = "Phaser.Easing.Linear.html" > Linear< / a >
< / li >
< li >
< a href = "Phaser.Easing.Quadratic.html" > Quadratic< / a >
< / li >
< li >
< a href = "Phaser.Easing.Quartic.html" > Quartic< / a >
< / li >
< li >
< a href = "Phaser.Easing.Quintic.html" > Quintic< / a >
< / li >
< li >
< a href = "Phaser.Easing.Sinusoidal.html" > Sinusoidal< / a >
< / li >
< li >
< a href = "Phaser.Events.html" > Events< / a >
< / li >
< li >
< a href = "Phaser.Filter.html" > Filter< / a >
< / li >
< li >
< a href = "Phaser.Frame.html" > Frame< / a >
< / li >
< li >
< a href = "Phaser.FrameData.html" > FrameData< / a >
< / li >
< li >
< a href = "Phaser.Game.html" > Game< / a >
< / li >
< li >
< a href = "Phaser.GameObjectFactory.html" > GameObjectFactory< / a >
< / li >
2014-02-05 06:29:17 +00:00
< li >
< a href = "Phaser.Gamepad.html" > Gamepad< / a >
< / li >
< li >
< a href = "Phaser.GamepadButton.html" > GamepadButton< / a >
< / li >
2013-11-28 15:57:09 +00:00
< li >
< a href = "Phaser.Graphics.html" > Graphics< / a >
< / li >
< li >
< a href = "Phaser.Group.html" > Group< / a >
< / li >
2014-02-08 07:24:22 +00:00
< li >
< a href = "Phaser.Image.html" > Image< / a >
< / li >
2013-11-28 15:57:09 +00:00
< li >
< a href = "Phaser.Input.html" > Input< / a >
< / li >
< li >
< a href = "Phaser.InputHandler.html" > InputHandler< / a >
< / li >
< li >
< a href = "Phaser.Key.html" > Key< / a >
< / li >
< li >
< a href = "Phaser.Keyboard.html" > Keyboard< / a >
< / li >
2014-02-05 06:29:17 +00:00
< li >
< a href = "Phaser.Line.html" > Line< / a >
< / li >
2013-11-28 15:57:09 +00:00
< li >
< a href = "Phaser.LinkedList.html" > LinkedList< / a >
< / li >
< li >
< a href = "Phaser.Loader.html" > Loader< / a >
< / li >
< li >
< a href = "Phaser.LoaderParser.html" > LoaderParser< / a >
< / li >
< li >
< a href = "Phaser.Math.html" > Math< / a >
< / li >
< li >
< a href = "Phaser.Mouse.html" > Mouse< / a >
< / li >
< li >
< a href = "Phaser.MSPointer.html" > MSPointer< / a >
< / li >
< li >
< a href = "Phaser.Net.html" > Net< / a >
< / li >
< li >
< a href = "Phaser.Particles.html" > Particles< / a >
< / li >
< li >
< a href = "Phaser.Particles.Arcade.Emitter.html" > Emitter< / a >
< / li >
< li >
< a href = "Phaser.Physics.html" > Physics< / a >
< / li >
< li >
< a href = "Phaser.Physics.Arcade.html" > Arcade< / a >
< / li >
< li >
< a href = "Phaser.Physics.Arcade.Body.html" > Body< / a >
< / li >
< li >
< a href = "Phaser.Plugin.html" > Plugin< / a >
< / li >
< li >
< a href = "Phaser.PluginManager.html" > PluginManager< / a >
< / li >
< li >
< a href = "Phaser.Point.html" > Point< / a >
< / li >
< li >
< a href = "Phaser.Pointer.html" > Pointer< / a >
< / li >
< li >
< a href = "Phaser.Polygon.html" > Polygon< / a >
< / li >
< li >
< a href = "Phaser.QuadTree.html" > QuadTree< / a >
< / li >
< li >
< a href = "Phaser.RandomDataGenerator.html" > RandomDataGenerator< / a >
< / li >
< li >
< a href = "Phaser.Rectangle.html" > Rectangle< / a >
< / li >
< li >
< a href = "Phaser.RenderTexture.html" > RenderTexture< / a >
< / li >
< li >
< a href = "Phaser.RequestAnimationFrame.html" > RequestAnimationFrame< / a >
< / li >
< li >
< a href = "Phaser.Signal.html" > Signal< / a >
< / li >
2014-02-05 06:29:17 +00:00
< li >
< a href = "Phaser.SinglePad.html" > SinglePad< / a >
< / li >
2013-11-28 15:57:09 +00:00
< li >
< a href = "Phaser.Sound.html" > Sound< / a >
< / li >
< li >
< a href = "Phaser.SoundManager.html" > SoundManager< / a >
< / li >
< li >
< a href = "Phaser.Sprite.html" > Sprite< / a >
< / li >
< li >
< a href = "Phaser.Stage.html" > Stage< / a >
< / li >
< li >
< a href = "Phaser.StageScaleMode.html" > StageScaleMode< / a >
< / li >
< li >
< a href = "Phaser.State.html" > State< / a >
< / li >
< li >
< a href = "Phaser.StateManager.html" > StateManager< / a >
< / li >
< li >
< a href = "Phaser.Text.html" > Text< / a >
< / li >
< li >
< a href = "Phaser.Tile.html" > Tile< / a >
< / li >
< li >
< a href = "Phaser.Tilemap.html" > Tilemap< / a >
< / li >
< li >
< a href = "Phaser.TilemapLayer.html" > TilemapLayer< / a >
< / li >
< li >
< a href = "Phaser.TilemapParser.html" > TilemapParser< / a >
< / li >
< li >
< a href = "Phaser.Tileset.html" > Tileset< / a >
< / li >
< li >
< a href = "Phaser.TileSprite.html" > TileSprite< / a >
< / li >
< li >
< a href = "Phaser.Time.html" > Time< / a >
< / li >
< li >
< a href = "Phaser.Timer.html" > Timer< / a >
< / li >
2014-02-05 06:29:17 +00:00
< li >
< a href = "Phaser.TimerEvent.html" > TimerEvent< / a >
< / li >
2013-11-28 15:57:09 +00:00
< li >
< a href = "Phaser.Touch.html" > Touch< / a >
< / li >
< li >
< a href = "Phaser.Tween.html" > Tween< / a >
< / li >
< li >
< a href = "Phaser.TweenManager.html" > TweenManager< / a >
< / li >
< li >
< a href = "Phaser.Utils.html" > Utils< / a >
< / li >
< li >
< a href = "Phaser.Utils.Debug.html" > Debug< / a >
< / li >
< li >
< a href = "Phaser.World.html" > World< / a >
< / li >
< li >
< a href = "SignalBinding.html" > SignalBinding< / a >
< / li >
< / ul >
< / li >
2014-02-08 07:24:22 +00:00
< li class = "dropdown" >
< a href = "global.html" class = "dropdown-toggle" data-toggle = "dropdown" > Global< b
class="caret">< / b > < / a >
< ul class = "dropdown-menu " >
< li >
< a href = "global.html#canUseNewCanvasBlendModes" > canUseNewCanvasBlendModes< / a >
< / li >
< li >
< a href = "global.html#getNextPowerOfTwo" > getNextPowerOfTwo< / a >
< / li >
< li >
< a href = "global.html#hex2rgb" > hex2rgb< / a >
< / li >
< li >
< a href = "global.html#hitTest" > hitTest< / a >
< / li >
< li >
< a href = "global.html#rgb2hex" > rgb2hex< / a >
< / li >
< / ul >
< / li >
2013-11-28 15:57:09 +00:00
< / ul >
< / div >
< / div >
< div class = "row-fluid" >
< div class = "span12" >
< div id = "main" >
< h1 class = "page-title" > Source: gameobjects/BitmapData.js< / h1 >
< section >
< article >
< pre class = "sunlight-highlight-javascript linenums" > /**
* @author Richard Davey < rich@photonstorm.com>
2014-02-05 06:29:17 +00:00
* @copyright 2014 Photon Storm Ltd.
2013-11-28 15:57:09 +00:00
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
/**
* Creates a new BitmapData object.
*
* @class Phaser.BitmapData
*
* @classdesc Note: This object is still experimental and likely to change.
*
* A BitmapData object can be thought of as a blank canvas onto which you can perform graphics operations as you would on a normal canvas,
* such as drawing lines, circles, arcs, fills and copying and setting blocks of pixel data. A single BitmapData can be used as the texture
* for multiple Sprites. So if you need to dynamically create a Sprite texture then they are a good choice. It supports the EaselJS Tiny API.
*
* @constructor
* @param {Phaser.Game} game - A reference to the currently running game.
2014-02-08 07:24:22 +00:00
* @param {string} key - Internal Phaser reference key for the render texture.
* @param {number} [width=100] - The width of the BitmapData in pixels.
* @param {number} [height=100] - The height of the BitmapData in pixels.
2013-11-28 15:57:09 +00:00
*/
2014-02-08 07:24:22 +00:00
Phaser.BitmapData = function (game, key, width, height) {
2013-11-28 15:57:09 +00:00
2014-02-08 07:24:22 +00:00
if (typeof width === 'undefined') { width = 100; }
if (typeof height === 'undefined') { height = 100; }
2013-11-28 15:57:09 +00:00
/**
* @property {Phaser.Game} game - A reference to the currently running game.
*/
this.game = game;
/**
2014-02-08 07:24:22 +00:00
* @property {string} key - The key of the BitmapData in the Cache, if stored there.
2013-11-28 15:57:09 +00:00
*/
2014-02-08 07:24:22 +00:00
this.key = key;
2013-11-28 15:57:09 +00:00
/**
* @property {number} width - The width of the BitmapData in pixels.
*/
this.width = width;
/**
* @property {number} height - The height of the BitmapData in pixels.
*/
this.height = height;
/**
* @property {HTMLCanvasElement} canvas - The canvas to which this BitmapData draws.
* @default
*/
this.canvas = Phaser.Canvas.create(width, height);
/**
* @property {CanvasRenderingContext2D} context - The 2d context of the canvas.
* @default
*/
this.context = this.canvas.getContext('2d');
/**
* @property {array} imageData - The canvas image data.
*/
this.imageData = this.context.getImageData(0, 0, width, height);
/**
* @property {UInt8Clamped} pixels - A reference to the context imageData buffer.
*/
if (this.imageData.data.buffer)
{
this.pixels = this.imageData.data.buffer;
}
else
{
this.pixels = this.imageData.data;
}
/**
* @property {PIXI.BaseTexture} baseTexture - The PIXI.BaseTexture.
* @default
*/
this.baseTexture = new PIXI.BaseTexture(this.canvas);
/**
* @property {PIXI.Texture} texture - The PIXI.Texture.
* @default
*/
this.texture = new PIXI.Texture(this.baseTexture);
/**
* @property {Phaser.Frame} textureFrame - The Frame this BitmapData uses for rendering.
* @default
*/
this.textureFrame = new Phaser.Frame(0, 0, 0, width, height, 'bitmapData', game.rnd.uuid());
/**
* @property {number} type - The const type of this object.
* @default
*/
this.type = Phaser.BITMAPDATA;
this._dirty = false;
}
Phaser.BitmapData.prototype = {
/**
* Updates the given Sprite so that it uses this BitmapData as its texture.
* @method Phaser.BitmapData#add
* @param {Phaser.Sprite} sprite - The sprite to apply this texture to.
*/
add: function (sprite) {
sprite.loadTexture(this);
},
/**
* Given an array of Sprites it will update each of them so that their Textures reference this BitmapData.
* @method Phaser.BitmapData#addTo
* @param {Phaser.Sprite[]} sprites - An array of Sprites to apply this texture to.
*/
addTo: function (sprites) {
for (var i = 0; i < sprites.length; i++)
{
if (sprites[i].texture)
{
sprites[i].loadTexture(this);
}
}
},
/**
* Clears the BitmapData.
* @method Phaser.BitmapData#clear
*/
clear: function () {
this.context.clearRect(0, 0, this.width, this.height);
this._dirty = true;
},
refreshBuffer: function () {
this.imageData = this.context.getImageData(0, 0, this.width, this.height);
this.pixels = new Int32Array(this.imageData.data.buffer);
// this.data8 = new Uint8ClampedArray(this.imageData.buffer);
// this.data32 = new Uint32Array(this.imageData.buffer);
},
/**
* Sets the color of the given pixel to the specified red, green, blue and alpha values.
* @method Phaser.BitmapData#setPixel32
* @param {number} x - The X coordinate of the pixel to be set.
* @param {number} y - The Y coordinate of the pixel to be set.
* @param {number} red - The red color value, between 0 and 0xFF (255).
* @param {number} green - The green color value, between 0 and 0xFF (255).
* @param {number} blue - The blue color value, between 0 and 0xFF (255).
* @param {number} alpha - The alpha color value, between 0 and 0xFF (255).
*/
setPixel32: function (x, y, red, green, blue, alpha) {
if (x >= 0 & & x < = this.width & & y >= 0 & & y < = this.height)
{
this.pixels[y * this.width + x] = (alpha < < 24) | (blue < < 16) | (green < < 8) | red;
/*
if (this.isLittleEndian)
{
this.data32[y * this.width + x] = (alpha < < 24) | (blue < < 16) | (green < < 8) | red;
}
else
{
this.data32[y * this.width + x] = (red < < 24) | (green < < 16) | (blue < < 8) | alpha;
}
*/
// this.imageData.data.set(this.data8);
this.context.putImageData(this.imageData, 0, 0);
this._dirty = true;
}
},
/**
* Sets the color of the given pixel to the specified red, green and blue values.
* @method Phaser.BitmapData#setPixel
* @param {number} x - The X coordinate of the pixel to be set.
* @param {number} y - The Y coordinate of the pixel to be set.
* @param {number} red - The red color value (between 0 and 255)
* @param {number} green - The green color value (between 0 and 255)
* @param {number} blue - The blue color value (between 0 and 255)
*/
setPixel: function (x, y, red, green, blue) {
this.setPixel32(x, y, red, green, blue, 255);
},
/**
* Get a color of a specific pixel.
* @param {number} x - The X coordinate of the pixel to get.
* @param {number} y - The Y coordinate of the pixel to get.
* @return {number} A native color value integer (format: 0xRRGGBB)
*/
getPixel: function (x, y) {
if (x >= 0 & & x < = this.width & & y >= 0 & & y < = this.height)
{
return this.data32[y * this.width + x];
}
},
/**
* Get a color of a specific pixel (including alpha value).
* @param {number} x - The X coordinate of the pixel to get.
* @param {number} y - The Y coordinate of the pixel to get.
* @return {number} A native color value integer (format: 0xAARRGGBB)
*/
getPixel32: function (x, y) {
if (x >= 0 & & x < = this.width & & y >= 0 & & y < = this.height)
{
return this.data32[y * this.width + x];
}
},
/**
* Get pixels in array in a specific Rectangle.
* @param rect {Rectangle} The specific Rectangle.
* @return {array} CanvasPixelArray.
*/
getPixels: function (rect) {
return this.context.getImageData(rect.x, rect.y, rect.width, rect.height);
},
/**
* Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle
* going in the given direction by anticlockwise (defaulting to clockwise).
* @method Phaser.BitmapData#arc
* @param {number} x - The x axis of the coordinate for the arc's center
* @param {number} y - The y axis of the coordinate for the arc's center
* @param {number} radius - The arc's radius
* @param {number} startAngle - The starting point, measured from the x axis, from which it will be drawn, expressed in radians.
* @param {number} endAngle - The end arc's angle to which it will be drawn, expressed in radians.
* @param {boolean} [anticlockwise=true] - true draws the arc anticlockwise, otherwise in a clockwise direction.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
arc: function (x, y, radius, startAngle, endAngle, anticlockwise) {
if (typeof anticlockwise === 'undefined') { anticlockwise = false; }
this._dirty = true;
this.context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
return this;
},
/**
* Adds an arc with the given control points and radius, connected to the previous point by a straight line.
* @method Phaser.BitmapData#arcTo
* @param {number} x1
* @param {number} y1
* @param {number} x2
* @param {number} y2
* @param {number} radius
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
arcTo: function (x1, y1, x2, y2, radius) {
this._dirty = true;
this.context.arcTo(x1, y1, x2, y2, radius);
return this;
},
/**
* Begins a fill with the specified color. This ends the current sub-path.
* @method Phaser.BitmapData#beginFill
* @param {string} color - A CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to null will result in no fill.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
beginFill: function (color) {
this.fillStyle(color);
return this;
},
/**
* Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For
* example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a square to display it:
*
* ```myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).rect(20, 20, 120, 120);```
*
* @method Phaser.BitmapData#beginLinearGradientFill
* @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
* @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
* @param {number} x0 - The position of the first point defining the line that defines the gradient direction and size.
* @param {number} y0 - The position of the first point defining the line that defines the gradient direction and size.
* @param {number} x1 - The position of the second point defining the line that defines the gradient direction and size.
* @param {number} y1 - The position of the second point defining the line that defines the gradient direction and size.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
beginLinearGradientFill: function (colors, ratios, x0, y0, x1, y1) {
var gradient = this.createLinearGradient(x0, y0, x1, y1);
for (var i = 0, len = colors.length; i < len; i++)
{
gradient.addColorStop(ratios[i], colors[i]);
}
this.fillStyle(gradient);
return this;
},
/**
* Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For
* example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a
* square to display it:
*
* ```myGraphics.setStrokeStyle(10).beginLinearGradientStroke(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);```
*
* @method Phaser.BitmapData#beginLinearGradientStroke
* @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
* @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
* @param {number} x0 - The position of the first point defining the line that defines the gradient direction and size.
* @param {number} y0 - The position of the first point defining the line that defines the gradient direction and size.
* @param {number} x1 - The position of the second point defining the line that defines the gradient direction and size.
* @param {number} y1 - The position of the second point defining the line that defines the gradient direction and size.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
beginLinearGradientStroke: function (colors, ratios, x0, y0, x1, y1) {
var gradient = this.createLinearGradient(x0, y0, x1, y1);
for (var i = 0, len = colors.length; i < len; i++)
{
gradient.addColorStop(ratios[i], colors[i]);
}
this.strokeStyle(gradient);
return this;
},
/**
* Begins a radial gradient stroke. This ends the current sub-path. For example, the following code defines a red to
* blue radial gradient centered at (100, 100), with a radius of 50, and draws a rectangle to display it:
*
* myGraphics.setStrokeStyle(10)
* .beginRadialGradientStroke(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50)
* .drawRect(50, 90, 150, 110);
*
* @method Phaser.BitmapData#beginRadialGradientStroke
* @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
* @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
* @param {number} x0 - Center position of the inner circle that defines the gradient.
* @param {number} y0 - Center position of the inner circle that defines the gradient.
* @param {number} r0 - Radius of the inner circle that defines the gradient.
* @param {number} x1 - Center position of the outer circle that defines the gradient.
* @param {number} y1 - Center position of the outer circle that defines the gradient.
* @param {number} r1 - Radius of the outer circle that defines the gradient.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
beginRadialGradientStroke: function (colors, ratios, x0, y0, r0, x1, y1, r1) {
var gradient = this.createRadialGradient(x0, y0, r0, x1, y1, r1);
for (var i = 0, len = colors.length; i < len; i++)
{
gradient.addColorStop(ratios[i], colors[i]);
}
this.strokeStyle(gradient);
return this;
},
/**
* Starts a new path by resetting the list of sub-paths. Call this method when you want to create a new path.
* @method Phaser.BitmapData#beginPath
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
beginPath: function () {
this.context.beginPath();
return this;
},
/**
* Begins a stroke with the specified color. This ends the current sub-path.
* @method Phaser.BitmapData#beginStroke
* @param {String} color A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to null will result in no stroke.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
beginStroke: function (color) {
this.strokeStyle(color);
return this;
},
/**
* Adds a bezier curve from the current context point to (x, y) using the control points (cp1x, cp1y) and (cp2x, cp2y).
* @method Phaser.BitmapData#bezierCurveTo
* @param {number} cp1x - The x axis of control point 1.
* @param {number} cp1y - The y axis of control point 1.
* @param {number} cp2x - The x axis of control point 2.
* @param {number} cp2y - The y axis of control point 2.
* @param {number} x - The x axis of the ending point.
* @param {number} y - The y axis of the ending point.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
bezierCurveTo: function (cp1x, cp1y, cp2x, cp2y, x, y) {
this._dirty = true;
this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
return this;
},
/**
* Draws a circle with the specified radius at (x, y).
* @method Phaser.BitmapData#circle
* @param {number} x - x coordinate center point of circle.
* @param {number} y - y coordinate center point of circle.
* @param {number} radius - Radius of circle in radians.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
circle: function (x, y, radius) {
this.arc(x, y, radius, 0, Math.PI*2);
return this;
},
/**
* Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black.
* @method Phaser.BitmapData#clearRect
* @param {number} x - The x axis of the coordinate for the rectangle starting point.
* @param {number} y - The y axis of the coordinate for the rectangle starting point.
* @param {number} width - The rectangles width.
* @param {number} height - The rectangles height.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
clearRect: function (x, y, width, height) {
this._dirty = true;
this.context.clearRect(x, y, width, height);
return this;
},
/**
* Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only.
* @method Phaser.BitmapData#clip
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
clip: function () {
this._dirty = true;
this.context.clip();
return this;
},
/**
* Tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
* @method Phaser.BitmapData#closePath
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
closePath: function () {
this._dirty = true;
this.context.closePath();
return this;
},
/**
* Creates a linear gradient with defined by an imaginary line which implies the direction of the gradient.
* Once the gradient is created colors can be inserted using the addColorStop method.
* @method Phaser.BitmapData#createLinearGradient
* @param {number} x - The x axis of the coordinate for the gradients starting point.
* @param {number} y - The y axis of the coordinate for the gradients starting point.
* @param {number} width - The width of the gradient.
* @param {number} height - The height of the gradient.
* @return {CanvasGradient} The Linear Gradient.
*/
createLinearGradient: function (x, y, width, height) {
return this.context.createLinearGradient(x, y, width, height);
},
// createPattern
/**
* Creates a radial gradient.
* @method Phaser.BitmapData#createRadialGradient
* @param {number} x0
* @param {number} y0
* @param {number} r0
* @param {number} x1
* @param {number} y1
* @param {number} r1
* @return {CanvasGradient} The Radial Gradient.
*/
createRadialGradient: function (x0, y0, r0, x1, y1, r1) {
return this.context.createRadialGradient(x0, y0, r0, x1, y1, r1);
},
// drawImage
// drawSystemFocusRing (?)
/**
* Draws an ellipse (oval) with a specified width (w) and height (h).
* @method Phaser.BitmapData#ellipse
* @param {number} x - x coordinate center point of ellipse.
* @param {number} y - y coordinate center point of ellipse.
* @param {number} w - height (horizontal diameter) of ellipse. The horizontal radius will be half of this number.
* @param {number} h - width (vertical diameter) of ellipse. The vertical radius will be half of this number.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
ellipse: function (x, y, w, h) {
var k = 0.5522848;
var ox = (w / 2) * k;
var oy = (h / 2) * k;
var xe = x + w;
var ye = y + h;
var xm = x + w / 2;
var ym = y + h / 2;
this.moveTo(x, ym);
this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
return this;
},
/**
* Fills the subpaths with the current fill style.
* @method Phaser.BitmapData#fill
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
fill: function () {
this._dirty = true;
this.context.fill();
return this;
},
/**
* Draws a filled rectangle at (x, y) position whose size is determined by width and height.
* @method Phaser.BitmapData#fillRect
* @param {number} x - The x axis of the coordinate for the rectangle starting point.
* @param {number} y - The y axis of the coordinate for the rectangle starting point.
* @param {number} width - The rectangles width.
* @param {number} height - The rectangles height.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
fillRect: function (x, y, width, height) {
this._dirty = true;
this.context.fillRect(x, y, width, height);
return this;
},
/**
* Sets the fill style.
* @method Phaser.BitmapData#fillStyle
* @param {string} color - The fill color value in CSS format: #RRGGBB or rgba(r,g,b,a)
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
fillStyle: function (color) {
this.context.fillStyle = color;
return this;
},
// fillText
/**
* Sets the font.
* @method Phaser.BitmapData#font
* @param {DOMString} font - The font to be used for any text rendering. Default value 10px sans-serif.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
font: function (font) {
this.context.font = font;
return this;
},
/**
* Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
* @method Phaser.BitmapData#globalAlpha
* @param {number} alpha - Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
globalAlpha: function (alpha) {
this.context.globalAlpha = alpha;
return this;
},
/**
* With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap. Possible values: source-atop, source-in, source-out,
* source-over (default), destination-atop, destination-in, destination-out, destination-over, lighter, darker, copy and xor.
* @method Phaser.BitmapData#globalCompositeOperation
* @param {DOMString} operation - The composite operation to apply.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
globalCompositeOperation: function (operation) {
this.context.globalCompositeOperation = operation;
return this;
},
/**
* Type of endings on the end of lines. Possible values: butt (default), round, square.
* @method Phaser.BitmapData#lineCap
* @param {DOMString} style - Possible values: butt (default), round, square
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
lineCap: function (style) {
this.context.lineCap = style;
return this;
},
/**
* Specifies where to start a dasharray on a line.
* @method Phaser.BitmapData#lineDashOffset
* @param {number} offset - Specifies where to start a dasharray on a line.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
lineDashOffset: function (offset) {
this.context.lineDashOffset = offset;
return this;
},
/**
* Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default)
* @method Phaser.BitmapData#lineJoin
* @param {DOMString} join - Possible values: round, bevel, miter (default)
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
lineJoin: function (join) {
this.context.lineJoin = join;
return this;
},
/**
* Width of lines. Default 1.0
* @method Phaser.BitmapData#lineWidth
* @param {number} width - Width of lines. Default 1.0
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
lineWidth: function (width) {
this.context.lineWidth = width;
return this;
},
/**
* Default 10.
* @method Phaser.BitmapData#miterLimit
* @param {number} limit - Default 10.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
miterLimit: function (limit) {
this.context.miterLimit = limit;
return this;
},
// getImageData
// getLineDash
// isPointInPath
// isPointInStroke
/**
* Connects the last point in the subpath to the x, y coordinates with a straight line.
* @method Phaser.BitmapData#lineTo
* @param {number} x - The x axis of the coordinate for the end of the line.
* @param {number} y - The y axis of the coordinate for the end of the line.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
lineTo: function (x, y) {
this._dirty = true;
this.context.lineTo(x, y);
return this;
},
// measureText
/**
* Moves the starting point of a new subpath to the (x, y) coordinates.
* @method Phaser.BitmapData#moveTo
* @param {number} x - The x axis of the point.
* @param {number} y - The y axis of the point.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
moveTo: function (x, y) {
this.context.moveTo(x, y);
return this;
},
// putImageData
/**
* Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy).
* @method Phaser.BitmapData#quadraticCurveTo
* @param {Number} cpx - The x axis of the control point.
* @param {Number} cpy - The y axis of the control point.
* @param {Number} x - The x axis of the ending point.
* @param {Number} y - The y axis of the ending point.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
quadraticCurveTo: function(cpx, cpy, x, y) {
this._dirty = true;
this.context.quadraticCurveTo(cpx, cpy, x, y);
return this;
},
/**
* Draws a rectangle at (x, y) position whose size is determined by width and height.
* @method Phaser.BitmapData#rect
* @param {number} x - The x axis of the coordinate for the rectangle starting point.
* @param {number} y - The y axis of the coordinate for the rectangle starting point.
* @param {number} width - The rectangles width.
* @param {number} height - The rectangles height.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
rect: function (x, y, width, height) {
this._dirty = true;
this.context.rect(x, y, width, height);
return this;
},
/**
* Restores the drawing style state to the last element on the 'state stack' saved by save().
* @method Phaser.BitmapData#restore
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
restore: function () {
this._dirty = true;
this.context.restore();
return this;
},
/**
* Rotates the drawing context values by r radians.
* @method Phaser.BitmapData#rotate
* @param {number} angle - The angle of rotation given in radians.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
rotate: function (angle) {
this._dirty = true;
this.context.rotate(angle);
return this;
},
/**
* Sets the stroke style for the current sub-path. Like all drawing methods, this can be chained, so you can define
* the stroke style and color in a single line of code like so:
*
* ```myGraphics.setStrokeStyle(8,"round").beginStroke("#F00");```
*
* @method Phaser.BitmapData#setStrokeStyle
* @param {number} thickness - The width of the stroke.
* @param {string|number} [caps=0] - Indicates the type of caps to use at the end of lines. One of butt, round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with he tiny API.
* @param {string|number} [joints=0] Specifies the type of joints that should be used where two lines meet. One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel) for use with the tiny API.
* @param {number} [miterLimit=10] - If joints is set to "miter", then you can specify a miter limit ratio which controls at what point a mitered joint will be clipped.
* @param {boolean} [ignoreScale=false] - If true, the stroke will be drawn at the specified thickness regardless of active transformations.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
setStrokeStyle: function (thickness, caps, joints, miterLimit, ignoreScale) {
if (typeof thickness === 'undefined') { thickness = 1; }
if (typeof caps === 'undefined') { caps = 'butt'; }
if (typeof joints === 'undefined') { joints = 'miter'; }
if (typeof miterLimit === 'undefined') { miterLimit = 10; }
// TODO
ignoreScale = false;
this.lineWidth(thickness);
this.lineCap(caps);
this.lineJoin(joints);
this.miterLimit(miterLimit);
return this;
},
/**
* Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
* @method Phaser.BitmapData#save
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
save: function () {
this._dirty = true;
this.context.save();
return this;
},
/**
* Scales the current drawing context.
* @method Phaser.BitmapData#scale
* @param {number} x
* @param {number} y
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
scale: function (x, y) {
this._dirty = true;
this.context.scale(x, y);
return this;
},
/**
*
* @method Phaser.BitmapData#scrollPathIntoView
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
scrollPathIntoView: function () {
this._dirty = true;
this.context.scrollPathIntoView();
return this;
},
// setLineDash
// setTransform
/**
* Strokes the subpaths with the current stroke style.
* @method Phaser.BitmapData#stroke
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
stroke: function () {
this._dirty = true;
this.context.stroke();
return this;
},
/**
* Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.
* @method Phaser.BitmapData#strokeRect
* @param {number} x - The x axis for the starting point of the rectangle.
* @param {number} y - The y axis for the starting point of the rectangle.
* @param {number} width - The rectangles width.
* @param {number} height - The rectangles height.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
strokeRect: function (x, y, width, height) {
this._dirty = true;
this.context.strokeRect(x, y, width, height);
return this;
},
/**
* Color or style to use for the lines around shapes. Default #000 (black).
* @method Phaser.BitmapData#strokeStyle
* @param {string} style - Color or style to use for the lines around shapes. Default #000 (black).
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
strokeStyle: function (style) {
this.context.strokeStyle = style;
return this;
},
// strokeText
// transform
// translate
/**
* If the game is running in WebGL this will push the texture up to the GPU if it's dirty.
* This is called automatically if the BitmapData is being used by a Sprite, otherwise you need to remember to call it in your render function.
* @method Phaser.BitmapData#render
*/
render: function () {
if (this._dirty)
{
// Only needed if running in WebGL, otherwise this array will never get cleared down
if (this.game.renderType == Phaser.WEBGL)
{
PIXI.texturesToUpdate.push(this.baseTexture);
}
this._dirty = false;
}
}
2014-02-05 06:29:17 +00:00
};
Phaser.BitmapData.prototype.constructor = Phaser.BitmapData;
2013-11-28 15:57:09 +00:00
// EaselJS Tiny API emulation
/**
* Shortcut to moveTo.
* @method Phaser.BitmapData.prototype.mt
*/
Phaser.BitmapData.prototype.mt = Phaser.BitmapData.prototype.moveTo;
/**
* Shortcut to lineTo.
* @method Phaser.BitmapData.prototype.mt
*/
Phaser.BitmapData.prototype.lt = Phaser.BitmapData.prototype.lineTo;
/**
* Shortcut to arcTo.
* @method Phaser.BitmapData.prototype.at
*/
Phaser.BitmapData.prototype.at = Phaser.BitmapData.prototype.arcTo;
/**
* Shortcut to bezierCurveTo.
* @method Phaser.BitmapData.prototype.bt
*/
Phaser.BitmapData.prototype.bt = Phaser.BitmapData.prototype.bezierCurveTo;
/**
* Shortcut to quadraticCurveTo.
* @method Phaser.BitmapData.prototype.qt
*/
Phaser.BitmapData.prototype.qt = Phaser.BitmapData.prototype.quadraticCurveTo;
/**
* Shortcut to arc.
* @method Phaser.BitmapData.prototype.a
*/
Phaser.BitmapData.prototype.a = Phaser.BitmapData.prototype.arc;
/**
* Shortcut to rect.
* @method Phaser.BitmapData.prototype.r
*/
Phaser.BitmapData.prototype.r = Phaser.BitmapData.prototype.rect;
/**
* Shortcut to closePath.
* @method Phaser.BitmapData.prototype.cp
*/
Phaser.BitmapData.prototype.cp = Phaser.BitmapData.prototype.closePath;
/**
* Shortcut to clear.
* @method Phaser.BitmapData.prototype.c
*/
Phaser.BitmapData.prototype.c = Phaser.BitmapData.prototype.clear;
/**
* Shortcut to beginFill.
* @method Phaser.BitmapData.prototype.f
*/
Phaser.BitmapData.prototype.f = Phaser.BitmapData.prototype.beginFill;
/**
* Shortcut to beginLinearGradientFill.
* @method Phaser.BitmapData.prototype.lf
*/
Phaser.BitmapData.prototype.lf = Phaser.BitmapData.prototype.beginLinearGradientFill;
/**
* Shortcut to beginRadialGradientFill.
* @method Phaser.BitmapData.prototype.rf
*/
Phaser.BitmapData.prototype.rf = Phaser.BitmapData.prototype.beginRadialGradientFill;
/**
* Shortcut to beginBitmapFill.
* @method Phaser.BitmapData.prototype.bf
*/
//Phaser.BitmapData.prototype.bf = Phaser.BitmapData.prototype.beginBitmapFill;
/**
* Shortcut to endFill.
* @method Phaser.BitmapData.prototype.ef
*/
Phaser.BitmapData.prototype.ef = Phaser.BitmapData.prototype.endFill;
/**
* Shortcut to setStrokeStyle.
* @method Phaser.BitmapData.prototype.ss
*/
Phaser.BitmapData.prototype.ss = Phaser.BitmapData.prototype.setStrokeStyle;
/**
* Shortcut to beginStroke.
* @method Phaser.BitmapData.prototype.s
*/
Phaser.BitmapData.prototype.s = Phaser.BitmapData.prototype.beginStroke;
/**
* Shortcut to beginLinearGradientStroke.
* @method Phaser.BitmapData.prototype.ls
*/
Phaser.BitmapData.prototype.ls = Phaser.BitmapData.prototype.beginLinearGradientStroke;
/**
* Shortcut to beginRadialGradientStroke.
* @method Phaser.BitmapData.prototype.rs
*/
Phaser.BitmapData.prototype.rs = Phaser.BitmapData.prototype.beginRadialGradientStroke;
/**
* Shortcut to beginBitmapStroke.
* @method Phaser.BitmapData.prototype.bs
*/
// Phaser.BitmapData.prototype.bs = Phaser.BitmapData.prototype.beginBitmapStroke;
/**
* Shortcut to endStroke.
* @method Phaser.BitmapData.prototype.es
*/
// Phaser.BitmapData.prototype.es = Phaser.BitmapData.prototype.endStroke;
/**
* Shortcut to rect.
* @method Phaser.BitmapData.prototype.dr
*/
Phaser.BitmapData.prototype.dr = Phaser.BitmapData.prototype.rect;
/**
* Shortcut to drawRoundRect.
* @method Phaser.BitmapData.prototype.rr
*/
// Phaser.BitmapData.prototype.rr = Phaser.BitmapData.prototype.drawRoundRect;
/**
* Shortcut to drawRoundRectComplex.
* @method Phaser.BitmapData.prototype.rc
*/
// Phaser.BitmapData.prototype.rc = Phaser.BitmapData.prototype.drawRoundRectComplex;
/**
* Shortcut to drawCircle.
* @method Phaser.BitmapData.prototype.dc
*/
Phaser.BitmapData.prototype.dc = Phaser.BitmapData.prototype.circle;
/**
* Shortcut to drawEllipse.
* @method Phaser.BitmapData.prototype.de
*/
Phaser.BitmapData.prototype.de = Phaser.BitmapData.prototype.ellipse;
/**
* Shortcut to drawPolyStar.
* @method Phaser.BitmapData.prototype.dp
*/
// Phaser.BitmapData.prototype.dp = Phaser.BitmapData.prototype.drawPolyStar;
< / pre >
< / article >
< / section >
< / div >
< div class = "clearfix" > < / div >
< footer >
< span class = "copyright" >
2014-02-05 06:29:17 +00:00
Phaser Copyright © 2012-2014 Photon Storm Ltd.
2013-11-28 15:57:09 +00:00
< / span >
< br / >
< span class = "jsdoc-message" >
Documentation generated by < a href = "https://github.com/jsdoc3/jsdoc" > JSDoc 3.3.0-dev< / a >
2014-02-08 07:24:22 +00:00
on Sat Feb 08 2014 07:19:40 GMT-0000 (GMT) using the < a href = "https://github.com/terryweiss/docstrap" > DocStrap template< / a > .
2013-11-28 15:57:09 +00:00
< / span >
< / footer >
< / div >
< br clear = "both" >
< / div >
< / div >
< script src = "scripts/sunlight.js" > < / script >
< script src = "scripts/sunlight.javascript.js" > < / script >
< script src = "scripts/sunlight-plugin.doclinks.js" > < / script >
< script src = "scripts/sunlight-plugin.linenumbers.js" > < / script >
< script src = "scripts/sunlight-plugin.menu.js" > < / script >
< script src = "scripts/jquery.min.js" > < / script >
< script src = "scripts/jquery.scrollTo.js" > < / script >
< script src = "scripts/jquery.localScroll.js" > < / script >
< script src = "scripts/bootstrap-dropdown.js" > < / script >
< script src = "scripts/toc.js" > < / script >
< script > Sunlight . highlightAll ( { lineNumbers : true , showMenu : true , enableDoclinks : true } ) ; < / script >
< script >
$( function () {
$( "#toc" ).toc( {
selectors : "h1,h2,h3,h4",
showAndHide : false,
scrollTo : 60
} );
$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
} );
< / script >
< / body >
< / html >
