개발자, 트렌드를 버리다 — 2년후 소감

벌써 2년

코드

릴리즈

  • Matrix
  • FR translation v0.2

기능

  • 멀티 아트보드 구현
  • Layer 를 움직일 때 아트보드 변경 구현
  • 공간 제약 없는 Viewport 구현
  • Panzoom 구현 (25% ~ 2500% 확대 가능)
  • Ruler 구현
  • 드래그로 Layer 복제 기능 구현
  • 아트보드 Export 기능 구현
  • Layer Group/Ungroup 기능 구현
  • Rotate 된 Layer 의 resize 기능 구현
  • History 기능 적용
  • SVG Path 의 BBox 구현
  • Video Layer 추가
  • 비동기(async) LOAD () 함수 구현 (컴포넌트 내부 변경되는 html 을 비동기로 적용)
  • Viewport/Panzoom 구현하기
  • 회전 이후의 드래그 영역에서 Selection 적용하기
  • 회전 이후의 크기변경 적용하기
  • 회전 이후의 Path 에디팅 적용하기
  • 멀티 Selection 이후 회전 적용하기
  • Layer 의 부모가 바뀔 때 상대 경로 찾아가기

Viewport, Panzoom and Ruler

Single Selection

Resize after rotating

[부모 Matrix] * [자식 Matrix] 
[부모] * [자식 translate] * [자식 transform origin] * [자식 transform] * [자식 tranform origin * -1] 
[부모] * [자식 New Translate] * [자식 New Transform origin] * [자식 transform] * [자식 New Tranform origin * -1]

Group Selection

  1. Group 의 Transform Origin 은 전체 영역기준으로 다시 정의됩니다.
  2. Group 을 Rotate 하게 되면 개별 Layer 의 Origin 과 상관 없는 영역에서 연산이 일어납니다.
  3. Selection 을 하는 기준은 Layer 의 부모가 Selection 에 포함된 경우 자식은 Group Selection 에 포함하지 않습니다.

Path Editing

BBox for Path

History

  1. 내가 만든 뒤로가기는 로컬에서 편집한 상태로 한정 짓는다.
  2. 다른 유저가 변경 한 것 까지는 뒤로 돌리지 않는다.

마무리

TIP & TIP & TIP

Matrix 다루기

Vec3

Layer 위치 구하기

중첩된 Layer 들의 위치 구하기

Layer 이동하기

Layer 회전하기

vec3.lerp([], start, end, 1 + pointDist/vec3.dist(start, end))

Layer 크기(Scale) 변경하기

[parentMatrix] * [translate] * [transformOrigin] * [itemTransform] * [transformOrigin * -1] 
[parentMatrix] * [newTranslate] * [newTransformOrigin] * [itemTransform] * [newTransformOrigin * -1] 
TransformOrigin.scale(origin,width, height);
[newTransformOrigin] = mat4.translate(view, view, originVector) 
[parentMatrix] * [translate] * [transformOrigin] * [itemTransform] * [transformOrigin * -1] = [parentMatrix] * [newTranslate] * [newTransformOrigin] * [itemTransform] * [newTransformOrigin * -1]
[LayerMatrix] = [parentMatrix] * [newTranslate] * [newTransformOrigin] * [itemTransform] * [newTransformOrigin * -1] 
[parentMatrix * -1] *[LayerMatrix] = [newTranslate] * [newTransformOrigin] * [itemTransform] * [newTransformOrigin * -1]
--->
[parentMatrix * -1] *[LayerMatrix]* [newTransformOrigin] = [newTranslate] * [newTransformOrigin] * [itemTransform]
--->
[parentMatrix * -1] *[LayerMatrix]* [newTransformOrigin]* [itemTransform * -1] = [newTranslate] * [newTransformOrigin]
--->
[parentMatrix * -1] *[LayerMatrix]* [newTransformOrigin]* [itemTransform * -1] * [newTransformOrigin * -1] = [newTranslate]

Layer 의 부모 교체하기

