Class: Axes | egjs::axes

new eg.Axes(axis, options, startPos)

Axes.js, line 55

A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.

터치 입력 장치나 마우스와 같은 다양한 입력 장치를 통해 전달 받은 사용자의 동작을 논리적인 가상 좌표로 변경하는 모듈이다. 사용자 동작에 반응하는 UI를 손쉽게 만들수 있다.

axis

Type: Object.<string, AxisOption>

Axis information managed by eg.Axes. The key of the axis specifies the name to use as the logical virtual coordinate system.

eg.Axes가 관리하는 축 정보. 축의 키는 논리적인 가상 좌표계로 사용할 이름을 지정한다.
options optional

Type: AxesOption

The option object of the eg.Axes module

eg.Axes 모듈의 옵션 객체
startPos optional

Type: Object.<string, number>

The coordinates to be moved when creating an instance. not triggering change event.

인스턴스 생성시 이동할 좌표, change 이벤트는 발생하지 않음.

Example

// 1. Initialize eg.Axes

const axes = new eg.Axes({

something1: {

range: [0, 150],

bounce: 50

},

something2: {

range: [0, 200],

bounce: 100

},

somethingN: {

range: [1, 10],

}

}, {

deceleration : 0.0024

});
// 2. attach event handler

axes.on({

"hold" : function(evt) {

},

"release" : function(evt) {

},

"animationStart" : function(evt) {

},

"animationEnd" : function(evt) {

},

"change" : function(evt) {

}

});
// 3. Initialize inputTypes

const panInputArea = new eg.Axes.PanInput("#area", {

scale: [0.5, 1]

});

const panInputHmove = new eg.Axes.PanInput("#hmove");

const panInputVmove = new eg.Axes.PanInput("#vmove");

const pinchInputArea = new eg.Axes.PinchInput("#area", {

scale: 1.5

});
// 4. Connect eg.Axes and InputTypes

// [PanInput] When the mouse or touchscreen is down and moved.

// Connect the 'something2' axis to the mouse or touchscreen x position and

// connect the 'somethingN' axis to the mouse or touchscreen y position.

axes.connect(["something2", "somethingN"], panInputArea); // or axes.connect("something2 somethingN", panInputArea);
// Connect only one 'something1' axis to the mouse or touchscreen x position.

axes.connect(["something1"], panInputHmove); // or axes.connect("something1", panInputHmove);
// Connect only one 'something2' axis to the mouse or touchscreen y position.

axes.connect(["", "something2"], panInputVmove); // or axes.connect(" something2", panInputVmove);
// [PinchInput] Connect 'something2' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out).

axes.connect("something2", pinchInputArea);

Browser Support

Browser	Version
Desktop - Internet Explorer	10+
Desktop - Chrome	latest
Desktop - Firefox	latest
Desktop - Safari	latest
Desktop - Edge	latest
iOS	7+
Andorid	2.3+ (except 3.x)

Extends

eg.Component

Classes

MoveKeyInput
PanInput
PinchInput
RotatePanInput
WheelInput

Members

static,constanteg.Axes.DIRECTION_ALLNumber

static,constanteg.Axes.DIRECTION_DOWNNumber

static,constanteg.Axes.DIRECTION_HORIZONTALNumber

static,constanteg.Axes.DIRECTION_LEFTNumber

static,constanteg.Axes.DIRECTION_NONENumber

static,constanteg.Axes.DIRECTION_RIGHTNumber

static,constanteg.Axes.DIRECTION_UPNumber

static,constanteg.Axes.DIRECTION_VERTICALNumber

static,constanteg.Axes.TRANSFORMString

Returns the transform attribute with CSS vendor prefixes.

CSS vendor prefixes를 붙인 transform 속성을 반환한다.

Example

eg.Axes.TRANSFORM; // "transform" or "webkitTransform"

staticeg.Axes.VERSIONString

Version info string

버전정보 문자열

Example

eg.Axes.VERSION;  // ex) 3.3.3

Methods

connect(axes, inputType){eg.Axes} Axes.js, line 151

Connect the axis of eg.Axes to the inputType.

eg.Axes의 축과 inputType을 연결한다

axes

Type: Array.<String> | String

The name of the axis to associate with inputType

inputType과 연결할 축의 이름
inputType

Type: Object

The inputType instance to associate with the axis of eg.Axes eg.Axes의 축과 연결할 inputType 인스턴스

The inputType instance to associate with the axis of eg.Axes eg.Axes의 축과 연결할 inputType 인스턴스

Returns:

Type	Description
eg.Axes	An instance of a module itself 모듈 자신의 인스턴스

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"xOther": {

range: [-100, 100]

}

});
axes.connect("x", new eg.Axes.PanInput("#area1"))

.connect("x xOther", new eg.Axes.PanInput("#area2"))

.connect(" xOther", new eg.Axes.PanInput("#area3"))

