API Docs for: 1.0.1
Show:

createjs.BitmapData Class

Defined in: src/BitmapData.js:19

The BitmapData for EaselJS provides the BitmapData class like ActionScript3.0 to the EaselJS. The BitmapData class does not inherit the DisplayObject class of the EaselJS, so that use the Bitmap class to display it on the Stage. This flow is similar to Flash. But please pass the canvas property of the BitmapData instance (instead of BitmapData instance) to the constructor of the Bitmap class.

BitmapData for EaselJSは、EaselJSにActionScript3.0と同様のBitmapDataクラスを提供します。BitmapDataクラスはDisplayObjectを継承していないため、実際にStage上に表示するにはBitmapクラスを使います。この流れはFlashと同様ですが、BitmapクラスのコンストラクタにはBitmapDataインスタンスではなく、BitmapDataインスタンスのcanvasプロパティを渡して下さい。

Constructor

createjs.BitmapData

(
  • [image=null]
  • [width=image.width]
  • [height=image.height]
  • [fillColor=undefined]
)

Parameters:

  • [image=null] HTMLImageElement | HTMLCanvasElement | HTMLVideoElement optional

    If you specify an object to this parameter, the object will be drawn to the bitmapdata which is created. The specified object must be finished its loading. If you want to create a bitmapdata by fill, please specify the null.
    この引数を指定すると指定したオブジェクトが描画されたBitmapDataが作成されます。指定するオブジェクトは、読み込みが終わっている必要があります。塗りのBitmapDataを作成したい場合は、nullを指定して下さい。

  • [width=image.width] Uint optional

    The width of the image in pixels. If the image is null, the default value is 300.
    BitmapDataの幅です。imageがnullの場合のdefault値は300です。

  • [height=image.height] Uint optional

    THe height of the image in pixels. If the image is null, the default value is 150.
    BitmapDataの高さです。imageがnullの場合のdefault値は150です。

  • [fillColor=undefined] String | uint optional

    If you want to create a bitmapdata by fill, please specify this parameter. You can use a CSS compatible color value (ex. "#FF0000", "rgba(255,0,0,0.5)") or a 32-bit ARGB color value(ex. 0x80FF0000). If you want to create a transparent bitmapdata, please omit this parameter.
    塗りのBitmapDataを作成する場合に指定します。CSS文字列と0xAARRGGBB形式の16進数値が使えます。透明なBitmapDataを作成したい場合は、この引数を省略して下さい。

Example:

_bmd01 = new createjs.BitmapData(HTMLImageElement);
_bitmap01 = new createjs.Bitmap(_bmd01.canvas);
_stage.addChild(_bitmap01);
var width = 200;
var height = 200;
var fillColor = 0x80FF0000;
_bmd02 = new createjs.BitmapData(null, width, height, fillColor);
_bitmap02 = new createjs.Bitmap(_bmd02.canvas);
_stage.addChild(_bitmap02);

Methods

applyFilter

(
  • source
  • sourceRect
  • destPoint
  • filter
)

Apply the filter to the source object and generates the filtered image. You can also specify the current bitmapdata as a source.
ソースオブジェクトにFilterを適用し、現在のBitmapDataに貼付けます。sourceには、現在のBitmapDataを指定することもできます。

Parameters:

  • source BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    An object to be used as a source.
    ソースとなるオブジェクトを指定します。

  • sourceRect Rectangle

    A rectangle object that defines the area of the source.
    ソースオブジェクトの範囲を示すRectangleです。

  • destPoint Point

    The point within the destination image that corresponds to the upper-left corner of the source rectangle.
    Filterを適用したイメージが配置される左上の座標を示すPointです。

  • filter Filter

    The filter object that you want to use.
    適用するFilterを指定します。

Example:

_bmd01 = new createjs.BitmapData(_image01);
var source = _bmd01;
var sourceRect = new createjs.Rectangle(90, 20, 200, 200);
var destPoint = new createjs.Point(90, 20);
var filter = new createjs.BlurFilter(8, 8, 1);
_bmd01.applyFilter(source, sourceRect, destPoint, filter);

clearRect

(
  • x
  • y
  • width
  • height
)

Clears the pixels in the specified area. The color of pixels will be transparent black.
指定された領域のピクセルを透明な黒にして消去します。

Parameters:

  • x Number

    The x coordinate of the upper-left corner in the area to be cleared.
    消去する領域の左上x座標です。

  • y Number

    The y coordinate of the upper-left corner in the area to be cleared.
    消去する領域の左上y座標です。

  • width Number

    The width of the area to be cleared.
    消去する領域の幅です。

  • height Number

    The height of the area to be cleared.
    消去する領域の高さです。

Example:

var x = 50;
var y = 50;
var width = 100;
var height = 100;
_bmd01.clearRect(x, y, width, height);

clone

() BitmapData

Creates a clone of the current bitmapdata.
現在のBitmapDataのクローンを作成します。

Returns:

BitmapData:

A clone of the current bitmapdata.
現在のBitmapDataのクローンです。

colorTransform

(
  • rect
  • colorTransform
)

Adjusts the color value in a specified area of the bitmapdata by using a ColorTransform object.
ColorTransformオブジェクトを使用して、BitmapDataの特定領域のカラー値を調整します。

Parameters:

  • rect Rectangle

    A Rectangle object that defines the area of the bitmapdata in which the ColorTransform is applied.
    ColorTransformを適用する領域を示すRectangleです。

  • colorTransform ColorTransform

    A ColorTransform object to apply.
    適用するColorTransformオブジェクトです。

Example:

_bmd01 = new createjs.BitmapData(_image01);
var halfW = _image01.width >> 1;
var rect = new createjs.Rectangle(halfW, 0, halfW, _image01.height);
var colorTransform = new createjs.ColorTransform(0.5, 1.5, 1.5);
_bmd01.colorTransform(rect, colorTransform);

