HTML (2) 썸네일형 리스트형 [WEB] #5. 캔버스에 스파이뷰 추가하기 지도기반의 위치정보를 표출하는 웹서비스를 오랫동안 개발하면서 openlayers(ol)를 정말 잘 활용했었다. openlayers에 layer spy라는 예제가 있었는데, 이 로직을 기반으로 캔버스를 이용하여 스파이뷰를 작업해 보았다.캔버스에 이미지를 올리고, 이미지에 벡터영역을 그리기 위해 위치를 잘 잡을 수 있도록 가이드라인과 스파이뷰가 필요해졌다.캔버스에 마우스오버 시 확대된 스파이뷰를 표현할 예정이다.#0. 실행환경[WEB] #4. 캔버스 이미지 처리 프로젝트에 덧붙여 진행1차로 새로운 캔버스를 생성하여 작업했으며,가능하다면 ol처럼 레이어 관리를 통해 진행해 볼 예정이다.#1. 디렉터리 구조...∨ canvas/ ... > interaction/ > guideLine... [WEB] #4. 캔버스 이미지 처리 캔버스(htmlCanvasElement)에 이미지 업로드 후, 특정영역에 클릭이벤트를 주는 기능을 구현하고자 한다. openLayers를 통해서만 활용해 봤을 뿐, 실제로 태그를 직접 사용해 본 경험이 없어 하나씩 작업해 볼 예정이다. file upload 를 통해 이미지업로드 후, 이미지정보를 기반으로 캔버스에 비율에 맞춰 도식화한다. #0. 실행환경 next 13 프로젝트 생성 typescript tailwind (css) zustand dexie #1. 프로젝트 디렉토리 구조 ... ∨ src/ ∨ app/ > ... > canvas/ : > _components:/ : "use client" 컴포넌트 > _store/ : zustand store > utils/ : 기타 함수들 (포맷변환 등 ) .. 이전 1 다음