.connect(["x"], new eg.Axes.PanInput("#area4"))

.connect(["xOther", "x"], new eg.Axes.PanInput("#area5"))

.connect(["", "xOther"], new eg.Axes.PanInput("#area6"));

destroy() Axes.js, line 357

Destroys properties, and events used in a module and disconnect all connections to inputTypes.

모듈에 사용한 속성, 이벤트를 해제한다. 모든 inputType과의 연결을 끊는다.

disconnect(inputType){eg.Axes} Axes.js, line 199

Disconnect the axis of eg.Axes from the inputType.

eg.Axes의 축과 inputType의 연결을 끊는다.

inputType optional

Type: Object

An inputType instance associated with the axis of eg.Axes eg.Axes의 축과 연결한 inputType 인스턴스

An inputType instance associated with the axis of eg.Axes eg.Axes의 축과 연결한 inputType 인스턴스

Returns:

Type	Description
eg.Axes	An instance of a module itself 모듈 자신의 인스턴스

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"xOther": {

range: [-100, 100]

}

});
const input1 = new eg.Axes.PanInput("#area1");

const input2 = new eg.Axes.PanInput("#area2");

const input3 = new eg.Axes.PanInput("#area3");
axes.connect("x", input1);

.connect("x xOther", input2)

.connect(["xOther", "x"], input3);
axes.disconnect(input1); // disconnects input1

axes.disconnect(); // disconnects all of them

get(axes){Object.<string, number>} Axes.js, line 240

Returns the current position of the coordinates.

좌표의 현재 위치를 반환한다

axes optional

Type: Object

The names of the axis

축 이름들

Returns:

Type	Description
Object.<string, number>	Axis coordinate information 축 좌표 정보

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"xOther": {

range: [-100, 100]

},

"zoom": {

range: [50, 30]

}

});
axes.get(); // {"x": 0, "xOther": -100, "zoom": 50}

axes.get(["x", "zoom"]); // {"x": 0, "zoom": 50}

isBounceArea(axes){Boolen} Axes.js, line 331

Returns whether there is a coordinate in the bounce area of the target axis.

대상 축 중 bounce영역에 좌표가 존재하는지를 반환한다

axes optional

Type: Object

The names of the axis

축 이름들

Returns:

Type	Description
Boolen	Whether the bounce area exists. bounce 영역 존재 여부

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"xOther": {

range: [-100, 100]

},

"zoom": {

range: [50, 30]

}

});
axes.isBounceArea(["x"]);

axes.isBounceArea(["x", "zoom"]);

axes.isBounceArea();

setBy(pos, duration){eg.Axes} Axes.js, line 298

Moves an axis from the current coordinates to specific coordinates.

현재 좌표를 기준으로 좌표를 이동한다.

pos

Type: Object.<string, number>

The coordinate to move to

이동할 좌표
duration (default: 0) optional

Type: Number

Duration of the animation (unit: ms)

애니메이션 진행 시간(단위: ms)

Returns:

Type	Description
eg.Axes	An instance of a module itself 모듈 자신의 인스턴스

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"xOther": {

range: [-100, 100]

},

"zoom": {

range: [50, 30]

}

});
axes.setBy({"x": 30, "zoom": 10});

axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}
axes.setBy({"x": 70, "xOther": 60}, 1000); // animatation
// after 1000 ms

axes.get(); // {"x": 100, "xOther": -40, "zoom": 60}

setTo(pos, duration){eg.Axes} Axes.js, line 265

Moves an axis to specific coordinates.

좌표를 이동한다.

pos

Type: Object.<string, number>

The coordinate to move to

이동할 좌표
duration (default: 0) optional

Type: Number

Duration of the animation (unit: ms)

애니메이션 진행 시간(단위: ms)

Returns:

Type	Description
eg.Axes	An instance of a module itself 모듈 자신의 인스턴스

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"xOther": {

range: [-100, 100]

},

"zoom": {

range: [50, 30]

}

});
axes.setTo({"x": 30, "zoom": 60});

axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}
axes.setTo({"x": 100, "xOther": 60}, 1000); // animatation
// after 1000 ms

axes.get(); // {"x": 100, "xOther": 60, "zoom": 60}

Events

animationEnd EventManager.js, line 230

This event is fired when animation ends.

에니메이션이 끝났을 때 발생한다.

Type:

object

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"zoom": {

range: [50, 30]

}

}).on("animationEnd", function(event) {

// event.isTrusted

});

Properties:

Name	Type	Description
`isTrusted`	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call 사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.

animationStart EventManager.js, line 187

This event is fired when animation starts.

에니메이션이 시작할 때 발생한다.

Type:

object

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"zoom": {

range: [50, 30]

}

}).on("release", function(event) {

// event.depaPos

// event.destPos

// event.delta

// event.input

// event.inputEvent

// event.setTo

// event.isTrusted
// if you want to change the animation coordinates to move after the 'animationStart' event.

event.setTo({x: 10}, 2000);

});

