hifiveのUIライブラリ拡大表示で拡大率を変更する
hifiveのUIライブラリ、お絵かきボードの機能で拡大率を変更する方法です。
実際の動きは次の画像のようになります。デモはこちらのJSFiddleで試せます。
HTMLについて
HTMLは前回の拡大表示をベースに、拡大率を設定できるテキストボックスを追加します。
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> | |
| <div class="controls"> | |
| <label>拡大率： | |
| <input type="input" name="scale" value="2" size="3" /> | |
| </label> | |
| <input class="setScale" type="button" value="セット" /> | |
| </div> |
JavaScriptについて
JavaScriptでは拡大率を設定する処理を次のように書きます。
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, | |
| : | |
| '.setScale click': function() { | |
| var scale = this.$find('[name="scale"]').val(); | |
| this.mag.setScale(scale); | |
| }, | |
| : | |
| }; | |
| h5.core.controller('body', controller); | |
| }); |
以上の処理でダイナミックに拡大率の変更ができるようになります。
今回のデモはJSFiddleにアップロードされていますのでぜひご覧ください。必要に応じて拡大率を変えてみてください。
hifive開発者ブログ 
コメントは受け付けていません。