Flutter Canvas - 온더테크

Contents

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에서 복잡한 그래픽을 직접 제어하고, 고급 시각적 효과를 구현할 수 있는 강력한 도구입니다. 다양한 메서드와 속성을 활용하여, 원하는 그래픽을 효율적으로 그릴 수 있습니다.

Post Views: 228

1. Canvas 개요

2. Canvas 주요 메서드

2.1. drawLine()

2.2. drawRect()

2.3. drawCircle()

2.4. drawPath()

2.5. drawArc()

2.6. drawImage()

2.7. drawText()

3. Paint 클래스