 |
HTML5テクニカルノート
EaselJS 0.8.0: Rectangleクラス
| ID: FN1505004 |
Technique: HTML5 and JavaScript |
Library: EaselJS 0.8.0 |
|
Rectangleクラス
|
|
継承
|
Rectangle → Object
|
|
ディレクトリ
|
easeljs/geom
|
|
Rectangle()コンストラクタ
|
|
文法
|
Rectangle(x, y, width, height)
|
|
概要
|
Rectangleインスタンスをつくる。
|
|
引数
|
x, y − 矩形領域の左上角座標。
width, height − 矩形領域の幅と高さ。
|
|
clone()メソッド
|
|
文法
|
clone()
|
|
概要
|
Rectangleインスタンスを複製して返す。
|
|
引数
|
なし。
|
|
戻り値
|
複製されたRectangleインスタンス。
|
|
contains()メソッド
|
|
文法
|
contains(x, y, width, height)
|
|
概要
|
引数のxy座標、あるいは幅と高さを含めた矩形領域が、参照したRectangleインスタンスの領域に含まれるかをブール値で返す。
|
|
引数
|
x, y − 矩形領域に含まれるかどうかを調べる座標。
width, height − 幅と高さ。指定されると、xy座標を左上角とした矩形領域が完全に含まれるかどうかを調べる。
|
|
戻り値
|
座標または矩形領域がRectangleインスタンスの領域に含まれるかどうかを示すブール値。
|
|
copy()メソッド
|
|
文法
|
copy(rectangle)
|
|
概要
|
引数のRectangleオブジェクトのすべてのプロパティ値を、参照するRectangleインスタンスにコピーする。
|
|
引数
|
rectangle − プロパティ値をコピーするもととなるRectangleオブジェクト。
|
|
戻り値
|
参照するRectangleインスタンス。
|
|
extend()メソッド
|
|
文法
|
extend(x, y, width, height)
|
|
概要
|
引数のxy座標、あるいは幅と高さを含めた矩形領域が含まれるように、参照したRectangleインスタンスの領域を拡げる。
|
|
引数
|
x, y − 矩形領域に含める座標。
width, height − 幅と高さ。指定されると、xy座標を左上角とした矩形領域が完全に含まれるように領域を拡げる。
|
|
戻り値
|
参照するRectangleインスタンス。
|
| pad()メソッド[*1]
|
|
文法
|
pad(top, left, right, bottom) |
|
概要
|
Rectangleインスタンスの矩形領域の四方に余白を加える。
|
|
引数
|
top, left, right, bottom − 矩形領域の上、左、右、下にそれぞれ加える余白の数値。
|
|
戻り値
|
参照したRectangleインスタンス。
|
|
intersection()メソッド
|
|
文法
|
intersection(rectangle)
|
|
概要
|
引数と参照したRectangleインスタンスとが重なる矩形領域を新たなRectangleオブジェクトで返す。
|
|
引数
|
rectangle − 重なる領域を調べるRectangleオブジェクト。
|
|
戻り値
|
重なりの矩形領域を示す新たなRectangleインスタンス。
|
|
intersects()メソッド
|
|
文法
|
intersects(rectangle)
|
|
概要
|
引数と参照したRectangleインスタンスの矩形領域が互いに重なるかどうかをブール値で返す。
|
|
引数
|
rectangle − 矩形領域が重なるかどうかを調べるRectangleオブジェクト。
|
|
戻り値
|
ふたつの矩形領域が互いに重なるかどうかを示すブール値。
|
|
isEmpty()メソッド
|
|
文法
|
isEmpty()
|
|
概要
|
Rectangle.widthかRectangle.heightが0以下かどうかをブール値で返す。
|
|
引数
|
なし。
|
|
戻り値
|
矩形領域の幅か高さが0以下かどうかを示すブール値。
|
|
setValues()メソッド
|
|
文法
|
setValues(x, y, width, height)
|
|
概要
|
プロパティに引数の値を定める。
|
|
引数
|
x, y − 矩形領域の左上角座標。
width, height − 矩形領域の幅と高さ。
|
|
戻り値
|
参照したRectangleインスタンス。
|
|
toString()メソッド
|
|
文法
|
toString()
|
|
概要
|
インスタンスの表現を文字列で返す。
|
|
引数
|
なし。
|
|
戻り値
|
つぎのようにプロパティ値を示す文字列。
[Rectangle (x=左座標 y=上座標 width=幅 height=高さ)]
|
|
union()メソッド
|
|
文法
|
union(rectangle)
|
|
概要
|
引数と参照したRectangleインスタンスとを含む最小の矩形領域を新たなRectangleオブジェクトで返す。
|
|
引数
|
rectangle − 領域に含めるRectangleオブジェクト。
|
|
戻り値
|
ふたつの矩形領域を含む新たなRectangleインスタンス。
|
|
heightプロパティ
|
|
文法
|
Rectangleオブジェクト.height
|
|
プロパティ値
|
矩形領域の高さ。
|
|
widthプロパティ
|
|
文法
|
Rectangleオブジェクト.width
|
|
プロパティ値
|
矩形領域の幅。
|
|
xプロパティ
|
|
文法
|
Rectangleオブジェクト.x
|
|
プロパティ値
|
矩形領域の左座標。
|
|
yプロパティ
|
|
文法
|
Rectangleオブジェクト.y
|
|
プロパティ値
|
矩形領域の上座標。
|
|
[*1] EaselJS 0.8.0のドキュメントには、Rectangle.pad()メソッドが載っていません。その代わり、Rectangle.extend()メソッドがふたつ掲げられており、ふたつ目がメソッド名を誤ったRectangle.pad()の説明だと思われます。ただし、引数のデフォルト値が0であるかのように書かれているのは、つぎの実装からわかるとおり間違いです。
|
Rectangle.prototype.pad = function(top, left, bottom, right) {
this.x -= left;
this.y -= top;
this.width += left + right;
this.height += top + bottom;
return this;
};
|
[追記: 2015年6月3日] EaselJS 0.8.1のつぎのバージョン(NEXT)で、ドキュメントは修正されます(easeljs_docs-NEXT.zip参照)。
|
説明
EaselJS 0.7.1のRectangleクラスには、geomパッケージのクラスの最低限の実装というべきメソッドRectangle.clone()、Rectangle.copy()、Rectangle.initialize()、Rectangle.toString()の4つしかありませんでした。なお、EaselJS 0.8.0をはじめとする新しいCreateJSからはinitialize()メソッドが除かれ、geomパッケージではsetValues()に改められています(「EaselJS 0.8.0: 使い回すオブジェクトにプロパティを定める」01「geomパッケージのクラスにプロパティ値を定め直す新たなメソッドが備わった」参照)。
EaselJS 0.8.0で、矩形領域の範囲を変えたり、他の矩形領域や座標との関係を調べるメソッドが7つ加わりました。これらについて、簡単にご説明します。矩形領域の範囲を変えるメソッドは、4つあります。
まず、Rectangle.extend()とRectangle.union()は、ふたつの矩形領域を合わせます。ふたつの矩形領域が完全に含まれる最小の領域を新たなRectangleオブジェクトで返します。前者は含める矩形領域を4つの数値で渡すのに対して、後者はRectangleオブジェクトを引数にします。
Rectangleオブジェクト.extend(x, y, width, height)
Rectangleオブジェクト.union(rectangle)
つぎに、Rectangle.intersection()メソッドも、ふたつの矩形領域から新たなRectangleオブジェクトをつくって返します。その矩形は、参照するRectangleオブジェクトと引数のオブジェクトが重なり合う領域で定められます。
Rectangleオブジェクト.intersection(rectangle)
そして、Rectangle.pad()メソッドは、矩形領域の上下左右に余白を加えて拡げます。このメソッドは、参照するRectangleオブジェクトそのものの矩形領域を変え、新たなインスタンスはつくりません。ただ、参照したオブジェクトが戻り値になりますので、さらに続けて他のメソッドの呼出しやプロパティの参照ができます。
Rectangleオブジェクト.pad(top, left, right, bottom)
矩形領域について調べるメソッドは3つあり、いずれもブール値を返します。ふたつの矩形領域について、引数の領域と少しでも重なるかはRectangle.intersects()、完全に含むかどうかはRectangle.contains()メソッドで調べます。引数の矩形領域は、前者がRectangleオブジェクトで渡すのに対して、後者は4つの数値で与えます。
Rectangleオブジェクト.intersects(rectangle)
Rectangleオブジェクト.contains(x, y, width, height)
さらに、Rectangle.contains()メソッドは初めのふたつの引数だけ渡すと、そのxy座標が矩形領域の中にあるかどうかがわかります。そして、Rectangle.isEmpty()メソッドは、矩形領域に有効な幅あるいは高さが定められているかどうかを調べます。いずれかが0以下であれば、trueが返されます。
Rectangleオブジェクト.isEmpty()
例
以下のふたつのスクリプトは、ふたつの同じ矩形領域を合わせて、新たなRectangleオブジェクトにしました。含める矩形領域の引数は、Rectangle.extend()メソッドが4つの数値、Rectangle.union()はRectangleオブジェクトで渡しています。
|
var rect0 = new createjs.Rectangle(20, 15, 120, 90);
var rect1 = rect0.extend(120, 60, 60, 80);
console.log(rect1.toString());
// [Rectangle (x=20 y=15 width=160 height=125)]
|
|
var rect0 = new createjs.Rectangle(20, 15, 120, 90);
var rect1 = new createjs.Rectangle(120, 60, 60, 80);
var rect2 = rect0.union(rect1);
console.log(rect2.toString());
// [Rectangle (x=20 y=15 width=160 height=125)]
|
内部的にRectangle.union()メソッドは、Rectangle.clone()とRectangle.extend()をつなぎ合わせて、つぎのように実装されています。
|
Rectangle.prototype.union = function(rect) {
return this.clone().extend(rect.x, rect.y, rect.width, rect.height);
};
|
作成者: 野中文雄
更新日: 2015年6月3日 注[*1]に[追記]を加えた。
作成日: 2015年5月29日
Copyright ©
2001-2015 Fumio Nonaka. All rights reserved.
|
