react-konva 2

[React] 간단한 성냥퍼즐 웹 서비스 만들기 5일차 (Konva.Transformer)

오늘은 핵심 기능구현 두 번째로 드래그 & 드롭에 이어성냥개비를 회전하는 기능을 만들어 보려고한다오늘도 재밌게 만들어보자~!개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 💡 핵심 기능 구현성냥개비 드래그 & 드롭 성냥개비 회전 (오늘 할 것)퍼즐 정답 검증 시스템 💁🏻 현재 선택된 성냥개비 구현우선 Image에 onClick을 추가하고 클릭했을때 handleSelect()를 통해 현재 선택된 성냥의 id값을 저장한다.import { useRef, useEffect, useState } from "react"import { Stage, Layer, Image, Transformer } from "react-konva"export..

개발/개발로그 2024.11.18

[React] 간단한 성냥퍼즐 웹 서비스 만들기 4일차 (react-konva)

오늘은 드디어 핵심 기능인 퍼즐 시스템을 만들어 보려고 한다너무 재밌겠다 바로 가자~! 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.💡 핵심 기능 구현성냥개비 드래그 & 드롭 (오늘 할 것)성냥개비 회전퍼즐 정답 검증 시스템 ✨ React-Konva 설치npm install react-konva konva일단 제일 중요한 기능인 캔버스에서 성냥개비를 회전하고 드래그 & 드롭하는 기능을 순수 js로 구현해보고 싶은 마음은 굴뚝같지만 누군가 좋은 라이브러리를 만들어주셔서 예의상 사용하기로 했다. 🥰 오늘은 간단하게 konva.js를 이용해서 이미지를 드래그 & 드롭할 수 있게 만들어볼 거다. 우선 성냥의 구조체를 생각해 보았다. 가..

개발/개발로그 2024.11.15