티스토리 블로그에 react 이용하여 마우스로 점찍기
2024. 12. 30. 10:11ㆍHTML 공부
소스는 아래에 있습니다.
| <!DOCTYPE html> <html> <head> <title>Hello World with React in PHP</title> <!-- React 및 ReactDOM을 불러옵니다. --> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <!-- Babel을 불러옵니다. --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> // React 컴포넌트를 정의합니다.// React 컴포넌트를 정의합니다. class Circle extends React.Component { constructor(props) { super(props); this.state = { circles: [], // 그려진 원들을 저장하는 배열 }; } handleSvgClick = (event) => { // 클릭된 위치의 좌표를 가져옵니다. const clickX = event.clientX; const clickY = event.clientY; // 반지름이 5인 원의 중심 좌표를 계산합니다. const centerX = clickX - event.target.getBoundingClientRect().left; const centerY = clickY - event.target.getBoundingClientRect().top; // 그려진 원들의 배열에 새로운 원을 추가합니다. const newCircles = [...this.state.circles, { centerX, centerY }]; // 상태를 업데이트하여 새로운 원을 화면에 그립니다. this.setState({ circles: newCircles }); }; render() { const { circles } = this.state; return ( // SVG 요소에 클릭 이벤트 핸들러를 추가합니다. <svg width="400" height="400" onClick={this.handleSvgClick} style={{ cursor: 'pointer' }} > {/* 하얀색 배경을 설정하는 사각형 */} <rect width="100%" height="100%" fill="white" /> {/* 그려진 원들을 표시합니다. */} {circles.map((circle, index) => ( <circle key={index} cx={circle.centerX} cy={circle.centerY} r={5} fill="blue" /> ))} </svg> ); } } // React 컴포넌트를 렌더링합니다. ReactDOM.render(<Circle />, document.getElementById('root')); </script> </body> </html> |
'HTML 공부' 카테고리의 다른 글
| [PHP] 내가 처음 만든 HTTP 웹서비스 함수 ... 함수 코드와 호출하는 코드 포함 (0) | 2025.01.16 |
|---|---|
| 자바 스크립트과 php 로 각각 강제로 URL 리다이렉트 하는 코드 (0) | 2024.12.30 |
| 티스토리에 react 이용하여 파이차트 그리기 (0) | 2024.12.30 |
| 티스토리에 react 반영하기 연습 (2) | 2024.12.30 |
| XY 좌표 그래프 그리기 (4) | 2024.12.30 |