[newParentMatrix] * [newLocalMatrix] = [oldParentMatrix] * [oldLocalMatrix]
[newParentMatrix] * [newLocalMatrix] = [oldParentMatrix] * [oldLocalMatrix]
---->
[newLocalMatrix] = [newParentMatrix * -1] * [oldParentMatrix] * [oldLocalMatrix]
[newLocalMatrix] = [newTranslate] * [itemOrigin] * [newItemTransform] * [itemOrigin * -1] 
[newLocalMatrix] = [newTranslate] * [itemOrigin] * [newItemTransform] * [itemOrigin * -1]
---->
[newLocalMatrix] * [itemOrigin]= [newTranslate] * [itemOrigin] * [newItemTransform]
---->
[newLocalMatrix] * [itemOrigin] * [newItemTransform * -1] = [newTranslate] * [itemOrigin]
---->
[newLocalMatrix] * [itemOrigin] * [newItemTransform * -1] * [itemOrigin * -1]= [newTranslate]

Viewport 설계하기

  • panning: viewport 의 중심을 이동합니다. (스크롤 한다고 보시면 됩니다.)
  • zoomming: Viewport 의 중심을 기준으로 확대/축소 하는 것을 말합니다.
this.verties = vertiesMap(this.cachedViewport, this.matrixInverse);
  1. selection 영역 표시
  2. ruler 표시
  3. path editor 좌표 변환
  4. Guide Line 표시
  5. Mouse Point 을 Viewport 좌표로 변환

Canvas 크기가 바뀔 때 Viewport 재정렬하기

  1. Viewport 의 width, height 가 바뀌는 것에 scale 은 영향이 없다.
  2. 새로운 Viewport 의 width ,height 기준으로 TransformOrigin 을 다시 설정해야한다.
  3. TransformOrigin 을 다시 설정하기 때문에 Translate 도 다시 설정해야한다.
  4. 이 부분이 제일 중요한데요. 크기가 변경되더라도 viewport 의 left, top 은 변함이 없다. 즉, 시작지점은 그대로고 bottom, right 영역만 바뀌는 것이죠.
[oldTranslate] * [oldTranslateOrigin] * [scale] * [oldTranslateOrigin * -1] = [newTranslate?] * [newTransformOrigin] * [scale] * [newTransformOrigin * -1] 

Viewport 에서 Zooming 할 때 Origin 유지 하기

  1. zooming 을 시작하는 마우스 포인트를 등록한다.
  2. 마우스 포인트는 어떤 시점이든 현재의 transform origin 과의 거리가 있다.
  3. 확대를 하면 마우스 포인트와 transform origin 의 거리가 좁혀지고 축소를 하면 멀어진다.

Selection 영역 만들기

this.$viewport.applyVerties(verties);
vec3.lerp([], pointers[0], pointers[1], 0.5)
const diff = vec3.subtract([], vec3.lerp([], pointers[0], pointers[1], 0.5), pointers[4]);const rotate = Length.deg(calculateAngle360(diff[0], diff[1]) + 90).round(1000);

Group Selection

  1. 부모(최초 윗세대) 와 자식을 동시에 Selection 할 수가 없습니다.
  2. 회전을 하게 되면 마지막 시점에 Selection 영역이 바뀝니다.
  1. translate 할 때는 개별 부모 기준으로 Layer 이동하기를 구현해야합니다.
  2. scale 을 할 때는 Group 영역을 기준으로 변경된 크기를 비율 형태로 개별 Layer 에 다시 적용해야합니다. (이때 찌그러짐이 발생하죠)
  3. rotate 할 때는 transform origin 이 개별 Layer 가 아니고 Group 의 transform origin 으로 이루어져야 합니다.
  1. 선택된 각 Layer 들의 matrix 구합니다.
  2. GroupLayer 의 소속으로 바꿉니다.
  3. GroupLayer 의 Transform(translate, scale, rotate) 을 적용합니다.
  4. GroupLayer 에 속한 개별 Layer 들의 Matrix 를 다시 구합니다.
  5. 개별 Layer 들의 부모를 기준으로 다시 소속을 바꿉니다.

Collision(충돌)

--

--

--

걸작을 만드는 사람.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
easylogic

easylogic

걸작을 만드는 사람.

More from Medium

A Gloomy Abyss

No straight pressure, no queer diamonds 💎

no straight pressure, no queer diamonds

Combat harmful gender stereotypes with these children’s books

Some Girls and Some Boys by Nelly Thomas

‘Everything, Everywhere’ In All Its Brightest Forms