EaselJSの次期バージョン(NEXT)のPointクラスに3つのメソッドが加えられました。xy座標値をただもっているだけだったPointクラスには、その演算のためのメソッドが備えられていくようです。新しいメソッドのサンプルコードをご紹介します。
Point.polar()とoffset()メソッド
静的メソッドPoint.polar()は、原点(0, 0)からの距離(length)および水平軸となすラジアン角(angle)を引数に渡すと、その座標のPointオブジェクトを返します。距離を一定にして角度を変えていけば、円運動が簡単に表せるのです。
point = createjs.Point.polar(length, angle);
Point.offset()メソッドはxy座標値を引数にして、参照するインスタンスの座標に足しこみます。もとのオブジェクトの座標がその分ずれるということです。
point.offset(x, y);
もっともこれまでも、つぎのように書けば済みました。メソッドを使うと、少し見やすくなるというくらいでしょうか。
point.x += x;
point.y += y;
以下のサンプル001では、つぎのような関数(setOnCircle())で円軌道上にオブジェクト(circle)を置いています。メソッドPoint.polar()は原点を(0, 0)とするので、Position.offset()により中心座標(center)にずらしました。なお、Point.polar()メソッドの第3引数にPointオブジェクトを渡すと、新たなインスタンスはつくらず、そのオブジェクトにxy座標が与えられます。関数の引数に渡す角度(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
Point.interpolate()メソッド
静的メソッドPoint.interpolate()は、はじめのふたつの引数(point1とpoint0)の座標が結ばれた直線上に座標を定めて、Pointオブジェクトとして返します。座標を決めるのは第3引数の比率(f)です。
point = createjs.Point.interpolate(point1, point0, f);
比率(f)が1なら第1引数(point1)、0だと第2引数(point0)の座標になります。0から1の間では2点間、1より大きいと第1引数の外、マイナスのときは第2引数の外の座標のオブジェクトが返されます。比率を変えることで、直線上のすべての点が表せるのです。
以下のサンプル002は、つぎの抜き書きのような関数(move())でふたつの座標(startとend)が結ばれた直線上にオブジェクト(circle)を置いています。比率(f)を連続して変化させれば、直線的なアニメーションになるのです。なお、なお、Point.interpolate()メソッドの第4引数にPointオブジェクトを渡すと、新たなインスタンスはつくらず、そのオブジェクトにxy座標が与えられます。
function move() {
createjs.Point.interpolate(start, end, f, position);
circle.x = position.x;
circle.y = position.y;
}
