[OpenStreetMap 활용하여 지도 사이트 만들기] 화면에 출력하기
지난번에 이어 DB에 있는 데이터를 가져와 화면에 출력할 예정임. 1. 프로젝트 진행할 디렉토리 만들기 cd 또는 cd /d 사용하여 원하는 폴더로 이동 mkdir 디렉토리명 cd 디렉토리명 2. package.json 생성 npm init -y 3. 필요한 모듈 또는 플러그인 설치 npm install --save pg dotenv express axios cors ol npm install --save-dev parcel-bundler 4. package.json 내용 수정 및 추가 { "name": "gis", "version": "0.0.1", "type": "module", "description": "get map data", "main": "main.js", "scripts": { "test..
캔버스에 랜덤 좌표 찍고 모양 만들기 (feat.극좌표계) / 23.04.25 내용 추가 수정
캔버스에 영역을 선택해야 한다. 문제는 좌표값을 받아서 테두리 따라 모양을 만들어야 하는데 위치 및 개수가 랜덤이다. 좌표 개수는 최소 4, 최대 6이라는 제한을 두게 된다. 이것 때문에 약 3일을 고민했다. 처음에는 선분끼리 겹치면 지우는 방법(ccw)을 택했는데 4각형은 괜찮았으나 5각형부터 문제였다. 그래서 다음에 선택한 것이 좌표간의 거리를 계산해 짧은 것만 남기는 방법을 택했는데 이것도 실패였다. 한참 고민하다 집단 지성의 힘을 빌리고자 카톡방에서 좌표 관련해서 잘 아는 사람을 찾았다. 중앙위치를 잡고 삼각형을 그려서 .... 어쩌구저쩌구 ... 생각해보니 메모리가 터질 것 같단 생각이 들었다. 대략 1시간 정도 졸다가 다시 생각해보니 '중앙 위치를 중심으로 시계방향으로 좌표를 정렬하면 되지 않..
어쩌다 보니 canvas에서 fillRect를 사용해 text의 배경으로 들어갈 사각형의 사이즈를 text 가로 사이즈에 맞게 그려야 할 일이 생김. css로 하는 거면 그냥 대충 width: fit-content 썼을거임. 귀찮아서 구글에 적당히 검색해봄. 이런거 할 사람이 있을지 의문이 들었는데 진짜 없었나봄. 오픈톡방에도 물어봤더니 아무도 모름. 이게 맞나 싶었지만 mdn 뒤져봄 mdn 선생님이 알려주신 메소드! measureText() 사용 방법은 간단함. ... 생략 ... const text = "Hello World!" // 문자열 const getWidth = canvas.measureText(text) canvas.fillStyle = "yellow" // 사각형 채울 색상 //fillR..