compare

(
  • otherSource
)
BitmapData | int

Compares the current bitmapdata with the object of the 1st parameter, and then returns a new bitmapdata that has the difference between the pixels in the two source objects.
現在のBitmapDataと引数のオブジェクトのピクセルを比較し、その差分ピクセルを持つ新しいBitmapDataを返します。

Parameters:

  • otherSource BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    An object to compare.
    比較に使用するオブジェクトです。

Returns:

BitmapData | int:

If the two objects have the same dimensions (width and height), the method returns a new bitmapdata that has the difference between the pixels in the two objects.
If the two objects have the same dimensions and same pixels, the method returns the number 0.
If the width of the two objects are not equal, the method returns the number -3. Else if the height of the two objects are not equal, the method returns the number -4.
2つのオブジェクトの幅と高さが等しければ、2つのオブジェクトの差分ピクセルを持つ新しいBitmapDataを返します。
幅と高さ、及びすべてのピクセルが等しい場合、数値 0 を返します。
幅が等しくない場合、数値 -3 を返します。
幅が等しく、高さが等しくない場合、数値 -4 を返します。

Example:

_bmd01 = new createjs.BitmapData(_image01);
_bmd03 = new createjs.BitmapData(_image02);
var otherSource = _bmd03;
_bmd02 = _bmd01.compare(otherSource);
_bitmap01 = new createjs.Bitmap(_bmd01.canvas);
_bitmap02 = new createjs.Bitmap(_bmd02.canvas);
_bitmap03 = new createjs.Bitmap(_bmd03.canvas);
_bitmap01.x = 10;
_bitmap02.x = 220;
_bitmap03.x = 430;
_bitmap01.y = _bitmap02.y = _bitmap03.y = 80;

copyChannel

(
  • source
  • sourceRect
  • destPoint
  • sourceChannel
  • destChannel
)

Transfers one of channel in the source object to the current bitmapdata's channel.
ソースオブジェクトの1つのチャンネルを現在のBitmapDataのチャンネルに転送します。

Parameters:

  • source BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    An object to use as a source.
    ソースとなるオブジェクトを指定します。

  • sourceRect Rectangle

    A rectangle object that defines the area of the source.
    ソースオブジェクトの範囲を示すRectangleです。

  • destPoint Point

    The destination Point that represents the upper-left corner of the destination bitmapdata.
    データが配置される左上の座標を示すPointです。

  • sourceChannel Uint

    A channel of the source object. You can use the constant of the BitmapDataChannel class.
    ソースオブジェクトのチャンネルを指定します。BitmapDataChannelクラスの定数が使用できます。

  • destChannel Uint

    A channel of the destination bitmapdata. You can use the constant of the BitmapDataChannel class.
    転送先のチャンネルを指定します。BitmapDataChannelクラスの定数が使用できます。

Example:

_bmd01 = new createjs.BitmapData(_image01);
var source = _image02;
var sourceRect = new createjs.Rectangle(0, 0, _image02.width, _image02.height);
var destPoint = new createjs.Point();
var channel = Object.create(createjs.BitmapDataChannel);
var sourceChannel = channel.ALPHA;
var destChannel = channel.BLUE;
_bmd01.copyChannel(source, sourceRect, destPoint, sourceChannel, destChannel);

copyPixels

(
  • source
  • sourceRect
  • destPoint
  • [alphaSource=null]
  • [alphaPoint=null]
  • [mergeAlpha=false]
)

Copies the pixels from the source object to the current bitmapdata.
ソースオブジェクトを現在のBitmapDataに貼り付けます。

Parameters:

  • source BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    An object to use as a source.
    ソースとなるオブジェクトを指定します。

  • sourceRect Rectangle

    A rectangle object that defines the area of the source.
    ソースオブジェクトの範囲を示すRectangleです。

  • destPoint Point

    The destination Point that represents the upper-left corner of the destination bitmapdata.
    貼り付け先の左上座標を示すPointです。

  • [alphaSource=null] BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement optional

    An object to use as a source of the alpha channel.
    アルファチャンネルのソースとなるオブジェクトを指定します。

  • [alphaPoint=null] Point optional

    The point that represents the upper-left corner of the alphaSource.
    alphaSourceの左上座標を示すPointです。

  • [mergeAlpha=false] Boolean optional

    If you want to use the alpha channel, set the value to true.
    貼り付け時にアルファチャンネルを使用するにはtrueを指定します。

Example:

_bmd01 = new createjs.BitmapData(null, 640, 360, 0xCCCCCC);
var source = _image01;
var sourceRect = new createjs.Rectangle(0, 0, _image01.width, _image01.height);
var destPoint;
var alphaSource = _maskImage;
var alphaPoint = new createjs.Point();
var mergeAlpha = true;
destPoint = new createjs.Point(10, 80);
_bmd01.copyPixels(source, sourceRect, destPoint);
destPoint = new createjs.Point(220, 80);
_bmd01.copyPixels(source, sourceRect, destPoint, alphaSource);
destPoint = new createjs.Point(430, 80);
_bmd01.copyPixels(source, sourceRect, destPoint, alphaSource, alphaPoint, mergeAlpha);

dispose

()

Frees the memory that is used to store the bitmapdata.
BitmapDataオブジェクトの格納に使用されるメモリを解放します。

draw

(
  • source
  • [matrix=null]
  • [colorTransform=null]
  • [compositeOperation=null]
  • [clipRect=null]
  • [smoothing=false]
)

Draws the source object to the current bitmapdata.
ソースオブジェクトを現在のBitmapDataに描画します。

