Spaces:
Running
Running
File size: 3,336 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 |
# How to apply the mobile version.
## Image editor How to apply a mobile device
- Some settings are required to use Image Editor components on mobile devices.
- Please refer to the [sample page](http://nhn.github.io/tui.image-editor/latest/tutorial-example03-mobile.html) first to check the UI configuration and operation.
#### Step 1. Include the dependency file on the page. (PC version same)
```html
<script src="libs/code-snippet.min.js"></script>
<script src="libs/jquery.min.js"></script>
<script src="libs/fabric.min.js"></script>
<script src="js/image-editor.js"></script>
```
#### Step 2. `body` Add markup to the tag to create an image editor. (PC version same)
```html
<div class="tui-image-editor">
<canvas></canvas>
</div>
```
#### Step 3. `head` Add a meta tag for setting the viewport to the tag.
```html
<meta name="viewport" content="width=device-width, user-scalable=no" />
```
#### Step 4. Create an image editor by setting option values for mobile device optimization.
```js
// Create image editor
var imageEditor = new tui.component.ImageEditor('.tui-image-editor canvas', {
cssMaxWidth: document.documentElement.clientWidth,
cssMaxHeight: document.documentElement.clientHeight,
selectionStyle: {
cornerSize: 50,
rotatingPointOffset: 100,
},
});
```
- `cssMaxWidth`, `cssMaxHeight` :
- Sets maximum `width` and` height` values in the canvas area.
- Do not set it to a fixed value like the PC version because the value changes depending on the mobile device to be connected.
- `selectionStyle` :
- Selection style setting options that are displayed when an object such as an icon, text, etc. is selected.
- If the corner size is small, it is difficult to resize and rotate, so set the selection style.
- The selection style options are the same as those provided by `fabric.js` and can be set with the following option values: ([Reference](http://fabricjs.com/customization))
```js
var options = {
//...
selectionStyle: {
borderColor: 'red', // Selection line color
cornerColor: 'green', // Selection corner color
cornerSize: 6, // Selection corner size
rotatingPointOffset: 100, // Distance from selection area to rotation corner
transparentCorners: false, // Selection corner Transparency
},
};
```
#### Step 5. Add a CSS file and markup for UI configuration. (PC version same)
```html
<link type="text/css" href="css/service-mobile.css" rel="stylesheet" />
```
> The CSS file is used on the sample page and should only refer to the UI configuration,
> It is recommended to customize image, CSS, and markup files when applying the service.
#### Step 6. Apply the image editor API to the UI
- API : [http://nhn.github.io/tui.image-editor/latest/](http://nhn.github.io/tui.image-editor/latest/)
- Sample Page : [http://nhn.github.io/tui.image-editor/latest/tutorial-example03-mobile.html](http://nhn.github.io/tui.image-editor/latest/tutorial-example01-includeUi.html)
|