1.0.13 • Published 11 months ago
tmax-algeo v1.0.13
jsxgraph
Info
문제가 자동생성 될 때 해당하는 도형을 자동으로 렌더링하는 라이브러리
실제 사용 사례
How to Use
npm i tmax-algeo
import { Board } from "tmax-algeo"
<Board />
컴포넌트는 해당 props가 필요합니다.style
: Board의 크기, 색상 등의 css 적용output
: 도형 객체가 담긴 리스트
example
<Board style={{width: "100%"; height: "fit-content"}} output={[{name:"dot", coordinate: ...}, {name:"square", coord: ...}]} />
도형 개발 현황
평면도형
- 정다각형
- 삼각형
- 직사각형
- 평행사변형
- 사다리꼴
- 마름모
- 원
- 부채꼴
- 타원
입체도형
- 직육면체
- 다각기둥
- 원기둥
- 다각뿔
- 원뿔
- 구
그래프
- y=ax^2+bx+c 꼴의 그래프
- y=ax+b 꼴의 그래프
- y=q 꼴의 그래프
- x=p 꼴의 그래프
Development Environment
jsxgraph
1.9.2@types/react
18.2.20@types/react-dom
18.2.7react
18.2.0react-dom
18.2.0typescript
4.7.2
Naming Convention
- 디렉토리명 : PascalCase
- 파일명 : PascalCase
- 함수명 : camelCase
변수명
- 배열이나 객체의 경우, 복수형으로 변수명을 생성한다
points
=> points가 담긴 배열/객체point
=> 점 그 자체
- 상수의 경우 대문자로 나타낸다
- ex)
FIGURE
,FIGURE_NAME
- ex)
- 변수 이름은
위치+객체(값)
로 작성한다.- ex)
leftIntersectionPoint
,bottomCircle
- ex)
- 위치는 "상하>좌우" 순서로 정의한다
- ex)
bottomCenterX
,upperLeftPoint
- ex)
- 위는
upper
, 아래는bottom
으로 통일한다
points
- 점의 정보가 담긴 객체는
points
이다. points
객체의 경우, 아래와 같은 값을 갖는다.- x: point의 x좌표
- y: point의 y좌표
- JXG: 실제 board에서의 점 객체
points
객체에서는, 점의 label값을 이용해 접근해야 한다.
라벨
- 라벨은 text 객체로 생성한다.
- text 객체 생성 시, name 속성을 넣는다
- 점의 라벨 :
point_${label}
- 길이의 라벨 :
length_${label1}_${label2}
- 각의 라벨 :
angle_${label1}_${label2}_${label3}
,
- 점의 라벨 :
- 점의 라벨들은
dotLabels
배열로 관리한다. - 라벨 이름을 지을 때는,
label+위치(속성)+객체
의 방식으로 변수명을 짓는다- ex)
labelCenter
,labelApex
,labelRadiusCenter
- ex)
- 라벨들이 담긴 배열의 경우,
어떤 배열+Labels
로 이름을 짓는다- ex)
bottomPointLabels
,
- ex)
좌표
- 좌표는
coord
로 나타낸다. - X좌표는
coordX
, y좌표는coordY
로 나타낸다. - 좌표를 특정해야 할 땐,
위치+X
의 방식으로 나타낸다.apexX
,centerX
,bottomCenterX
- 배열이나 객체의 경우, 복수형으로 변수명을 생성한다
1.0.9
12 months ago
1.0.8
12 months ago
1.0.11
11 months ago
1.0.10
11 months ago
1.0.13
11 months ago
1.0.12
11 months ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.4.7
2 years ago
0.4.6
2 years ago
0.4.5
2 years ago
0.4.4
2 years ago
0.4.3
2 years ago
0.4.2
2 years ago
0.4.1
2 years ago
0.4.0
2 years ago
0.3.5
2 years ago
0.3.4
2 years ago
0.3.3
2 years ago
0.3.2
2 years ago
0.3.1
2 years ago
0.3.0
2 years ago
0.2.4
2 years ago
0.2.3
2 years ago
0.2.2
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago