Spaces:
Running
Running
| There are a lot of changes for ImageEditor 2.0.0 including API changes and new features. This migration document will be nicely moving to v2.0.0. | |
| ## New drawing mode change APIs | |
| - New APIs | |
| - `startDrawingMode(modeName)` starts a drawing mode | |
| - `stopDrawingMode()` stops current drawing mode and back to 'NORMAL' mode | |
| - `getDrawingMode()` returns current drawing mode name. | |
| - `getCropzoneRect()` returns cropping rect in 'CROPPER' drawing mode. | |
| - `crop(rect)` crops image given area | |
| - Removed APIs | |
| - `startCropping`, `endCropping` | |
| - `startDrawingShapeMode`, `endDrawingShapeMode` | |
| - `startFreeDrawing`, `endFreeDrawing` | |
| - `startLineDrawing`, `endLineDrawing` | |
| - `startTextMode`, `endTextMode` | |
| - `endAll` | |
| - `endCropping` is divided into three APIs | |
| ```js | |
| var rect = imageEditor.getCropzoneRect(); | |
| imageEditor.crop(rect).then(() => { | |
| imageEditor.stopDrawingMode(); | |
| }); | |
| ``` | |
| ## Changed APIs | |
| - `removeActiveObject()` ==> `removeObject(id)` | |
| - `getCurrentState()` ==> `getDrawingMode()` | |
| ## Use object is with all drawing APIs | |
| - In versions prior to 1.4.1, the users should select an object and manipulate it which is called 'active object'. There was no way to manipulate non-selected object. After 2.0.0 version, you can manipulate not only selected object, but also non-selected objects by receiving the Object Id. | |
| - To get the Object Id, use the parameter.id in Promise.then() and the event callback. | |
| ```js | |
| /* | |
| { | |
| id: number | |
| type: type | |
| left: number, | |
| top: number, | |
| width: number, | |
| fill: string | |
| stroke: string | |
| strokeWidth: number | |
| opacity: number, | |
| // text object | |
| text: string, | |
| fontFamily: string, | |
| fontSize: number, | |
| fontStyle: string, | |
| fontWeight: string, | |
| textAlign: string, | |
| textDecoration: string | |
| } | |
| */ | |
| imageEditor.on('objectActivated', function (props) { | |
| console.log(props); | |
| console.log(props.type); | |
| console.log(props.id); | |
| }); | |
| ``` | |
| ```js | |
| imageEditor | |
| .addShape('circle', { | |
| fill: 'red', | |
| stroke: 'blue', | |
| strokeWidth: 3, | |
| rx: 10, | |
| ry: 100, | |
| isRegular: false, | |
| }) | |
| .then(function (props) { | |
| console.log(props.id); | |
| imageEditor.changeShape(props.id, { | |
| // change circle | |
| fill: '#FFFF00', | |
| strokeWidth: 10, | |
| }); | |
| }); | |
| ``` | |
| ## Support Promise API | |
| - All drawing APIs returns Promise and supports Undo/Redo. | |
| - List of related APIs | |
| - `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` | |
| ## Changed event type | |
| | As-Is | To-Be | Change | Why & Purpose | | |
| | ------------------------ | -------------------- | ------------------ | --------------------------------------------------------------------- | | |
| | **~~_activateText_~~** | **addText** | renamed | when mousedown event occurs in 'TEXT' drawing mode | | |
| | **_~~addObject~~_** | - | removed | unnecessary | | |
| | **_~~adjustObject~~_** | **objectMoved** | renamed<br>changed | when user drags an object | | |
| | **_~~adjustObject~~_** | **objectScaled** | renamed<br>changed | when object is being scaled | | |
| | ~~applyFilter~~ | - | removed | Replace it to `applyFilter()` Promise API | | |
| | ~~clearImage~~ | - | removed | Replace it to `loadImageFromFile()`, `loadImageFromURL()` Promise API | | |
| | ~~clearObjects~~ | - | removed | Replace it to `clearObjects()` Promise API | | |
| | **_~~editText~~_** | **textEditing** | renamed | when textbox is being edited | | |
| | **~~_emptyRedoStack_~~** | **redoStackChanged** | renamed<br>changed | Replace it to `redoStackChanged` event with length `0` | | |
| | **~~_emptyUndoStack_~~** | **undoStackChanged** | renamed<br>changed | Replace it to `undoStackChanged` event with length `0` | | |
| | ~~endCropping~~ | - | removed | unnecessary | | |
| | ~~endFreeDrawing~~ | - | removed | unnecessary | | |
| | ~~endLineDrawing~~ | - | removed | unnecessary | | |
| | ~~flipImage~~ | - | removed | Replace it to `flipX()`, `flipY()` Promise API | | |
| | ~~loadImage~~ | - | removed | Replace it to `loadImageFromFile()`, `loadImageFromURL()` Promise API | | |
| | **mousedown** | **mousedown** | remained | just mousedown | | |
| | **_~~pushRedoStack~~_** | **redoStackChanged** | renamed<br>changed | redo change event | | |
| | **_~~pushUndoStack~~_** | **undoStackChanged** | renamed<br>changed | undo change event | | |
| | ~~removeObject~~ | - | removed | Replace it to `removeObject()` Promise API | | |
| | ~~rotateImage~~ | - | removed | Replace it to `rotate()`, `setAngle()` Promise API | | |
| | **_~~selectObject~~_** | **objectActivated** | renamed<br>changed | when user selects an object | | |
| | ~~startCropping~~ | - | removed | unnecessary | | |
| | ~~startFreeDrawing~~ | - | removed | unnecessary | | |
| | ~~startLineDrawing~~ | - | removed | unnecessary | | |