hjfactory / thothcanvas Goto Github PK

Select, Draw

도형(반복)에 다른 도형을 배치해야 한다

• 파일 포맷 정의 필요
• 작업 결과물을 파일로 저장
• 파일을 불러와 결과물 표시

자유선 그리기, 도형 그리기, 멘토링, 배경 등의 레이어 구성 가능해야 한다.

• Shift 클릭 시 선택 추가
• 선택된 도형인 경우 해당 도형 선택 해제

마지막으로 작업한 내용 되돌리기

구상

• 실행취소 가능한 작업은 커맨드 패턴으로 Execute / Rollback 코드 구성?

마우스 다운 시 기존 도형 중 지정 해 Selection에 할당?

• 마우스 다운의 구분은?(CanvasMode = Selection?)
• MD 시 기존 도형 구역(Bounds) 비교 후 영역 교차 비교해 선택
• 선택이 없는 경우 기존 선택 초기화
• 선택이 바뀐 경우 기존 선택 초기화 후 선택
• 기존 선택을 선택한 경우 무시
• 추가 선택이 신규 선택인 경우 선택 추가
• Selection 객체에 추가

선택한 도형의 핸들표시는 누가? 1) 도형객체 자체 2) Selection/SelectObj가 표시
다중 선택은? Shift 클릭 시 다중 선택
SelectObject에서 처리? ShapeLayer에서 처리?

Draw 스타일 데이터 관리자
드로윙툴의 툴팔랫트와 같이 지정된 색상과두께의 펜을 사전에 제공하는 기능

• 스타일 등록
• 스타일 분류
• 스타일 지정(분류 별) - Pen 스타일 3개 중 하나 지정 > 지정한 스타일로 그리기
• 지정 스타일 변경
• Change notification(Event or Observer)
• 싱글톤 적용

CanvasMode에 따라 드른 그리기를 동작해야 한다.

• FreeDraw : 자유선 그리기
• ShapeDraw : 도형 그리기

• Mounse Down > Move > Up 시 화면에 그리기
• Mouse Up 시 객체 목록에 추가
• 객체 목록 출력
• 추가 후 도형 선택

ThItem > ThDrawItem > ThShapeItem > ThRectangleItem

DrawObjectManager(DOMgr: 그리기 객체 관리자)

• 사전에 DOMgr에 DO 등록
• 그리기 시 Id로 DO 가져와 그리기 처리
• 그린 데이터(DrawItems) 그리기 시 DO 가져와 그리기 처리

• 색상 지정
• TColor to TColor32 변환
• 두께 지정
• 투명도 지정

Pen/Eraser 선택 후 그리기 전 마우스 커서 변경

Custom Circle Cursor

• 모양
• 두깨(Circle)
• 색상

crNone 후 그리기?

ShapeObj에서 구현?

• 선택 시 핸들 표시(모두 8개? 우선 8개)
• 핸들에 마우스 오버 표시
  • 마우스이동 시 도형 지정 - MouseDownMove / MouseMove 구분
  • 마우스로 특정 핸들 지정
• 핸들 이동 시 도형 크기 변경
  • 마우스 다운 시 핸들 지정

RBLayer? Selection 직접 구현(FMX 버전과 같이)?

사전 정의된 도형을 선택해 캔버스에 추가

DrawItem과 DraoObject의 Draw작업 통합

도형에 연결점(LinkPoint) 설정 후 연결선 핸들 드래그해 연결점과 연결하도록 구현

• 도형에 연결점 설정
• 연결선 정의
• 연결선 변경 시 연결점 근처 가면 HotHandle 표시
• 연결선 근처서 마우스업 시 연결점과 연결
  • 연결선의 AnchorPoint에 도형(&AnchorPoint) 지정
• 도형 이동 시 연결점 위치 변경

이슈

• 도형 MouseEnter/Leave 이벤트에 ItemConnection 포함

MD / MM / MU 이벤트 처리 정리
Canvas > SelObj > Items > Item > Selection 구조

• Canvas는 SelObj에 마우스 처리 위임
• SelObj는 Items 통해 OveredItem 파악
  • PtInItem(Bounds<Selection 영역까지 Inflate> 확인 후 PtInPoly 및 PtInSelection으로 확인)
• OveredItem에 MM 위임
  • HotHandle 처리
  • MoveItems 예외(?)

MM

• if Downed
  • Item > Move
  • Handle > Resize
    • Item Is Connector and Pt In Item then Show Connection
• else
  • change cursor