Parameters:

  • source BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    An object to use as a source.
    ソースとなるオブジェクトを指定します。

  • [matrix=null] Matrix2D optional

    A Matrix2D object to be applied to the source object. If you don't want to apply the transformation matrix, set the value to null.
    ソースオブジェクトに適用する変換行列を指定します。変換行列を指定したくない場合はnullを指定して下さい。

  • [colorTransform=null] ColorTransform optional

    A ColorTransform object to be applied to the source object. If you don't want to apply the color transformation, set the value to null.
    ソースオブジェクトに適用するColorTransformオブジェクトを指定します。ColorTransformを適用したくない場合はnullを指定して下さい。

  • [compositeOperation=null] String optional

    A string value that represents the globalCompositeOperation value of the CanvasRenderingContext2D when drawn.
    描画時のcanvasのglobalCompositeOperationの値です。

  • [clipRect=null] Rectangle optional

    A rectangle object that defines the clipping area of the source object.
    描画時のクリッピング領域を示すRectangleです。

  • [smoothing=false] Boolean optional

    A Boolean value that determines whether or not to use the smoothing option when drawn.
    描画時にスムージングを適用するかをBool値で指定します。

Example:

var matrix = new createjs.Matrix2D(1, 0, 0, 1, -_sourceRect.width >> 1, -_sourceRect.height >> 1);
var rotation = Math.random() * 360 >> 0;
matrix.rotate(rotation * createjs.Matrix2D.DEG_TO_RAD);
var scale = Math.random() * 0.5 + 0.5;
matrix.scale(scale, scale);
var tx = Math.random() * _bmd01.width >> 0;
var ty = Math.random() * _bmd01.height >> 0;
matrix.translate(tx, ty);
var red = (Math.random() * 224 >> 0) + 32;
var green = (Math.random() * 224 >> 0) + 32;
var blue = (Math.random() * 224 >> 0) + 32;
var colorTransform = new createjs.ColorTransform(0, 0, 0, 1, red, green, blue);
var compositeOperation = "lighter";
var clipRect = null;
var smoothing = true;
_bmd01.draw(_source, matrix, colorTransform, compositeOperation, clipRect, smoothing);

drawImage

(
  • source
  • [sx=0]
  • [sy=0]
  • [sw]
  • [sh]
  • [dx]
  • [dy]
  • [dw]
  • [dh]
)

Draws the source object to the current bitmapdata. The method works faster than draw() because it doesn't apply the transformation matrix and the color transfomation. The method provides the same operation as drawImage() of the CanvasRenderingContext2D.
ソースオブジェクトを現在のBitmapDataに描画します。変換行列やColorTransformを使用しないので、draw()よりも高速に動作します。このメソッドは、CanvasRenderingContext2DのdrawImage()と同様の動作を提供します。

Parameters:

  • source BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    An object to use as a source.
    ソースとなるオブジェクトを指定します。

  • [sx=0] Number optional

    The x coordinate of the upper-left corner in the source object. If you omit the 6th and subsequent parameters, the value is treated as dx.
    ソースオブジェクトの左上x座標です。第6引数以降を省略した場合、この引数はdxとして動作します。

  • [sy=0] Number optional

    The y coordinate of the upper-left corner in the source object. If you omit the 6th and subsequent parameters, the value is treated as dy.
    ソースオブジェクトの左上y座標です。第6引数以降を省略した場合、この引数はdyとして動作します。

  • [sw] Number optional

    The width of the source object. If you omit the 6th and subsequent parameters, the value is treated as dw.
    ソースオブジェクトの幅です。第6引数以降を省略した場合、この引数はdwとして動作します。

  • [sh] Number optional

    The height of the source object. If you omit the 6th and subsequent parameters, the value is treated as dh.
    ソースオブジェクトの高さです。第6引数以降を省略した場合、この引数はdhとして動作します。

  • [dx] Number optional

    The x coordinate within the destination image that corresponds to the left side of the source object.
    描画先の左上x座標です。

  • [dy] Number optional

    The y coordinate within the destination image that corresponds to the top side of the source object.
    描画先の左上y座標です。

  • [dw] Number optional

    The width of the object when drawn.
    描画時の幅です。

  • [dh] Number optional

    The height of the object when drawn.
    描画時の高さです。

expand

(
  • rect
)

Changes the size of the bitmapdata. A rectangle of the parameter correspond to the return value of the Filter.getBounds(). For example, if you want to expand by 8px on all sides (top, bottm, left, right), set the value to new createjs.Rectangle(-8, -8, 16, 16).
BitmapDataのサイズを変更します。引数のRectangleは、Filter.getBounds()の戻り値に合わせています。例として、上下左右に8pxずつ拡げたい場合は、new createjs.Rectangle(-8, -8, 16, 16)を指定します。

Parameters:

  • rect Rectangle

    A rectangle object to change the size of the bitmapdata. In case of using a Filter, pass the return value of the Filter.getBounds().
    BitmapDataのサイズ変更に使用するRectangleです。Filterを使用する場合は、Filter.getBounds()の戻り値をそのまま渡します。

Example:

_bmd01 = new createjs.BitmapData(_image01);
var source = _bmd01;
var filter = new createjs.BlurFilter(16, 16, 1);
var rect = filter.getBounds();
_bmd01.expand(rect);
var sourceRect = new createjs.Rectangle(0, 0, _bmd01.width, _bmd01.height);
var destPoint = new createjs.Point();
_bmd01.applyFilter(source, sourceRect, destPoint, filter);

fillRect

(
  • rect
  • color
)

Fills a rectangular area with a specified color value.
BitmapDataの特定領域を指定されたカラー値で塗りつぶします。

