hifiveのUIライブラリ紹介「拡大表示」
hifiveのUIライブラリにお絵かきボードがあります。こちらは写真に情報を追加したり、白紙の上に自分でイラストを書けるという機能ですが、もう一つの機能にMagnifier(拡大表示機能)があります。
実際のデモは下の画像になります。また、JSFiddle上で試すこともできます。
HTMLについて
HTMLはビューワーをDOMで定義するだけです。
<div class="viewer"> | |
<div class="loadView"></div> | |
</div> |
JavaScriptについて
JavaScript側では h5.ui.components.artboard.controller.ArtboardViewerController と h5.ui.components.artboard.controller.MagnifierController を使います。それぞれ表示するクラスを定義します(今回は ‘.loadView’)。
artboardViewerController: h5.ui.components.artboard.controller.ArtboardViewerController, | |
magnifierController: h5.ui.components.artboard.controller.MagnifierController, | |
__meta: { | |
artboardViewerController: { | |
rootElement: '.loadView' | |
}, | |
magnifierController: { | |
rootElement: '.loadView' | |
} | |
}, |
さらに __ready イベントにてデータを読み込みます。データはSVGで定義します。
__ready: function() { | |
this._load(SAMPLE_SAVE_DATA); | |
}, | |
_load: function(saveData) { | |
this.artboardViewerController.load( | |
saveData, | |
this.$find('.loadView').hasClass('fixSize') | |
); | |
this._createMagnifier(); | |
}, |
データを読み込んだら拡大表示処理を行います。拡大率、拡大するサイズを指定します。
_createMagnifier: function() { | |
this.mag = this.magnifierController.createMagnifier( | |
this.$find('.loadView'), { | |
scale: 2, | |
width: 200, | |
height: 200, | |
mouseover: true | |
}); | |
} |
全体のコードは次のようになります。
$(function() { | |
var controller = { | |
__name: 'PageController', | |
artboardViewerController: h5.ui.components.artboard.controller.ArtboardViewerController, | |
magnifierController: h5.ui.components.artboard.controller.MagnifierController, | |
__meta: { | |
artboardViewerController: { | |
rootElement: '.loadView' | |
}, | |
magnifierController: { | |
rootElement: '.loadView' | |
} | |
}, | |
mag: null, | |
__ready: function() { | |
this._load(SAMPLE_SAVE_DATA); | |
}, | |
_load: function(saveData) { | |
this.artboardViewerController.load( | |
saveData, | |
this.$find('.loadView').hasClass('fixSize') | |
); | |
this._createMagnifier(); | |
}, | |
_createMagnifier: function() { | |
this.mag = this.magnifierController.createMagnifier( | |
this.$find('.loadView'), { | |
scale: 2, | |
width: 200, | |
height: 200, | |
mouseover: true | |
}); | |
} | |
}; | |
$('.viewer').each(function() { | |
h5.core.controller(this, controller); | |
}); | |
}); |
動いているデモをJSFiddle上で試すことができます。ぜひお試しください。
コメントは受け付けていません。