hifiveのUIライブラリ紹介「拡大表示」
hifiveのUIライブラリにお絵かきボードがあります。こちらは写真に情報を追加したり、白紙の上に自分でイラストを書けるという機能ですが、もう一つの機能にMagnifier（拡大表示機能）があります。
実際のデモは下の画像になります。また、JSFiddle上で試すこともできます。
HTMLについて
HTMLはビューワーをDOMで定義するだけです。
| <div class="viewer"> | |
| <div class="loadView"></div> | |
| </div> |
JavaScriptについて
JavaScript側では h5.ui.components.artboard.controller.ArtboardViewerController と h5.ui.components.artboard.controller.MagnifierController を使います。それぞれ表示するクラスを定義します（今回は ‘.loadView’）。
| artboardViewerController: h5.ui.components.artboard.controller.ArtboardViewerController, | |
| magnifierController: h5.ui.components.artboard.controller.MagnifierController, | |
| __meta: { | |
| artboardViewerController: { | |
| rootElement: '.loadView' | |
| }, | |
| magnifierController: { | |
| rootElement: '.loadView' | |
| } | |
| }, |
さらに __ready イベントにてデータを読み込みます。データはSVGで定義します。
| __ready: function() { | |
| this._load(SAMPLE_SAVE_DATA); | |
| }, | |
| _load: function(saveData) { | |
| this.artboardViewerController.load( | |
| saveData, | |
| this.$find('.loadView').hasClass('fixSize') | |
| ); | |
| this._createMagnifier(); | |
| }, |
データを読み込んだら拡大表示処理を行います。拡大率、拡大するサイズを指定します。
| _createMagnifier: function() { | |
| this.mag = this.magnifierController.createMagnifier( | |
| this.$find('.loadView'), { | |
| scale: 2, | |
| width: 200, | |
| height: 200, | |
| mouseover: true | |
| }); | |
| } |
全体のコードは次のようになります。
| $(function() { | |
| var controller = { | |
| __name: 'PageController', | |
| artboardViewerController: h5.ui.components.artboard.controller.ArtboardViewerController, | |
| magnifierController: h5.ui.components.artboard.controller.MagnifierController, | |
| __meta: { | |
| artboardViewerController: { | |
| rootElement: '.loadView' | |
| }, | |
| magnifierController: { | |
| rootElement: '.loadView' | |
| } | |
| }, | |
| mag: null, | |
| __ready: function() { | |
| this._load(SAMPLE_SAVE_DATA); | |
| }, | |
| _load: function(saveData) { | |
| this.artboardViewerController.load( | |
| saveData, | |
| this.$find('.loadView').hasClass('fixSize') | |
| ); | |
| this._createMagnifier(); | |
| }, | |
| _createMagnifier: function() { | |
| this.mag = this.magnifierController.createMagnifier( | |
| this.$find('.loadView'), { | |
| scale: 2, | |
| width: 200, | |
| height: 200, | |
| mouseover: true | |
| }); | |
| } | |
| }; | |
| $('.viewer').each(function() { | |
| h5.core.controller(this, controller); | |
| }); | |
| }); |
動いているデモをJSFiddle上で試すことができます。ぜひお試しください。
コメントは受け付けていません。