Parameters:

  • rect Rectangle

    A rectangle object that defines the area to be filled.
    塗りつぶす範囲を示すRectangleです。

  • color String | uint

    A color value that fills the area. You can use a CSS compatible color value (ex. "#FF0000", "rgba(255,0,0,0.5)") or a 32-bit ARGB color value(ex. 0x80FF0000). In case of using a hexadecimal format, if you set the 0 at the alpha channel, the value is treated as 0xRRGGBB (ex. 0x00FF0000 is treated as 0xFF0000). If you want to set the pixels to transparence, you can use the clearRect().
    塗りつぶしのカラー値です。CSS文字列と0xAARRGGBB形式の16進数値が使えます。16進数値で指定する際にアルファ値として0を指定した場合は、0xRRGGBBとして処理を行います。例として、0x00FF0000を指定した場合は、0xFF0000として処理されます。ピクセルを透明にしたい場合はclearRect()を使用して下さい。

Example:

_bmd01 = new createjs.BitmapData(null, 200, 200);
_bmd02 = _bmd01.clone();
var rect = new createjs.Rectangle(0, 0, 200, 200);
var color01 = 0x80FF0000;
_bmd01.fillRect(rect, color01);
var color02 = createjs.Graphics.getRGB(0, 0, 255, 0.5)
_bmd02.fillRect(rect, color02);

floodFill

(
  • x
  • y
  • color
)

Fills the certain color from the specified point. It's similar to the paint bucket tool in various paint programs.
指定した座標を始点として、上下左右に連続した色をバケツツールのように塗りつぶします。

Parameters:

  • x Uint

    The x coordinate of starting point to fill.
    塗りつぶしの始点となるx座標です。

  • y Uint

    The y coordinate of starting point to fill
    塗りつぶしの始点となるy座標です。

  • color Uint

    A color value to use as fill. You can use only a 32-bit ARGB color value (ex. 0xAARRGGBB).
    塗りつぶしのカラー値です。0xAARRGGBB形式の16進数値のみ使用できます。

Example:

function clickHandler(evt) {
 _bmd01.floodFill(evt.stageX, evt.stageY, 0xFFCCCCCC);
 _stage.update();
}

getBitmapData

(
  • object
)
BitmapData static

This method gets as a bitmapdata from cache of the DisplayObject. A bitmapData provided by this method is the reference of the DisplayObject's cache. If you called updateCache() at the DisplayObject, you must call updateImageData() at the Bitmapdata.
cache()されたDisplayObjectのサブクラスをBitmapDataとして取得します。このメソッドで得られるBitmapDataは、DisplayObjectのcacheの参照です。updateCache()を実行した場合は、取得したBitmapDataも更新されるため、updateImageData()を実行して下さい。

Parameters:

  • object DisplayObject

    The DisplayObject to get as a bitmapdata. The DisplayObject must be called cache().
    BitmapDataとして取得したいDisplayObjectのサブクラスを指定します。DisplayObjectはcache()されている必要があります。

Returns:

BitmapData:

A bitmapdata got from the DisplayObject's cache.
DisplayObjectのcacheをBitmapDataとして返します。

Example:

_shape = new createjs.Shape();
var g = _shape.graphics;
g.f("rgba(0, 0, 255, 1)").dp(0, 0, 100, 5, 0.6, -90).ef();
_shape.cache(-100, -100, 200, 200);
_bmd01 = createjs.BitmapData.getBitmapData(_shape);
var colorTransform = new createjs.ColorTransform(1, 1, 0, 1, 255);
var rect = new createjs.Rectangle(0, 0, _bmd01.width >> 1, _bmd01.height);
_bmd01.colorTransform(rect, colorTransform);
_stage.addChild(_shape);

getColorBoundsRect

(
  • mask
  • color
  • [findColor=false]
)
Rectangle

If you set the findColor parameter to true, the method returns a rectangle object that is enclosed area with the specified color. If you set the findColor parameter to false, the method returns a rectangle object that is enclosed area with the not specified color.
引数findColorにtrueを指定した場合は、指定された色のピクセルを囲むRectangleを返します。findColorにfalseを指定した場合は、指定された色ではないピクセルを囲むRectangleを返します。

Parameters:

  • mask Uint

    A hexadicimal value to mask the color value of pixels. The color value is combined with this value, by using the & (bitwise AND) operator.
    ピクセルのカラー値をマスクする16進数値を指定します。ピクセルのカラー値とこの16進数値は、AND論理演算子でつなげられます。

  • color Uint

    A hexadicimal value to be used as the target color. You can use only a 32-bit ARGB color value (ex. 0xAARRGGBB).
    対象とするカラー値を指定します。0xAARRGGBB形式の16進数値のみ使用できます。

  • [findColor=false] Boolean optional

    If you set the value to true, the method returns a rectangle that is enclosed area with the specified color. If you set the value to false, the method returns a rectangle that is enclosed area with the not specified color.
    trueを指定した場合、指定された色のピクセルを囲むRectangleを返します。falseを指定した場合、指定された色ではないピクセルを囲むRectangleを返します。

Returns:

Rectangle:

A rectangle object that is enclosed all pixels that matched the conditions. If no pixel match the conditions, the method returns a Rectangle(0, 0, 0, 0).
条件に合致したすべてのピクセルを囲むRectangleです。条件に合致するピクセルがない場合は、Rectangle(0, 0, 0, 0)を返します。

getPixel

(
  • x
  • y
)
Uint

Returns a number that represents a RGB color value from the specified point.
指定された座標のRGBカラー値を数値で返します。

Parameters:

  • x Uint

    The x coordinate to get the color value.
    カラー値を取得するx座標です。

  • y Uint

    The y coordinate to get the color value.
    カラー値を取得するy座標です。

Returns:

Uint:

A number that represents a RGB color value.
RGBカラー値を表す数値です。

Example:

var color = forcemap.getPixel(x, y);

getPixel32

(
  • x
  • y
)
Uint

Returns a number that represents a ARGB color value from the specified point.
指定された座標のARGBカラー値を数値で返します。

