コンテンツへスキップ

hifiveのUIライブラリ拡大表示で拡大率を変更する

by : 2017/11/14

hifiveのUIライブラリ、お絵かきボードの機能で拡大率を変更する方法です。

実際の動きは次の画像のようになります。デモはこちらのJSFiddleで試せます。

HTMLについて

HTMLは前回の拡大表示をベースに、拡大率を設定できるテキストボックスを追加します。

<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>

view raw
index.html
hosted with ❤ by GitHub

JavaScriptについて

JavaScriptでは拡大率を設定する処理を次のように書きます。

$(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);
});

view raw
index.js
hosted with ❤ by GitHub

以上の処理でダイナミックに拡大率の変更ができるようになります。


今回のデモはJSFiddleにアップロードされていますのでぜひご覧ください。必要に応じて拡大率を変えてみてください。

お絵かきボード

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。