지우개(두께, 모양? 지정 가능)가 지나간 자유선 영역이 지워져야 한다.

• 도구 타입 변경
• 마우스 커서 변경
• 지우개 두께 지정
• 지우개 모양 지정(네모, 동그라미)
• 마우스포인트의 객체(들) 지정
• 위 객체 대상과 겹치는 영역 지우기(Clipper 이용?)

기능 캡슐화?가 좋을까?

• 직선 그리기(ShapeItem 상속)
• 선 클래스 추가(TCustomLIneItem)
  • TShapeItem을 도형과 선으로 분리
  • ShapeSelection을 LineSelection으로 분리
• LineTo에 화살표 머리 표시
• 화살표 머리 다형성 처리
• 라인과 화살표 병합

Microsoft Whiteboard 대비 선의 계단현상이 확연함

다음 문서의 속성들 적용방안 검토할 것
https://graphics32.github.io/Docs/Units/GR32_Polygons/Classes/TPolygon32/_Body.htm
TPolygon32.AntialiasMode
TPolygon32.Antialiased

• 마우스포인트의 객체(들) 선별
• 지우개가 지나간 객체 삭제예고 표시(흐리게?)
• 지우기 취소
• 지우기 시 객체 제거

ThCanvas>ImgView

• 레이어 목록 관리
• 설정(PenSize, ShapeType 등)값은 Interface로 전달

레이어

• ThDrawLayer : DrawItem 목록을 그림(ReadOnly)
  • FreeDrawLayer : 자유선 그리기 추가
  • ShapeDrawLayer : 도형 그리기 추가

아이템

• ThItem
  • DrawItem : Draw(Bitmap, Scale, Offset) 메소드 제공
    • FreeDrawItem
      • FDPenItem
      • FDEraserItem
    • ShapeItem
      • RectItem
      • CircleItem
      • ....

• 작업에 대한 이벤트 제공
• 일괄(부분) 작업 정보 조회

향후 지우개로 객체 지우개 기능에 필요

• MouseUp 시 객체 생성 후 좌표, 색상, 두께 보관
• FreeDrawLayer에 객체목록에 추가
• Paint 시 객체 목록 표시

방안1 - 객체가 Path와 Polygon 정보 보유, Paint 시 Polygon 좌표 변환 해 출력
방안2 - 객체가 Path만 보유, Paint 시 Path 변환 후 Polygon 생성 해 출력

우려/고려 사항

• 두가지 방안 별도 구현
• 같은 데이터로 성능 테스트
• (방안1) 정상적으로 표시되는가?
• (방안1) 너무 많은 양을 표시하지 않는가?
• (방안2) 빈번한 Paint 시 Clipper 작업이 성능에 영향을 주지 않는가?(객체가 많아진다면?)
• (방안2) 지우기 시 Polygon 비교가 가능한가?

Drawing by scale to canvas

좌표 추가 시 레이어 기준(Viewport) 경로로 기록
그리기 시 Canvas 기준(Local)으로 그리기

라이브러리 조건

• Anti-aliasing 지원, Vector 기반

• 음수 영역에 그릴 수 있는지 검토(불가)
• 좌표 끌어서 이동 기능 검토

CustomLayer 상속 받아 영역 상관없이 그리기 가능할 것으로 예상

• CustomLayer > PositionedLayer > BitmapLayer
• FreeDrawLayer는 PositionedLayer 상속

Image32(ImgView)는 Bitmap과 Buffer 2개의 그리기 영역을 제공 두개다 Size 지정 필요
계획상 페이지 개념으로 영역을 두는 것이 좋을 것이라 판단해 해당 이슈 보류

자유선 그리그의 경우 Pen과 Eraser 2개이므로 모드에 따라 다른 동작을 수행한다.
Shape의 경우 모양이 한정되지 않으므로 다른 방식 지원이 필요하다.

지정한 라이브러리로 자유선 그리기 시도

글자

도형을 클릭해 놓은 경우 기본 크기로 도형 생성

• 클릭한 경우 놓기
• 기본 크기 지정
• 선두께 지정
• 선 색상 지정

(GR32_Clipper 이용 시 FloatPoint로 병합 중 오류발생하는 경우 있었음)
폴리곤 병합 시 clipper library 이용 중임.FloatPoint를 IntPoint로 변환해 clipper 처리

• GR32의 FixedPoint로 변환해 clipper 처리도 가능할지 검토

가능하다면, 하나의 라이브러리로 통합이 좋음

• 선택한 도형(들) 이동