EaselJS 차기 버전 (NEXT) Point 클래스에 세 가지 메서드가 추가되었습니다. . 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

>>jsdo.it로

Point.interpolate() 메서드

정적 메소드 Point.interpolate() 은, 처음의 2 개의 인수 (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는 두 개의 좌표 (start와 end)가 묶인 직선에 객체 (circle)를 놓고 다음 빼기와 같은 함수 (move ())를 사용합니다. 비율(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

>>jsdo.it로