Spaces:
Running
Running
| # 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) | |
|  | |
|  | |