Parameters:

  • x Uint

    The x coordinate to get the color value.
    カラー値を取得するx座標です。

  • y Uint

    The y coordinate to get the color value.
    カラー値を取得するy座標です。

Returns:

Uint:

A number that represents a ARGB color value.
ARGBカラー値を表す数値です。

getPixels

(
  • rect
)
Uint8ClampedArray

Returns the pixel data of the specified area as a Uint8ClampedArray (CanvasPixelArray in the case of the old browser). The pixel data of the return value is stored in the order of R, G, B, A.
引数で指定された領域のピクセルデータをUint8ClampedArray(旧ブラウザではCanvasPixelArray)で返します。戻り値のピクセルデータは、R, G, B, Aの並びになっています。

Parameters:

  • rect Rectangle

    A rectangle object that defines the area to get the pixel data.
    ピクセルデータを取得する範囲を示すRectangleです。

Returns:

Uint8ClampedArray:

A Uint8ClampedArray (imageData.data) of the specified area.
指定された範囲のimageData.dataプロパティを返します。

Example:

_bmd01 = new createjs.BitmapData(_image01);
_bmd02 = new createjs.BitmapData(_image02);
var rect = new createjs.Rectangle(20, 20, 160, 160);
var data01 = _bmd01.getPixels(rect);
var data02 = _bmd02.getPixels(rect);
for (var i = 0, l = data01.length; i < l; i += 4) {
 if (i / 4 % 2 !== 0) {
   var r = i;
   var g = i + 1;
   var b = i + 2;
   var a = i + 3;
   data01[r] = data02[r];
   data01[g] = data02[g];
   data01[b] = data02[b];
   data01[a] = data02[a];
 }
}
_bmd01.setPixels(rect, data01);

histogram

(
  • hRect
)
Array

Returns a two-dimentsional array that represents the histogram of the bitmapdata. The array of the return value contains four arrays with the format [[R], [G], [B], [A]]. Each array contains 256 (from 0 to 255) values that represents the population count of an individual color value.
BitmapDataのヒストグラムを2次元配列で返します。戻り値の配列は、[[R], [G], [B], [A]]の形式で4つの配列を格納しています。各カラー値の配列は、0~255のindexを持っており、そこにカラー値のポピュレーションカウントを格納しています。

Parameters:

  • hRect Rectangle

    A rectangle object that defines the area to get the histogram.
    ヒストグラムを取得する範囲を示すRectangleです。

Returns:

Array:

A two-dimensional array that represents the histogram of the bitmapdata.
BitmapDataのヒストグラムを表す2次元配列です。

hitTest

(
  • firstPoint
  • firstAlphaThreshold
  • secondObject
  • [secondObjectPoint=null]
  • [secondAlphaThreshold=1]
)
Boolean

Performs pixel-level hit detection including alpha channel. If the 3rd parameter (secondObject) is a Point or a rectangle, The method doesn't need the 4th and subsequent parameters.
アルファチャンネルを含めたピクセルレベルの衝突判定を行います。対象オブジェクトがPoint, Rectangleの場合には第4引数以降は必要ありません。

Parameters:

  • firstPoint Point

    The point that represents the upper-left corner of the current bitmapdata in an arbitrary coordinate space.
    任意の座標空間における現在のBitmapDataの座標を示すPointです。

  • firstAlphaThreshold Uint

    The threshold value of the alpha channel that is considered opaque within the current bitmapdata.
    現在のBitmapDataで不透明とするアルファチャンネルのしきい値です。

  • secondObject Point | Rectangle | BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    An object that is the target of hit detection.
    衝突判定の対象となるオブジェクトです。

  • [secondObjectPoint=null] Point optional

    The point that represents the upper-left corner of the secondObject.
    secondObjectの座標を示すPointです。

  • [secondAlphaThreshold=1] Uint optional

    The threshold value of the alpha channel that is considered opaque within the secondObject.
    secondObjectで不透明とするアルファチャンネルのしきい値です。

Returns:

Boolean:

If a hit occurs, the return value is true, otherwise false.
衝突している場合はtrue、していない場合はfalseを返します。

Example:

var firstPoint = new createjs.Point(_bitmap01.x, _bitmap01.y);
var firstAlphaThreshold = 0xFF;
var secondObject = _shape_bmd;
var secondObjectPoint = new createjs.Point(_shape.x - 20, _shape.y - 20);
var secondAlphaThreshold = 0x80;
if (_bmd01.hitTest(firstPoint, firstAlphaThreshold, secondObject, secondObjectPoint, secondAlphaThreshold)) {
 if (!_isHitting) {
   changeColor("rgba(0,255,0,0.75)");
 }
} else {
 if (_isHitting) {
   changeColor("rgba(0,0,255,0.75)");
 }
}

merge

(
  • source
  • sourceRect
  • destPoint
  • redMultiplier
  • greenMultiplier
  • blueMultiplier
  • alphaMultiplier
)

Performs per-channel blending from a source object to the current bitmapdata.
現在のBitmapDataとソースオブジェクトをチャンネルごとにブレンドします。

Parameters:

  • source BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    An object to use as a source.
    ソースとなるオブジェクトを指定します。

  • sourceRect Rectangle

    A rectangle object that defines the area of the source.
    ソースオブジェクトの範囲を示すRectangleです。

  • destPoint Point

    The destination Point that represents the upper-left corner of the destination bitmapdata.
    マージ先の左上座標を示すPointです。

  • redMultiplier Uint

    A uint value by which to multiply the red channel value.
    赤チャンネル値に乗算する数値です。

  • greenMultiplier Uint

    A uint value by which to multiply the green channel value.
    緑チャンネル値に乗算する数値です。

  • blueMultiplier Uint

    A uint value by which to multiply the blue channel value.
    青チャンネル値に乗算する数値です。

  • alphaMultiplier Uint

    A uint value by which to multiply the alpha channel value.
    アルファチャンネル値に乗算する数値です。

