모바일 버전 적용 방법

이미지 에디터 모바일 디바이스 적용 방법

이미지 에디터 컴포넌트를 모바일 디바이스에서 사용하기 위해서는 몇 가지 세팅이 필요하다.
UI 구성 및 동작 확인을 위해 먼저 샘플 페이지를 참조한다.

Step 1. 디펜던시 파일을 페이지에 포함한다. (PC 버전 동일)

<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 태그에 이미지 에디터 생성을 위한 마크업을 추가한다. (PC 버전 동일)

<div class="tui-image-editor">
    <canvas></canvas>
</div>

Step 3. head 태그에 뷰 포트 설정을 위한 메타 태그를 추가한다.

<meta name="viewport" content="width=device-width, user-scalable=no">

Step 4. 모바일 디바이스 최적화를 위해 옵션 값을 설정하여 이미지 에디터를 생성한다.

// Create image editor
var imageEditor = new tui.ImageEditor('.tui-image-editor canvas', {
    cssMaxWidth: document.documentElement.clientWidth,
    cssMaxHeight: document.documentElement.clientHeight,
    selectionStyle: {
        cornerSize: 50,
        rotatingPointOffset: 100
    }
});

• cssMaxWidth, cssMaxHeight :
  • 캔버스 영역의 최대 width, height 값을 설정
  • 접속하는 모바일 디바이스에 따라 값이 변경되므로 PC 버전처럼 고정 값으로 세팅하지 않는다.
• selectionStyle :
  • 아이콘, 텍스트 등 오브젝트가 선택되었을 때 보여지는 셀렉션 스타일 설정 옵션
  • 코너 사이즈가 작을 경우 리사이징, 회전 동작이 어렵기 때문에 셀렉션 스타일을 설정하여 사용한다.
  • 셀렉션 스타일 지정 옵션은 fabric.js에서 제공하는 옵션과 동일하며 다음 옵션 값으로 설정할 수 있다. (참조)

  {
      borderColor: 'red', // 셀렉션 선 색상
      cornerColor: 'green', // 셀렉션 코너 색상
      cornerSize: 6, // 셀렉션 코너 사이즈
      rotatingPointOffset: 100 // 셀렉션 영역부터 회전 코너까지 거리
      transparentCorners: false, // 셀렉션 코너 투명 처리 여부
  }

Step 5. UI 구성용 CSS 파일 및 마크업을 추가한다. (PC 버전 동일)

<link type="text/css" href="css/tui-image-editor-m.css" rel="stylesheet">

해당 CSS 파일은 샘플 페이지에 사용된 것으로 UI 구성에만 참조해야 하며,
서비스 적용 시 이미지, CSS, 마크업 파일을 커스터마이징 하여 사용하기를 권장한다.

Step 6. UI에 이미지 에디터 API를 적용한다.

• API : http://nhn.github.io/tui.image-editor/latest/
• 샘플 페이지 : http://nhn.github.io/tui.image-editor/latest/tutorial-example03-mobile