hifiveのUIライブラリ紹介「拡大表示」
hifiveのUIライブラリにお絵かきボードがあります。こちらは写真に情報を追加したり、白紙の上に自分でイラストを書けるという機能ですが、もう一つの機能にMagnifier（拡大表示機能）があります。
実際のデモは下の画像になります。また、JSFiddle上で試すこともできます。
HTMLについて
HTMLはビューワーをDOMで定義するだけです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="viewer"> | |
| <div class="loadView"></div> | |
| </div> |
JavaScriptについて
JavaScript側では h5.ui.components.artboard.controller.ArtboardViewerController と h5.ui.components.artboard.controller.MagnifierController を使います。それぞれ表示するクラスを定義します（今回は ‘.loadView’）。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| artboardViewerController: h5.ui.components.artboard.controller.ArtboardViewerController, | |
| magnifierController: h5.ui.components.artboard.controller.MagnifierController, | |
| __meta: { | |
| artboardViewerController: { | |
| rootElement: '.loadView' | |
| }, | |
| magnifierController: { | |
| rootElement: '.loadView' | |
| } | |
| }, |
さらに __ready イベントにてデータを読み込みます。データはSVGで定義します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| __ready: function() { | |
| this._load(SAMPLE_SAVE_DATA); | |
| }, | |
| _load: function(saveData) { | |
| this.artboardViewerController.load( | |
| saveData, | |
| this.$find('.loadView').hasClass('fixSize') | |
| ); | |
| this._createMagnifier(); | |
| }, |
データを読み込んだら拡大表示処理を行います。拡大率、拡大するサイズを指定します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _createMagnifier: function() { | |
| this.mag = this.magnifierController.createMagnifier( | |
| this.$find('.loadView'), { | |
| scale: 2, | |
| width: 200, | |
| height: 200, | |
| mouseover: true | |
| }); | |
| } |
全体のコードは次のようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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上で試すことができます。ぜひお試しください。
hifive開発者ブログ 
コメントは受け付けていません。