Example:

_bmd01 = new createjs.BitmapData(_image01);
_bmd02 = _bmd01.clone();
_bmd03 = new createjs.BitmapData(_image02);
var source = _bmd03;
var sourceRect = new createjs.Rectangle(0, 0, _image02.width, _image02.height);
var destPoint = new createjs.Point();
var redMultiplier = 192;
var greenMultiplier = 64;
var blueMultiplier = 128;
var alphaMultiplier = 128;
_bmd02.merge(source, sourceRect, destPoint, redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier);

noise

(
  • [low=0]
  • [high=255]
  • [channelOptions=7]
  • [grayScale=false]
)

Generates a random noise.
ランダムノイズを生成します。

Parameters:

  • [low=0] Uint optional

    The lowest value to generate for each channel.
    チャンネルごとに生成する最小値です。

  • [high=255] Uint optional

    The highest value to generate for each channel.
    チャンネルごとに生成する最大値です。

  • [channelOptions=7] Uint optional

    The channel of the target. You can use the constant of the BitmapDataChannel class and use the logical OR operator (|) to combine channel values.
    対象とするチャンネルを指定します。BitmapDataChannelクラスの定数が使え、OR論理演算子で複数のチャンネルを組み合わせることができます。

  • [grayScale=false] Boolean optional

    A Boolean value that determines whether or not to generates the grayscale noise. If you set the value to true, all channels set to the same value except the alpha channel.
    ノイズをグレイスケールにするかをBool値を指定します。trueにした場合、アルファチャンネルを除いたすべてのチャンネルが同じ値となります。

Example:

_bmd01 = new createjs.BitmapData(null, 200, 200);
var low = 128;
var high = 200;
var channel = Object.create(createjs.BitmapDataChannel);
var channelOptions = channel.BLUE | channel.ALPHA;
var grayScale = false;
_bmd01.noise(low, high, channelOptions, grayScale);

paletteMap

(
  • source
  • sourceRect
  • destPoint
  • [redArray=null]
  • [greenArray=null]
  • [blueArray=null]
  • [alphaArray=null]
)

Remaps the color channel values, by using four arrays of the color palette data. If a channel is specified null as the color palette data, be copied from the source object to the destination bitmapdata. Each arrays of the color palette data should contains 256 values.
カラーパレットデータ配列を使用して、BitmapDataのカラー値をマッピングします。パレットデータ配列でnullを指定したチャンネルでは、ソースオブジェクトのチャンネルが使用されます。各チャンネルのパレットデータ配列には、256個の値が含まれている必要があります。

Parameters:

  • source BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    ソースとなるオブジェクトを指定します。

  • sourceRect Rectangle

    A rectangle object that defines the area of the source.
    ソースオブジェクトの範囲を示すRectangleです。

  • destPoint Point

    The destination Point that represents the upper-left corner of the destination bitmapdata.
    マッピング先の左上座標を示すPointです。

  • [redArray=null] Array optional

    A array of the palette data to be used remapping the red channel.
    赤チャンネルのマッピングに使用するパレットデータ配列です。

  • [greenArray=null] Array optional

    A array of the palette data to be used remapping the green channel.
    緑チャンネルのマッピングに使用するパレットデータ配列です。

  • [blueArray=null] Array optional

    A array of the palette data to be used remapping the blue channel.
    青チャンネルのマッピングに使用するパレットデータ配列です。

  • [alphaArray=null] Array optional

    A array of the palette data to be used remapping the alpha channel.
    アルファチャンネルのマッピングに使用するパレットデータ配列です。

Example:

_bmd01 = new createjs.BitmapData(_image01);
var source = _bmd01;
var sourceRect = new createjs.Rectangle(64, 48, 256, 144);
var destPoint = new createjs.Point(sourceRect.x, sourceRect.y);
var redArray = [], greenArray = [], blueArray = [], alphaArray = null;
for (var i = 0, l = 256; i < l; i++) {
 redArray[i] = (255 - i) << 16;
 greenArray[i] = (255 - i) << 8;
 blueArray[i] = 255 - i;
}
_bmd01.paletteMap(source, sourceRect, destPoint, redArray, greenArray, blueArray, alphaArray);

perlinNoise

(
  • baseX
  • baseY
  • numOctaves
  • randomSeed
  • [stitch=false]
  • [fractalNoise=false]
  • [channelOptions=7]
  • [grayScale=false]
  • [offsets=null]
  • [interpolateType="linear"]
)

Generates a Perlin noise.
PerlinNoiseを生成します。

