판서 애니메이션

홍예은·2021년 4월 22일
0

Project

목록 보기
3/4
post-thumbnail

Project

개발 기간 | 3 개월
개발 환경 | WPF
기능 요약 | 이미지 파일의 문자를 인식해 판서 애니메이션 생성 및 실행
주요 기능 | 1. 이미지 파일의 문자 인식
               2. 판서 애니메이션 자동 생성 / 수동 Edit
               3. 판서 애니메이션 실행


기능

이미지 파일의 문자를 인식해 판서 애니메이션을 자동으로 생성하고 실행하는 프로그램입니다.
애니메이션을 수동으로 Edit 하는 기능과, 결과물을 파일 형태로 저장 및 Load 하는 기능을 제공합니다.
여러개의 이미지 파일을 처리하고 애니메이션 할 수 있습니다.


화면

MahApps.Metro와 MaterialDesignThemes를 사용했습니다.
전체적인 구조는 프로그램의 사용 Flow에 맞게 구성했고, Edit 프로그램 특성상 다양한 기능들이 있기 때문에 편의성을 위해 그림판 등의 익숙한 UI를 참고했습니다.

PROJECT

  • 대상/배경/펜 이미지 열기
  • OCR 분석
  • 파일 Save/Load

EDIT

  • 애니메이션 Edit
  • 화면 옵션 설정 (View/Hide, 색상)

ANIMATION

  • 프로젝트별 애니메이션 재생
  • 전체 화면에서 애니메이션 재생
  • 재생 속도 설정

Expander

  • 프로젝트 목록
  • 애니메이션 목록
  • 애니메이션의 Path 목록
  • 애니메이션 Group 목록

담당 업무

1. 애니메이션 Edit

애니메이션 Edit 기능을 개발했습니다.

  • 기능 목록
    - 선택 모드 (단일 선택 / 다중 선택)
    - 영역 편집 (사각형 / 자유형)
    - 편의 기능 (Merge / Sort)
    - 애니메이션 추가
    - 애니메이션 Path 편집 (지우개 / 펜 / 펜 색상)
    - 애니메이션 Group 편집
  • 선택 모드
    - 단일 선택

    - 다중 선택

  • 영역 편집
    - 사각형

    - 자유형

  • 편의 기능
    - Merge

    - Sort (왼쪽 -> 오른쪽 순서로 Sequence Number 정렬)

  • 애니메이션 Path 편집
    - 지우개 (Path 영역이 지워지면서 원본 이미지가 보임)

    - 펜 (원본 이미지 위에 추가)

참고

  • 문자 인식
    이미지 파일의 문자 인식은 Tesseract 라이브러리를 사용했는데, 이미지 파일의 해상도에 따라 문자 인식률이 달라졌습니다.
    인식률이 높을수록 자동으로 생성되는 애니메이션의 완성도가 높아지기 때문에 인식률을 높이기 위해 해상도를 단계별로 처리했습니다.

  • Layer 구조


  • 지우개 Path 애니메이션 재생 단계
    1) Cover Layer : Path 영역을 지움
    2) Mask Layer : Path 영역을 배경 이미지로 채움
    3) Path 에서 재생할 영역만 Mask Layer 를 지움
    4) Mask Layer의 지워진 부분(3번)의 Source 이미지가 보임
    5) 한 개의 Path가 다 재생될 때까지 3~4번 반복

0개의 댓글