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

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上で試すことができます。ぜひお試しください。

お絵かきボード