0
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

CreateJS NEXT: Pointクラスに新らしく加わるメソッドを使ってみる

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_polar_offset.png
>> jsdo.itへ

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;

}

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

Point_interpolate.png
>> jsdo.itへ

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?