Parameters:

  • baseX Number

    Frequency to use in the x direction.
    x方向で使用する周波数です。

  • baseY Number

    Frequency to use in the y direction.
    y方向で使用する周波数です。

  • numOctaves Uint

    A Number of octaves to combine to create the noise. Larger number of octaves create images with greater detail, but also require more processing time.
    PerlinNoiseを作成するために組み合わせるオクターブの数です。オクターブ数を大きくすると、よりきめ細かいノイズを作成できますが、その分、処理に時間がかかります。

  • randomSeed Int

    The random seed number to use to create the noise. Same random seed creates the same results each time.
    ノイズの生成に使用するランダムシード(乱数の種)を指定します。同じランダムシードからは、毎回同じ結果が得られます。

  • [stitch=false] Boolean optional

    If you set the value to true, the method attempts to smooth the transition edges of the image to create seamless textures for tiling as a bitmap fill. But also require more processing time.
    trueを指定した場合、タイリングに適したシームレスなPerlinNoiseを生成しますが、その分、処理に時間がかかります。

  • [fractalNoise=false] Boolean optional

    If you set the value to true, the method generates fractal noise.
    trueを指定した場合、フラクタルノイズを生成します。

  • [channelOptions=7] Uint optional

    The target channels. You can use the constant of the BitmapDataChannel class. And you can use the logical OR operator (|) to combine channel values.
    対象とするチャンネルを指定します。BitmapDataChannelクラスの定数が使え、OR論理演算子で複数のチャンネルを組み合わせることができます。

  • [grayScale=false] Boolean optional

    If you set the value to true, a grayscale image is created by setting each of the red, green, blue color channels to identical values. But this value doesn't affects the alpha channel.
    trueを指定した場合、RGBの各カラーチャンネルに同じ値を設定して、グレースケールのノイズが作成されます。この値はアルファチャンネルには影響しません。

  • [offsets=null] Array optional

    An array of points that correspond to offsets value for each octave.
    各オクターブのオフセット値を格納した配列です。オフセット値はPointインスタンスで指定します。

  • [interpolateType="linear"] String optional

    You can choose the type of interpolation from "linear" or "cos", to smoothing the noise. The value "cos" creates smoother result, but also require more processing time. The default value is "linear".
    ノイズを滑らかにする補間のタイプを"linear"と"cos"から選択できます。"cos"の方が滑らかな結果が得られますが、その分、処理に時間がかかります。デフォルト値は"linear"です。

Example:

_bmd01 = new createjs.BitmapData(null, 320, 240);
var baseX = _bmd01.width;
var baseY = _bmd01.height;
var numOctaves = 5;
var randomSeed = 7;
var stitch = false;
var fractalNoise = false;
var channel = Object.create(createjs.BitmapDataChannel);
var channelOptions = channel.RED | channel.GREEN | channel.BLUE;
var grayScale = true;
var offsets = [new createjs.Point(0, 0), new createjs.Point(0, 0)];
var interpolateType = "cos";
_bmd01.perlinNoise(baseX, baseY, numOctaves, randomSeed, stitch, fractalNoise, channelOptions, grayScale, offsets, interpolateType);

pixelDissolve

(
  • source
  • sourceRect
  • destPoint
  • [buffer=null]
  • [numPixels=0]
  • [fillColor=0]
)
Array

Performs a pixel-dissolve from the current bitmapdata to a source object.
現在のBitmapDataからソースオブジェクトへのピクセルディゾルブを実行します。

Parameters:

  • source BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    An object to use as a source.
    ソースとなるオブジェクトを指定します。

  • sourceRect Rectangle

    A rectangle object that defines the area of the source.
    ソースオブジェクトの範囲を示すRectangleです。

  • destPoint Point

    The destination Point that represents the upper-left corner of the destination object.
    ディゾルブ先の左上座標を示すPointです。

  • [buffer=null] Array optional

    If you want to performs consecutive pixel-dissolve, please specify the return value of the pixelDissolve().
    連続したピクセルディゾルブを実行したい場合は、pixelDissolve()の戻り値のbuffer配列を指定します。

  • [numPixels=0] Uint optional

    A number of pixels to be replaced at a single process. The default value is sourceRect.width * souceRect.height / 30.
    1回の処理で置き換えるピクセル数です。デフォルト値は、sourceRect.width * souceRect.height / 30 です。

  • [fillColor=0] Uint optional

    A ARGB color value to fill the pixels, when the source object equals the current bitmapdata.
    ソースオブジェクトが現在のBitmapDataの場合に使用されるカラー値を0xAARRGGBB形式の16進数値で指定します。

Returns:

Array:

Returns the buffer array. If you want to performs consecutive pixel-dissolve, pass the return value as the 4th parameter at the next calling. When the pixel-dissolve is finished, the method returns number 0.
buffer配列を返します。この戻り値の配列を第4引数に指定することで連続したピクセルディゾルブを実行できます。ピクセルディゾルブが終了した際には数値 0 を返します。

Example:

function tickHandler(evt) {
 if (_buffer === 0) {
   return;
 }
 var sourceRect = new createjs.Rectangle(0, 0, _source.width, _source.height);
 var destPoint = new createjs.Point(sourceRect.x, sourceRect.y);
 var numPixels = 600;
 var fillColor = null
 _buffer = _bmd01.pixelDissolve(_source, sourceRect, destPoint, _buffer, numPixels, fillColor);
 _stage.update();
}

scroll

(
  • x
  • y
)

Scrolls an image by a specified pixel amount. Edge regions outside the scrolling area are left unchanged.
指定されたピクセル量だけイメージをスクロールします。スクロール領域外のエッジ領域は変わらずにそのままになります。

Parameters:

  • x Int

    The amount by which to scroll horizontally.
    x軸方向のスクロール量です。

  • y Int

    The amount by which to scroll vertically.
    y軸方向のスクロール量です。

setPixel

(
  • x
  • y
  • color
)

Sets the new color value to a pixel of the specified point. The alpha channel value is kept the current value. You must call updateContext() to reflect the results of setPixel() to the bitmapdata.
指定された座標のピクセルに新しいカラー値を設定します。アルファチャンネルの値は現在の値が保たれます。setPixel()の実行結果を実際にBitmapDataに反映させるにはupdateContext()を実行する必要があります。

Parameters:

  • x Uint

    The x coordinate to set a color value.
    カラー値を設定するx座標です。

  • y Uint

    The y coordinate to set a color value.
    カラー値を設定するy座標です。

  • color Uint

    A color value to set the pixel. You can use only a RGB color value (ex. 0xRRGGBB).
    指定したピクセルに設定するカラー値です。0xRRGGBB形式の16進数値のみ使用できます。

Example:

bmd.setPixel(x, y, 0x0099FF);

setPixel32

(
  • x
  • y
  • color
)

