Spaces:
Running
Running
File size: 6,556 Bytes
b456468 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
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 |
|