HTML5テクニカルノート

EaselJS NEXT: Pointクラスに新たに加わるメソッド

EaselJSの次期バージョン(NEXT)のPointクラスに3つのメソッドが加えられます。ただxy座標をもつだけでなく、その演算のメソッドが備えられていくようです。

Pointクラス
継承	Point → Object
ディレクトリ	easeljs/geom
offset()メソッド
文法	offset(dx: number, dy: number): Point
概要	オブジェクトのxy座標を引数のxy座標値分ずらす。
引数	dx － オブジェクトのx座標のプロパティに加える数値。 dy － オブジェクトのy座標のプロパティに加える数値。
戻り値	メソッドが参照するPointオブジェクト。
interpolate()メソッド
文法	Point.interpolate(point1: Point | Object, point0: Point | Object, f: number, [point: Point]): Point
概要	[静的] ふたつのオブジェクトの座標を結ぶ直線上に、2点の距離に対する比率から導かれる座標のオブジェクトを返す。
引数	point1 － 直線を定める1点のxy座標オブジェクト。 point0 － 直線を定めるもう1点のxy座標オブジェクト。 f ー 2点間の距離を1とする比率。 point ー xy座標値を定めて戻り値とするオブジェクト。省くと、新たなPointオブジェクトで返される。
戻り値	第1および第2引数の2点を結ぶ直線上にある座標のPointオブジェクト。第3引数の比率が0以上1以下の場合は内分点、それ以外であれば外分点を示す。
polar()メソッド
文法	Point.polar(length: number, angle: number, [point: Point]): Point
概要	[静的] 原点(0, 0)から第1引数の距離で、x軸の正方向となす角度が第2引数となる座標のオブジェクトを返す。
引数	length － 原点(0, 0)からの距離のピクセル数。 angle － x軸の正方向となす角度のラジアン値。 point ー xy座標値を定めて戻り値とするオブジェクト。省くと、新たなPointオブジェクトで返される。
戻り値	第1引数の距離と第2引数の角度により定められた極座標を、xy座標に変換したPointオブジェクト。

説明

offset()メソッド

参照するPointインスタンスのxy座標のプロパティに、引数のxy座標値(dxとdy)を加えます。加えられた値の分、もとのPointオブジェクトの座標は位置がずれるということです。戻り値は参照したオブジェクト自身ですので、それに対してさらにPointクラスのメソッドが呼び出せます。

Point.interpolate()メソッド

第1引数(point1)と第2引数(point0)の2点を通る直線上にある座標のPointオブジェクトが返されます。第3引数(f)の比率が0以上1以下のとき、2点を(f - 1) : fに内分する座標のオブジェクトが戻り値です。つまり、比率が1であれば第1引数、0なら第2引数の座標のオブジェクトが返ります。

比率が1より大きいと、戻り値は2点を(f - 1) : fに外分する座標のオブジェクトになります。また、比率が負の場合も外分となり、返されるのは(1 - f) : -fの座標のオブジェクトです(内分と外分については「内分点と外分点の求め方」参照)^[*1]。

第4引数にPointオブジェクトを渡すと戻り値となり、xy座標のプロパティに求める数値が納められます。新たなインスタンスはつくらないので、要らなくなったオブジェクトをガベージコレクトする負荷も減らせます。

Point.polar()メソッド

原点からの距離およびx軸の正方向となす角度のふたつの数値で示す位置(length, angle)は「極座標」と呼ばれます。このメソッドは、極座標をxy直交座標に計算し直したオブジェクトにして返すのです(「直交座標と極座標（２次元）の変換とメリットの比較」)。なお、第2引数の角度は、度数でなくラジアン角であることにご注意ください。

第3引数にPointオブジェクトを渡すと戻り値となり、xy座標のプロパティに求める数値が納められます。新たなインスタンスはつくらないので、要らなくなったオブジェクトをガベージコレクトする負荷も減らせます。

例

offset()メソッド

let point = new createjs.Point(2, 1);
const dx = 1;
const dy = 3;
point.offset(dx, dy);
console.log(point);  // Point {x: 3, y: 4}

これまでのバージョンでも、プロパティに値を加えることはできました。

point.x += dx;
point.y += dy;

あるいは、Point.setValues()メソッドでも同じ結果は得られます。

point.setValues(point.x + dx, point.y + dy);

Point.interpolate()メソッド

const point0 = new createjs.Point()
const point1 = new createjs.Point(3, 4)
console.log(createjs.Point.interpolate(point1, point0, 0.5))
// Point {x: 1.5, y: 2}
console.log(createjs.Point.interpolate(point1, point0, 2))
// Point {x: 6, y: 8}
console.log(createjs.Point.interpolate(point1, point0, -1))
// Point {x: -3, y: -4}

以下のサンプル001は、つぎの抜き書きのような関数(move())でふたつの座標(startとend)が結ばれた直線上にオブジェクト(circle)を置いています。比率(f)を連続して変化させれば、直線的なアニメーションになるのです。

function move() {

    createjs.Point.interpolate(start, end, f, position);
    circle.x = position.x;
    circle.y = position.y;

}

サンプル001■CreateJS NEXT: Point.interpolate() method

Point.polar()メソッド

let point = createjs.Point.polar(2, Math.PI / 3)
console.log(point);  // Point {x: 1.0000000000000002, y: 1.7320508075688772}

以下のサンプル002では、つぎのような関数(setOnCircle())で円軌道上にオブジェクト(circle)を置いています。メソッドPoint.polar()は原点を(0, 0)とするので、Position.offset()により中心座標(center)にずらしました。関数の引数に渡す角度(angle)を動かせば円軌道のアニメーションです。

function setOnCircle(angle) {
    createjs.Point.polar(radius, angle, position);
    position.offset(center.x, center.y);
    circle.x = position.x;
    circle.y = position.y;
}

サンプル001■CreateJS NEXT: Point.polar() and offset() methods

---

作成者: 野中文雄
更新日; 2017年12月25日 サンプル001と002を加え、本文とコードも補った。
作成日: 2017年12月24日

---

Copyright © 2001-2017 Fumio Nonaka.  All rights reserved.