- 전체
- 게임 일반 (make game basics)
- 모바일 기획 및 디자인
- GameMaker Studio
- Unity3D
- Cocos2D
- 3D Engine OGRE
- 3D Engine irrlicht
- copperCube
- corona SDK
- Windows Basic Game
- BaaS (Mobile Backend)
- phnegap & cordova
- ionic & anguler
- parse (backend)
- firebase (backend)
- Game Backend Server / Opt
- web assembly
- Smart Makers
- pyGame & Ren'Py
- 머드(MUD) 게임 만들기
- Xamarin(자마린)
- flutter (플루터 앱 개발)
- construct 2 / 3
- pocketbase
- RPG Maker 시리즈
- godot engine
flutter (플루터 앱 개발) [flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (3) Canvas내의 터치(마우스) 좌표 획득하는 방법
2025.01.17 18:38
[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (3) Canvas내의 터치(마우스) 좌표 획득하는 방법
Flutter Canvas에서 터치(마우스) 좌표를 획득하는 방법
Flutter의 Canvas를 활용해 화면에서 터치 또는 마우스의 좌표를 획득하는 방법을 다룹니다. 이 과정에서 GestureDetector와 CustomPainter를 활용하며, 구현한 코드를 함께 제공합니다.
GestureDetector로 좌표 획득
Flutter에서는 GestureDetector
위젯을 사용하여 터치 이벤트를 감지하고, 해당 좌표를 획득할 수 있습니다.
코드 예제
import 'package:flutter/material.dart'; class GridPage extends StatelessWidget { const GridPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: GestureDetector( onTapDown: (detail) { print("onTapDown:(${detail.localPosition})"); }, onTapUp: (detail) { print("onTapUp:(${detail.localPosition})"); }, onHorizontalDragUpdate: (detail) { print("onHorizontalDragUpdate:(${detail.localPosition})"); }, child: CustomPaint( child: Container(), painter: GridPainter(), ), ), ); } }
설명
GestureDetector
는 사용자의 터치 이벤트를 감지합니다.onTapDown
: 터치가 발생한 좌표를 출력.onTapUp
: 터치가 끝난 좌표를 출력.onHorizontalDragUpdate
: 드래그하는 동안의 좌표를 실시간으로 출력.
- 이 위젯의
child
에CustomPaint
를 사용하여 그리드를 화면에 표시합니다.
CustomPainter로 배경과 그리드 그리기
다음 코드는 Canvas에 그리드와 배경을 그리며, GestureDetector와 결합하여 터치 좌표를 얻을 수 있습니다.
전체 코드
import 'package:flutter/material.dart'; class GridPage extends StatelessWidget { const GridPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: GestureDetector( onTapDown: (detail) { print("onTapDown:(${detail.localPosition})"); }, onTapUp: (detail) { print("onTapUp:(${detail.localPosition})"); }, onHorizontalDragUpdate: (detail) { print("onHorizontalDragUpdate:(${detail.localPosition})"); }, child: CustomPaint( child: Container(), painter: GridPainter(), ), ), ); } } class GridPainter extends CustomPainter { static const double gridWidth = 50.0; static const double gridHeight = 50.0; @override void paint(Canvas canvas, Size size) { // 배경 색상 var backgroundPaint = Paint() ..style = PaintingStyle.fill ..color = Colors.lime ..isAntiAlias = true; canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), backgroundPaint); // 그리드 선 색상 var linePaint = Paint() ..style = PaintingStyle.stroke ..color = Colors.black38 ..isAntiAlias = true; // 가로선 for (double y = 0; y <= size.height; y += gridHeight) { canvas.drawLine(Offset(0, y), Offset(size.width, y), linePaint); } // 세로선 for (double x = 0; x <= size.width; x += gridWidth) { canvas.drawLine(Offset(x, 0), Offset(x, size.height), linePaint); } } @override bool shouldRepaint(covariant CustomPainter oldDelegate) => false; }
설명
GridPainter
는 고정된 간격의 그리드를 그립니다.CustomPainter
의paint
메서드는 Canvas를 사용하여 배경과 선을 그립니다.- GestureDetector와 결합하면 그리드에서 터치 좌표를 손쉽게 감지할 수 있습니다.
결론
Flutter의 GestureDetector는 사용자 입력 이벤트를 처리하고, CustomPainter는 화면에 원하는 요소를 그릴 수 있는 강력한 도구입니다. 이를 결합하여 터치 이벤트와 시각적 피드백을 모두 처리할 수 있습니다.
위 코드를 사용해 Canvas에서 터치 좌표를 감지하는 기능을 구현해보세요! 추가로 커스터마이징이 필요하면 알려주세요.
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.