EaselJSのPointクラスをFlashライクに拡張しよう

現在のEaselJSのPointクラスは、まだバーションが0.50であることもあり、必要最小限の機能しか定義されていません。JavaScriptは、定義済みのオブジェクトでもprototypeを通して拡張することができるので、勉強も兼ねてEaselJSのPointクラスをActionScript3.0と同様に扱えるように拡張してみました。ファイルをダウンロードできるようにしていますので、よろしければご自由にお使い下さい。

EaselJSのPointクラスを拡張する point-ex.js

下記のリンクより、EaselJSのPointクラスを拡張するpoint-ex.jsをダウンロードして頂けます。ライセンスフリーですので、商用でもご自由にお使い下さい。

point-ex.jsの読み込み

まず、HTMLのhead領域で下記のように記述し、point-ex.jsのJavaScriptファイルを読み込みます。必ず、EaselJSのファイルよりも後に読み込むようにして下さい。これでEaselJSのPointクラスでもActionScript3.0と同様の機能が使えるようになります。

HTML

<script type="text/javascript" src="js/easeljs-0.5.0.min.js"></script>
<script type="text/javascript" src="js/point-ex-0.5.0.js"></script>

ベクトルの長さを返す getLength()

ActionScript3.0では、ベクトルの長さをlengthプロパティで取得できますが、JavaScriptでは古いブラウザでアクセサがサポートされていないため、getLengthメソッドとして定義しました。getLength()は、ベクトルの長さを数値で返します。

追記 2013/12/10

Point-ex for EaselJS ver0.7では、lengthをgetterで定義しました。そのため、lengthはAS3と同様に読み取り専用のプロパティとして使用できます。v0.7では、getLength()をDeprecated(将来廃止予定)としていますので、lengthプロパティを使用するようにして下さい。

JavaScript

var point1 = new createjs.Point(0, 100);
var point2 = new createjs.Point(-50, 50);
console.log(point1.getLength()); // 出力:100
console.log(point2.getLength()); // 出力:70.71067811865476

ベクトルを加算する add()

add()は、現在のベクトルに引数で渡されたPointインスタンスのベクトルを加算して、新しいPointインスタンスとして返します。

JavaScript

var point1 = new createjs.Point(100, 50);
var point2 = new createjs.Point(-50, 50);
var point3 = point1.add(point2);
console.log(point3.toString()); // 出力:[Point (x=50 y=100)]

ベクトルを減算する subtract()

subtract()は、現在のベクトルから引数で渡されたPointインスタンスのベクトルを減算して、新しいPointインスタンスとして返します。

JavaScript

var point1 = new createjs.Point(50, 100);
var point2 = new createjs.Point(100, -50);
var point3 = point1.subtract(point2);
console.log(point3.toString()); // 出力:[Point (x=-50 y=150)]

座標が等しいかを判別する equals()

equals()は、現在のPointインスタンスの座標が引数で渡されたPointインスタンスの座標と等しいかをBool値で返します。座標が等しい場合はtrue, 等しくない場合はfalseを返します。

JavaScript

var point1 = new createjs.Point(100, 100);
var point2 = new createjs.Point(100, -100);
var point3 = new createjs.Point(100, 100);
console.log(point1.equals(point2)); // 出力:false
console.log(point1.equals(point3)); // 出力:true

座標をオフセットする offset()

offset()は、現在のPointインスタンスの座標を指定した量だけオフセットします。第1引数でx座標のオフセット量、第2引数でy座標のオフセット量を指定します。

JavaScript

var point1 = new createjs.Point(50, 50);
point1.offset(25, -25);
console.log(point1.toString()); // 出力:[Point (x=75 y=25)]
point1.offset(-100, 100);
console.log(point1.toString()); // 出力:[Point (x=-25 y=125)]

ベクトルの長さを変更する normalize()

normalize()は、ベクトルの長さが引数で渡された値となるように現在のPointインスタンスの座標を変更します。

JavaScript

var point1 = new createjs.Point(50, 50);
point1.normalize(1);
console.log(point1.toString()); // 出力:[Point (x=0.7071067811865476 y=0.7071067811865476)]

2つの座標間の距離を返す Point.distance()

Point.distance()は、引数で渡された2つのPointインスタンスの距離を数値で返します。第1, 2引数で距離を測りたいPointインスタンスを渡します。distance()は、staticメソッドです。

JavaScript

var point1 = new createjs.Point(50, 50);
var point2 = new createjs.Point(100, 100);
console.log(createjs.Point.distance(point1, point2)); // 出力:70.71067811865476

2つの座標間の座標を返す Point.interpolate()

Point.interpolate()は、第1, 2引数で渡されたPointインスタンス間の座標をPointインスタンスで返します。第3引数で2つのPoint間の比率を数値で指定します。第3引数が1に近いほど第1引数のPointに近づき、0に近いほど第2引数のPointに近づきます。interpolate()は、staticメソッドです。

JavaScript

var point1 = new createjs.Point(50, 100);
var point2 = new createjs.Point(100, -100);
console.log(createjs.Point.interpolate(point1, point2, 0).toString());
console.log(createjs.Point.interpolate(point1, point2, 0.5).toString());
console.log(createjs.Point.interpolate(point1, point2, 1).toString());
/* 出力:
[Point (x=100 y=-100)]
[Point (x=75 y=0)]
[Point (x=50 y=100)]
*/

ベクトルの長さと角度を座標に変換する Point.polar()

Point.polar()は、ベクトルの長さと角度を座標に変換してPointインスタンスで返します。第1引数でベクトルの長さ、第2引数で角度をラジアン値で指定します。polar()は、staticメソッドです。

JavaScript

var degree2radian = Math.PI / 180;
var point1 = createjs.Point.polar(10, 0 * degree2radian);
var point2 = createjs.Point.polar(10, 45 * degree2radian);
var point3 = createjs.Point.polar(10, 90 * degree2radian);
var point4 = createjs.Point.polar(10, 135 * degree2radian);
var point5 = createjs.Point.polar(10, 180 * degree2radian);
console.log(point1.toString()); // 出力:[Point (x=10 y=0)]
console.log(point2.toString()); // 出力:[Point (x=7.0710678118654755 y=7.071067811865475)]
console.log(point3.toString()); // 出力:[Point (x=6.123233995736766e-16 y=10)]
console.log(point4.toString()); // 出力:[Point (x=-7.071067811865475 y=7.0710678118654755)]
console.log(point5.toString()); // 出力:[Point (x=-10 y=1.2246467991473533e-15)]