Sets the new color value including alpha channel to a pixel of the specified point. You must call updateContext() to reflect the results of setPixel32() to the bitmapdata.
指定された座標のピクセルにアルファチャンネルを含めた新しいカラー値を設定します。setPixel32()の実行結果を実際にBitmapDataに反映させるにはupdateContext()を実行する必要があります。

Parameters:

  • x Uint

    The x coordinate to set a color value.
    カラー値を設定するx座標です。

  • y Uint

    The y coordinate to set a color value.
    カラー値を設定するy座標です。

  • color Uint

    A color value to set the pixel. You can use only a ARGB color value (ex. 0xAARRGGBB).
    指定したピクセルに設定するカラー値です。0xAARRGGBB形式の16進数値のみ使用できます。

setPixels

(
  • rect
  • inputArray
)

Replaces the pixels of the specified area with the array of 2nd parameter.
指定された範囲のピクセルを指定された配列のデータで差し替えます。

Parameters:

  • rect Rectangle

    A rectangle object that defines the area to set the pixel data.
    ピクセルデータを差し替える範囲を示すRectangleです。

  • inputArray Array

    An array to replace the pixel data. The pixel data must be stored in the order of R, G, B, A.
    差し替えるピクセルデータを配列で指定します。ピクセルデータの並びは、R, G, B, Aの順番にする必要があります。

threshold

(
  • source
  • sourceRect
  • destPoint
  • operation
  • threshold
  • [color=0]
  • [mask=0]
  • [copySource=false]
)

Tests the pixels of the bitmapdata with the specified threshold, and sets a new color value by its result.
指定されたしきい値でBitmapDataのピクセル値をテストし、その合否によってピクセルに新たなカラー値をセットします。

Parameters:

  • source BitmapData | DisplayObject | Stage | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

    An object to use as a source.
    ソースとなるオブジェクトを指定します。

  • sourceRect Rectangle

    A rectangle object that defines the area of the source.
    ソースオブジェクトの範囲を示すRectangleです。

  • destPoint Point

    The destination Point that represents the upper-left corner of the destination bitmapdata.
    ピクセルの置き換え先の左上座標を示すPointです。

  • operation String

    A string representation of the comparison operator to test the pixels. The valid value are "<", "<=", ">", ">=", "==", "!=".
    ピクセルのテストに使う比較演算子を文字列で指定します。指定することができる値は、"<", "<=", ">", ">=", "==", "!="です。

  • threshold Uint

    A color value ​​to be used as a threshold. You can use only a ARGB color value (ex. 0xAARRGGBB).
    しきい値となるカラー値を指定します。0xAARRGGBB形式の16進数値のみ使用できます。

  • [color=0] Uint optional

    A new color value to set the pixels in case of passing the test. You can use only a ARGB color value (ex. 0xAARRGGBB).
    テストに合格した際にセットされる新しいカラー値を指定します。0xAARRGGBB形式の16進数値のみ使用できます。

  • [mask=0] Uint optional

    A value of the mask to use to isolate a color component. You can use only a ARGB color value (ex. 0xAARRGGBB).
    範囲を設定するマスク値を指定します。0xAARRGGBB形式の16進数値のみ使用できます。

  • [copySource=false] Boolean optional

    A boolean value that determines whether or not to copy the pixels from the source object to the current bitmapdata, when the threshold test is false.
    比較結果がfalseの場合にソースオブジェクトのピクセルを現在のBitmapDataにコピーするかをBool値で指定します。

Example:

_bmd01 = new createjs.BitmapData(_image01);
var source = _bmd01;
var halfW = _bmd01.width >> 1;
var sourceRect = new createjs.Rectangle(halfW, 0, halfW, _bmd01.height);
var destPoint = new createjs.Point(sourceRect.x, sourceRect.y);
var operation = "<";
var threshold = 0xFFEE0000;
var color = 0x00000000;
var mask = 0xFFFF0000;
var copySource = false;
_bmd01.threshold(source, sourceRect, destPoint, operation, threshold, color, mask, copySource);

toString

() String

Returns a string representation of the bitmapdata. The name property is used by output.
BitmapDataの文字列表現を返します。nameプロパティの値が使用されます。

Returns:

String:

A string representation of the bitmapdata.
BitmapDataの文字列表現です。

updateContext

()

Updates the context with the imageData (instance property). You must call this method after calling setPixel() or setPixel32(). By calling updateContext(), the bitmapdata is updated with results of setPixel() or setPixel32().
内部に保持しているimageDataの内容でcontextを更新します。setPixel(), setPixel32()の処理を行った後は、このメソッドを実行する必要があります。updateContext()を実行することでsetPixel(), setPixel32()で行った処理がBitmapDataに反映されます。

updateImageData

()

Updates the imageData of the instance property to the latest state. You must call this method when you operated context directly or you called updateCache() at the cache that got by getBitmapData().
内部に保持しているimageDataを最新の状態に更新します。contextを直接操作した場合やgetBitmapData()で取得したcacheをupdateCache()した場合には、このメソッドを実行する必要があります。

Properties

canvas

HTMLCanvasElement

A HTMLCanvasElement that bitmapdata is drawn.
BitmapDataが描画されるHTMLCanvasElementです。

context

CanvasRenderingContext2D

A CanvasRenderingContext2D of the canvas.
canvasのCanvasRenderingContext2Dです。

height

Uint

[read only] The height of the bitmapdata in pixels.
BitmapDataの高さです。

name

String

A name of the bitmapdata. It's used in toString().
BitmapDataの名前です。toString()で使用されます。

Default: null

rect

Rectangle

[read only] A rectangle object that defines the size and location of the bitmapdata.
BitmapDataの位置とサイズを示すRectangleです。

width

Uint

[read only] The width of the bitmapdata in pixels.
BitmapDataの幅です。