Properties:

Name	Type	Description
`depaPos`	Object.<string, number>	The coordinates when animation starts 애니메이션이 시작 되었을 때의 좌표
`destPos`	Object.<string, number>	The coordinates to move to. If you change this value, you can run the animation 이동할 좌표. 이값을 변경하여 애니메이션을 동작시킬수 있다
`delta`	Object.<string, number>	The movement variation of coordinate 좌표의 변화량
`duration`	Number	Duration of the animation (unit: ms). If you change this value, you can control the animation duration time. 애니메이션 진행 시간(단위: ms). 이값을 변경하여 애니메이션의 이동시간을 조절할 수 있다.
`input`	Object	The instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'. 이벤트가 발생한 inputType 인스턴스. 애니메이션에 의해 값이 변경될 경우에는 'null'을 반환한다.
`inputEvent`	Object	The event object received from inputType inputType으로 부터 받은 이벤트 객체
`setTo`	setTo	Specifies the animation coordinates to move after the event 이벤트 이후 이동할 애니메이션 좌표를 지정한다
`isTrusted`	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call 사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.

change EventManager.js, line 130

This event is fired when coordinate changes.

좌표가 변경됐을 때 발생하는 이벤트

Type:

object

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"zoom": {

range: [50, 30]

}

}).on("change", function(event) {

// event.pos

// event.delta

// event.input

// event.inputEvent

// event.holding

// event.set

// event.isTrusted
// if you want to change the coordinates to move after the 'change' event.

// it works when the holding value of the change event is true.

event.holding && event.set({x: 10});

});

Properties:

Name	Type	Description
`pos`	Object.<string, number>	The coordinate 좌표
`delta`	Object.<string, number>	The movement variation of coordinate 좌표의 변화량
`holding`	Boolean	Indicates whether a user holds an element on the screen of the device. 사용자가 기기의 화면을 누르고 있는지 여부
`input`	Object	The instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'. 이벤트가 발생한 inputType 인스턴스. 애니메이션에 의해 값이 변경될 경우에는 'null'을 반환한다.
`inputEvent`	Object	The event object received from inputType. If the value is changed by animation, it returns 'null'. inputType으로 부터 받은 이벤트 객체. 애니메이션에 의해 값이 변경될 경우에는 'null'을 반환한다.
`set`	set	Specifies the coordinates to move after the event. It works when the holding value is true 이벤트 이후 이동할 좌표를 지정한다. holding 값이 true일 경우에 동작한다.
`isTrusted`	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call 사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.

finish EventManager.js, line 256

This event is fired when all actions have been completed.

에니메이션이 끝났을 때 발생한다.

Type:

object

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"zoom": {

range: [50, 30]

}

}).on("finish", function(event) {

// event.isTrusted

});

Properties:

Name	Type	Description
`isTrusted`	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call 사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.

hold EventManager.js, line 17

This event is fired when a user holds an element on the screen of the device.

사용자가 기기의 화면에 손을 대고 있을 때 발생하는 이벤트

Type:

object

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"zoom": {

range: [50, 30]

}

}).on("hold", function(event) {

// event.pos

// event.input

// event.inputEvent

// isTrusted

});

Properties:

Name	Type	Description
`pos`	Object.<string, number>	coordinate 좌표 정보
`input`	Object	The instance of inputType where the event occurred 이벤트가 발생한 inputType 인스턴스
`inputEvent`	Object	The event object received from inputType inputType으로 부터 받은 이벤트 객체
`isTrusted`	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call 사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.

release EventManager.js, line 88

This event is fired when a user release an element on the screen of the device.

사용자가 기기의 화면에서 손을 뗐을 때 발생하는 이벤트

Type:

object

Example

const axes = new eg.Axes({

"x": {

range: [0, 100]

},

"zoom": {

range: [50, 30]

}

}).on("release", function(event) {

// event.depaPos

// event.destPos

// event.delta

// event.input

// event.inputEvent

// event.setTo

// event.isTrusted
// if you want to change the animation coordinates to move after the 'release' event.

event.setTo({x: 10}, 2000);

});

Properties:

Name	Type	Description
`depaPos`	Object.<string, number>	The coordinates when releasing an element 손을 뗐을 때의 좌표
`destPos`	Object.<string, number>	The coordinates to move to after releasing an element 손을 뗀 뒤에 이동할 좌표
`delta`	Object.<string, number>	The movement variation of coordinate 좌표의 변화량
`inputEvent`	Object	The event object received from inputType inputType으로 부터 받은 이벤트 객체
`input`	Object	The instance of inputType where the event occurred 이벤트가 발생한 inputType 인스턴스
`setTo`	setTo	Specifies the animation coordinates to move after the event 이벤트 이후 이동할 애니메이션 좌표를 지정한다
`isTrusted`	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call 사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.