Skip to content

hifiveのUIライブラリ紹介「拡大表示」

by : 2017/07/04

hifiveのUIライブラリにお絵かきボードがあります。こちらは写真に情報を追加したり、白紙の上に自分でイラストを書けるという機能ですが、もう一つの機能にMagnifier(拡大表示機能)があります。

実際のデモは下の画像になります。また、JSFiddle上で試すこともできます。

HTMLについて

HTMLはビューワーをDOMで定義するだけです。

JavaScriptについて

JavaScript側では h5.ui.components.artboard.controller.ArtboardViewerController と h5.ui.components.artboard.controller.MagnifierController を使います。それぞれ表示するクラスを定義します(今回は ‘.loadView’)。

さらに __ready イベントにてデータを読み込みます。データはSVGで定義します。

データを読み込んだら拡大表示処理を行います。拡大率、拡大するサイズを指定します。

全体のコードは次のようになります。

動いているデモをJSFiddle上で試すことができます。ぜひお試しください。

お絵かきボード

From → hifive

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

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