2023. 12. 19

WaplOffice – 도형 모양 조정 기능

OF2-3팀

권보미

Copyright© 2018 TmaxOS. All Rights Reserved.

도형 모양 조정 개요

◆ 도형 모양 조정이란

■ Adjust handle을 이용하여 도형의 모양을 조정하는 것

■ Adjust handle로 adjust value를 바꾸고, value는 path를 그리는 좌표에 반영됨.

< 3 / 29 >

도형 모양 조정 개요

◆ 레퍼런스 제품 비교

■ MS PowerPoint - preview

■ Google presentation - silhouette

< 4 / 29 >

도형 모양 조정 분석

◆ 도형의 path를 그리는 과정

1) Adjust value를 좌표에 반영

2) 좌표를 기반으로 path 그리기

결론 : handle을 조정 > value 바뀜 > 좌표 바뀜 > path 바뀜 > 모양 변형

< 7 / 29 >

회사 코드 보호

회사 코드 보호

도형 모양 조정 분석

◆ 기본 기능 분석

1) 도형 마다 handle 개수와 종류가 다르다.

< 8 / 29 >

도형 모양 조정 분석

◆ 기본 기능 분석

1) 도형 마다 handle 개수와 종류가 다르다.

< 9 / 29 >

도형 모양 조정 분석

◆ 기본 기능 분석

2) handle마다 다른 value값을 갖고, 각각 범위도 다르다.

< 10 / 29 >

도형 모양 조정 분석

◆ 기본 기능 분석

3) 1개의 handle이 최대 2개의 value를 가질 수 있다.

①

②

③

④

①

②

③

④

< 11 / 29 >

도형 모양 조정 분석

◆ 기본 기능 분석

※ 예외 상황 : handle의 영향을 받지 않는 value도 있다.

< 12 / 29 >

도형 모양 조정 분석

◆ 기본 기능 분석

※ 예외 상황 : handle의 영향을 받지 않는 value도 있다.

< 12 / 29 >

스펙 상에서 static value 바꾼 경우

도형 모양 조정 분석

◆ OOXML 스펙으로 적힐 value의 범위

Adjust value가 적히는 자리의 타입은 string (수식이 들어가는 경우도 있음)

그러나 val 뒤에 소수점이 포함된 숫자를 적고 저장하면 파일이 열리지 않음.

OOXML에서 쓰이는 숫자의 기본 타입이 EMU이기 때문.

참고 : ISO/IEC 29500-1:2016 표준 문서

< 13 / 29 >

도형 모양 조정 설계

◆ handle 동작 방식 장단점 비교

와플오피스 resizing시 re-rendering 시간 비교

워드 100개

포인트, 셀 100개

Rendering 부담

Preview > silhouette

그러나!

Adjust 기능은

도형 1개에만 적용 가능

< 16 / 29 >

도형 모양 조정 설계

◆ handle 동작 방식 장단점 비교

< 17 / 29 >

단일 개체만 편집할 때는 preview 도 괜찮다? → X

연결선과 connection 되어 있을 때는 단일 개체를 편집하면 연결선도 함께 움직임

결론 : silhouette 이 preview 보다 낫다.

Preview

Silhouette

도형 모양 조정 설계

◆ handle 동작 방식 장단점 비교

mouseDrag할 동안 silhouette으로

Path 변화를 보여준 뒤

mouseUp할 때 도형의 pathInfo를

변경하는 방식 선택

< 18 / 29 >

도형 모양 조정 설계

◆ WaplOffice 기존 silhouette model과의 차이점

resize, rotate 조정 시 : box silhouette

adjust 조정 시 : path silhouette

그룹 개체 선택 후 한꺼번에 조작 가능

그룹 개체 선택 후 한꺼번에 조작 불가

< 19 / 29 >

도형 모양 조정 설계

◆ WaplOffice 기존 silhouette model과의 차이점

< 20 / 29 >

도형 모양 조정 설계

◆ WaplOffice 기존 silhouette model과의 차이점

< 21 / 29 >

개체 1개 편집 시 box silhouette 단점

도형 모양 조정 설계

◆ handle 위치 조정 후 value 계산

1) 수평 이동 handle 조정 -> value 계산

deltaX = handle 이동 후 x좌표 – (도형의 x좌표 + handle 초기 x좌표)

새로운 value = 기존 value + deltaX / 도형 너비 * 100000

2) 반지름 조절 handle 조정 -> value 계산

midPoint = 도형의 정 중앙 좌표

finalPoint = (handle 초기 x좌표 + deltaX, handle 초기 y좌표 + deltaY)

oldDistance = midPoint와 handle 초기 좌표 사이 거리

newDistance = midPoint와 finalPoint 사이 거리

새로운 value = 기존 value + (oldDistance – newDistance) / 도형 너비 * 100000

(수직 이동 handle, 수평 수직 이동 handle도 마찬가지로 계산)

< 22 / 29 >

회사 코드 보호

회사 코드 보호

도형 모양 조정 설계

◆ handle 위치 조정 후 value 계산

3) 각도 조절 handle 조정 -> value 계산

midPoint = 도형의 정 중앙 좌표

finalPoint = (handle 초기 x좌표 + deltaX, handle 초기 y좌표 + deltaY)

vectorMidPointToInitialMouse(VI) = handle 초기 좌표 - midPoint

vectorMidPointToFinalMouse(VF) = finalPoint - midPoint

crossProduct = VI와 VF의 외적

sineDeltaAngle = crossProduct / (VI 길이 * VF 길이)

deltaAngle = sineDeltaAngle의 역사인 값

새로운 value = (기존 value + deltaAngle + 21600000) 를 21600000으로 나눈 나머지

< 23 / 29 >

회사 코드 보호

도형 모양 조정 설계

◆ handle 개수 최소화, handle 이동 실시간 반영

1) Handle 개수 최소화

2) Handle 이동 실시간 반영

MS PowerPoint

Synap Slide

< 24 / 29 >

도형 모양 조정 설계

◆ 설계 구조도 : selection → handle 띄우기

도형

mouseDown

감지

Handle

좌표 계산

Handle

띄우기

도형

mouseDown

감지

Model의

pathInfo에서

좌표 읽음

Handle

띄우기

Handle

좌표 계산 후

Model에 저장

매번 계산

Model에 저장

VS

< 27 / 29 >

Event

도형 모양 조정 설계

◆ 설계 구조도 : handle 조정 → path 변화

바뀐 handle 위치

↓

새로운 value 계산

Handle

mouseDown

감지

Silhouette의

PathBuilder에

새 value 적용

Silhouette의

path 변경

선택된 도형의

path silhouette

생성 → 타겟 설정

Handle

mouseDrag

감지

Handle

mouseUp

감지

Silhouette의

pathInfo를

도형에 적용

Event

< 28 / 29 >

감사합니다