Flutter의 Canvas는 그래픽을 그리는 데 사용되는 저수준 API입니다. Canvas는 Flutter의 CustomPaint와 함께 사용되며, 복잡한 그래픽을 직접 그릴 수 있는 강력한 도구입니다. 이 API를 통해 애플리케이션에서 다양한 형태의 그래픽을 직접 제어하고 렌더링할 수 있습니다.
1. Canvas 개요
Canvas는 2D 그래픽을 그리는 데 사용되는 객체입니다. Canvas는 직선, 곡선, 사각형, 원 등 다양한 형태의 그래픽을 그릴 수 있으며, 복잡한 형태의 그림을 구성하는 데 매우 유용합니다. Canvas는 Flutter의 렌더링 파이프라인에서 그래픽을 그리는 작업을 담당합니다.
2. Canvas 주요 메서드
Canvas 클래스에는 다양한 그래픽 메서드가 있으며, 아래는 주요 메서드입니다.
2.1. drawLine()
직선을 그립니다.
canvas.drawLine(Offset(0, 0), Offset(100, 100), paint);2.2. drawRect()
사각형을 그립니다.
canvas.drawRect(Rect.fromLTWH(20, 20, 100, 100), paint);2.3. drawCircle()
원형을 그립니다.
canvas.drawCircle(Offset(100, 100), 50, paint);2.4. drawPath()
Path 객체를 사용하여 복잡한 형태를 그립니다.
final path = Path()
..moveTo(20, 20)
..lineTo(100, 20)
..lineTo(100, 100)
..close();
canvas.drawPath(path, paint);2.5. drawArc()
호를 그립니다.
canvas.drawArc(Rect.fromLTWH(50, 50, 200, 200), 0, 1.5, false, paint);2.6. drawImage()
이미지를 그립니다. 이미지가 필요합니다.
// Assume you have an image loaded as `image`
canvas.drawImage(image, Offset(0, 0), paint);2.7. drawText()
텍스트를 그립니다.
final textPainter = TextPainter(
text: TextSpan(text: 'Hello, Canvas!', style: TextStyle(color: Colors.black)),
textDirection: TextDirection.ltr,
);
textPainter.layout();
textPainter.paint(canvas, Offset(100, 100));3. Paint 클래스
Paint는 그래픽의 스타일과 색상을 정의하는 데 사용됩니다. Canvas의 메서드들은 Paint 객체를 인자로 받아, 어떤 스타일로 그래픽을 그릴지 결정합니다.
3.1. 주요 속성
color: 그릴 색상을 설정합니다.
paint.color = Colors.red;style: 그래픽의 스타일을 설정합니다.PaintingStyle.fill(채우기) 또는PaintingStyle.stroke(테두리) 중 하나를 선택합니다.
paint.style = PaintingStyle.stroke;strokeWidth: 선의 두께를 설정합니다.
paint.strokeWidth = 5.0;shader: 그라디언트나 이미지를 텍스처로 사용할 수 있습니다.
paint.shader = LinearGradient(
colors: [Colors.red, Colors.blue],
).createShader(Rect.fromLTWH(0, 0, 200, 200));4. Canvas의 변형 및 클리핑
4.1. 클리핑
클리핑을 사용하여 특정 영역 안에서만 그리기 작업을 할 수 있습니다.
canvas.clipRect(Rect.fromLTWH(50, 50, 100, 100));4.2. 변형
변형을 사용하여 캔버스를 이동하거나 회전시킬 수 있습니다.
canvas.save();
canvas.translate(100, 100);
canvas.rotate(0.5); // 회전
canvas.drawRect(Rect.fromLTWH(0, 0, 100, 100), paint);
canvas.restore(); // 원래 상태로 복원5. 사용 예제
아래는 CustomPainter와 Canvas를 사용하여 원과 사각형을 그리는 기본적인 예제입니다.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Canvas Example')),
body: Center(
child: CustomPaint(
size: Size(300, 300),
painter: MyPainter(),
),
),
),
);
}
}
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.blue
..style = PaintingStyle.fill;
// Draw a rectangle
canvas.drawRect(Rect.fromLTWH(20, 20, 100, 100), paint);
// Draw a circle
paint.color = Colors.red;
canvas.drawCircle(Offset(150, 150), 50, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}6. 요약
Canvas: Flutter에서 그래픽을 직접 그리기 위해 사용하는 클래스입니다. 직선, 원, 사각형 등 다양한 형태를 그릴 수 있습니다.Paint: 그래픽의 스타일과 색상을 정의합니다.color,style,strokeWidth,shader등 다양한 속성을 제공합니다.- 클리핑과 변형:
Canvas는 클리핑 및 변형 기능을 제공하여 복잡한 그래픽 작업을 수행할 수 있습니다. CustomPainter와의 결합:CustomPainter와 함께 사용하여 복잡한 그래픽을 그릴 수 있습니다.
Canvas는 Flutter에서 복잡한 그래픽을 직접 제어하고, 고급 시각적 효과를 구현할 수 있는 강력한 도구입니다. 다양한 메서드와 속성을 활용하여, 원하는 그래픽을 효율적으로 그릴 수 있습니다.