hifive開発者ブログ

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

2017/11/14 1:08 pm

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

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

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では拡大率を設定する処理を次のように書きます。

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