ImageEditor 2.0.0 Migration guide

(translating)

이미지 에디터가 2.0.0으로 업데이트 되면서 새로운 기능이 추가되고 API가 통폐합되면서 마이그레이션을 위한 가이드를 작성한다.

기능 추가

• 이미지 필터 추가
  • 필터 종류
    • grayscale, invert, sepia, sepia, blur, sharpen, emboss, removeWhite, brightness, noise, gradientTransparency, pixelate, tint, multiply, blend, colorFilter
  • 관련 API 목록
    • applyFilter, removeFilter, hasFilter

API 변경 내용

• Drawing Mode 전환

  • 새로운 API

    • startDrawingMode
    • stopDrawingMode
    • getDrawingMode

  • 삭제된 API

    • startCropping, endCropping
    • startDrawingShapeMode, endDrawingShapeMode
    • startFreeDrawing, endFreeDrawing
    • startLineDrawing, endLineDrawing
    • startTextMode, endTextMode
    • endAll
    • endCropping 은 아래의 세 API로 분리된다.
      • getCropzoneRect()
      • crop(rect)
      • stopDrawingMode()

• 변경된 API

  • removeActiveObject() ==> removeObject(id)

• Promise API 지원

  • Drawing 작업에 관련된 API는 Promise를 지원하여 비동기로 동작한다. 그리고 Undo/Redo 지원 목록에 포함된다.
  • 관련 API 목록
    • addIcon, addImageObject, addShape, changeIconColor, changeShape, addText, changeText, changeTextStyle, resizeCanvasDimension, applyFilter, removeFilter, clearObjects, flipX, flipY, loadImageFromFile, loadImageFromURL, redo, undo, removeObject, resetFlip, rotate, setAngle, crop, setObjectPosition, setObjectProperties

• Object 프로퍼티 설정

  • 새로운 API
    • setObjectProperties - Object의 width, height, opacity 값을 변경
    • getObjectProperties - Object의 width, height, opacity 값을 반환
    • setObjectPosition - Object의 위치를 이동(ex> {x:0, y: 0, originX: 'left', originY: 'top'})
    • getObjectPosition - Object의 위치를 origin에 따라 반환
    • getCanvasSize - canvas의 크기를 반환({width: number, height: number})

• API파라미터에 Object Id 추가

  • 이전에는 사용자가 선택한 Object(== active object)를 대상으로 API를 사용할 수 있었다. 변경된 API에서는 Object Id를 전달 받아서 사용자 선택과 무관하게 Object를 편집할 수 있도록 변경되었다.
  • Object Id를 받는 방법은 Promise.then() 의 파라미터.id와 이벤트 콜백에서 파라미터.id를 사용한다.

• 그 외 기능 변경 및 버그 수정

  • 콜백함수 내에서 API를 호출할 수 없는 문제

이벤트 변경 내역

As-Is	To-Be	변경	이유
activateText	addText	이름 변경	'TEXT' 모드에서 mousedown이 왔을 경우 발생 보통 이벤트를 받아 addText()를 사용한다.
addObject	N/A	제거	오브젝트가 추가된 경우인데, 필요성이 없어 제거됨
adjustObject	objectMoved objectScaled	이름 및 기능 변경	오브젝트가 이동하거나 스케일값이 변경된 경우 발생
applyFilter	N/A	제거	applyFilter() API의 Promise.then()으로 대체
clearImage	N/A	제거	loadImageFromFile(), loadImageFromURL() API의 Promise.then()으로 대체
clearObjects	N/A	제거	clearObjects() API의 Promise.then()으로 대체
editText	textEditing	이름 변경	텍스트 입력이 활성화된 경우 발생
emptyRedoStack	redoStackChanged	이름 및 기능 변경	redoStack의 갯수가 변경될 때 스택 갯수를 전달한다.
emptyUndoStack	undoStackChanged	이름 및 기능 변경	undoStack의 갯수가 변경될 때 스택 갯수를 전달한다.
endCropping	N/A	제거	상태 모드 변경은 이벤트 필요 없음.
endFreeDrawing	N/A	제거	상태 모드 변경은 이벤트 필요 없음.
endLineDrawing	N/A	제거	상태 모드 변경은 이벤트 필요 없음.
flipImage	N/A	제거	flipX(), flipY() API의 Promise.then()으로 대체
loadImage	N/A	제거	loadImageFromFile(), loadImageFromURL() API의 Promise.then()으로 대체
mousedown	mousedown	유지
pushRedoStack	redoStackChanged	이름 및 기능 변경	redoStack의 갯수가 변경될 때 스택 갯수를 전달한다.
pushUndoStack	undoStackChanged	이름 및 기능 변경	undoStack의 갯수가 변경될 때 스택 갯수를 전달한다.
removeObject	N/A	제거	removeObject()API의 Promise.then()으로 대체
rotateImage	N/A	제거	rotate(), setAngle() API의 Promise.then()으로 대체
selectObject	objectActivated	이름 및 기능 변경	오브젝트가 선택된 경우, activateText에서 주던 텍스트 파라미터를 여기에서 전달한다.ex> params.text, params.fontSize
startCropping	N/A	제거	상태 모드 변경은 이벤트 필요 없음.
startFreeDrawing	N/A	제거	상태 모드 변경은 이벤트 필요 없음.
startLineDrawing	N/A	제거	상태 모드 변경은 이벤트 필요 없음.

해결된 이슈

• Remove object shape tool