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: ...}]}
  />

도형 개발 현황

평면도형

• [x] 정다각형
• [x] 삼각형
• [x] 직사각형
• [x] 평행사변형
• [x] 사다리꼴
• [x] 마름모
• [x] 원
• [x] 부채꼴
• [x] 타원

입체도형

• [x] 직육면체
• [x] 다각기둥
• [x] 원기둥
• [x] 다각뿔
• [x] 원뿔
• [x] 구

그래프

• [x] y=ax^2+bx+c 꼴의 그래프
• [x] y=ax+b 꼴의 그래프
• [x] y=q 꼴의 그래프
• [x] x=p 꼴의 그래프

Development Environment

• jsxgraph 1.9.2
• @types/react 18.2.20
• @types/react-dom 18.2.7
• react 18.2.0
• react-dom 18.2.0
• typescript 4.7.2

Naming Convention

• 디렉토리명 : PascalCase

• 파일명 : PascalCase

• 함수명 : camelCase

• 변수명

  • 배열이나 객체의 경우, 복수형으로 변수명을 생성한다
    • points => points가 담긴 배열/객체 point => 점 그 자체
  • 상수의 경우 대문자로 나타낸다
    • ex) FIGURE, FIGURE_NAME
  • 변수 이름은 위치+객체(값)로 작성한다.
    • ex) leftIntersectionPoint, bottomCircle
  • 위치는 "상하>좌우" 순서로 정의한다
    • ex) bottomCenterX, upperLeftPoint
  • 위는 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
  • 라벨들이 담긴 배열의 경우, 어떤 배열+Labels로 이름을 짓는다
    • ex) bottomPointLabels,

  좌표

  • 좌표는 coord로 나타낸다.
  • X좌표는 coordX, y좌표는 coordY로 나타낸다.
  • 좌표를 특정해야 할 땐, 위치+X의 방식으로 나타낸다.
    • apexX, centerX, bottomCenterX