환경설정
Math2D API에서는 설정 핸들링를 위한 math2d.settingManager
를 제공합니다.
배경 설정
배경 색상
settingManager.background.color
를 통해 현재 배경색을 가져오거나 변경할 수 있습니다.
{
"background": {
"color": string,
},
}
- 코드 보기
- 실행 결과
const background = math2d.settingManager.background;
console.log(background.color); // #ffffff
background.color = '#daffea';
console.log(background.color); // #daffea
그리드 설정
settingManager.grid
를 통해 그리드에 대해 설정할 수 있습니다.
주 그리드(primary), 보조 그리드(secondary)에 접근하여 색상 또는 표출 상태를 설정할 수 있습니다.
{
"grid": {
"primary": {
"color": string,
"visible": boolean,
},
"secondary": {
"color": string,
"visible": boolean,
},
},
}
주 그리드 (primary grid)
settingManager.grid.primary
에는 color
와 visible
값이 있습니다.
color
를 통해 주 그리드의 색상을 가져오거나 변경할 수 있습니다.
visible
을 통해 주 그리드의 표출 상태를 가져오거나 설정할 수 있습니다.
- 코드 보기
- 실행 결과
const gridPrimary = math2d.settingManager.grid.primary;
console.log(gridPrimary.visible); // true
console.log(gridPrimary.color); // #bebebe (default)
gridPrimary.color = '#ff33aa';
보조 그리드 (secondary grid)
settingManager.grid.secondary
의 color
와 visible
를 통해 보조 그리드의 색상이나 표출 상태를 가져오고 변경할 수 있습니다.
- 코드 보기
- 실행 결과
math2d.settingManager.grid.primary.visible = false; // hide primary grid
const gridSecondary = math2d.settingManager.grid.secondary;
console.log(gridSecondary.visible); // true
console.log(gridSecondary.color); // #ececec (default)
gridSecondary.color = '#00ffaa';
축 설정
settingManager.axis
를 통해 x, y축에 대한 여러가지 설정이 가능합니다.
{
"axis": {
"x": {
"visibleType": "none" | "default" | "radian",
"range": [number, number],
},
"y": {
"visibleType": "none" | "default" | "radian",
"range": [number, number],
},
"color": string,
"visibleUnit": boolean,
"hasRange": boolean,
},
}
x, y축 보기 유형
axis.x.visibleType
, axis.y.visibleType
에서 x, y축에 관한 보기 유형 설정을 할 수 있습니다.
visibleType
속성은 "none", "default", "radian" 세 종류 중 하나입니다.
visibleType | 설명 |
---|---|
"none" | 축이 표출되지 않습니다. |
"default" | 맞춤 유리수 단위로 표출됩니다. (기본값) |
"radian" | PI 단위로 표출됩니다. |
- 코드 보기
- 실행 결과
math2d.settingManager.axis.x.visibleType = "radian";
math2d.settingManager.axis.y.visibleType = "none";
// draw algebra graph
math2d.objectManager.factory.algebraric("y=\\tan2x");
// hide grid
math2d.settingManager.grid.primary.visible = false;
math2d.settingManager.grid.secondary.visible = false;
색 설정
axis.color
로부터 축의 색상을 가져오거나 변경할 수 있습니다.
단위 표출 설정
axis.visibleUnit
으로 축의 단위 값의 표출 여부를 설정할 수 있습니다.
범위 설정
axis.hasRange
를 true
로 설정하면 x, y축을 범위로 설정할 수 있습니다.
객체 기본값 설정
settingManager.object
에서 새로운 객체를 생성할때 일부 속성의 기본값을 변경할 수 있습니다.
{
"object": {
"point": {
"basicPointColor": string,
"size": number,
"intersectPointColor": string,
},
"text": {
"basicTextColor": string,
"basicTextsize": number,
"nameTextColor": string,
"nameTextsize": number,
},
"linear": {
"thickness": number,
},
"circular": {
"thickness": number,
},
},
}
- 코드 보기
- 실행 결과
math2d.settingManager.object.point.basicPointColor = "#000000";
math2d.settingManager.object.text.nameTextColor = "#ff0000";
math2d.settingManager.object.circular.thickness = 10;
const p1 = math2d.objectManager.factory.point.basic(0, 0);
const p2 = math2d.objectManager.factory.point.basic(1, 0);
math2d.objectManager.factory.circle.circleWithCenter(p1.id, p2.id);
스냅 설정
마우스로 점 객체 등을 이동할 때 인접한 그리드로 이동되는 스냅 기능이 동작됩니다.
settingManager.snap
에서 스냅 기능에 관한 설정을 할 수 있습니다.
{
"snap": {
"type": "primary" | "secondary" | "none",
"strength": number,
}
}
type
스냅 기능의 사용 여부를 설정합니다.
"primary"
는 주 그리드 기준으로, "secondary"
는 보조 그리드 기준으로 스냅을 설정합니다.
"none"
으로 설정하면 스냅 기능을 중지합니다.
strength
스냅 기능의 강도를 설정합니다. 0 ~ 1의 값을 설정할 수 있습니다.