コンテンツへスキップ

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

by : 2017/07/04

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

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

HTMLについて

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

<div class="viewer">
<div class="loadView"></div>
</div>

view raw
index.html
hosted with ❤ by GitHub

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'
}
},

view raw
index.js
hosted with ❤ by GitHub

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

__ready: function() {
this._load(SAMPLE_SAVE_DATA);
},
_load: function(saveData) {
this.artboardViewerController.load(
saveData,
this.$find('.loadView').hasClass('fixSize')
);
this._createMagnifier();
},

view raw
index.js
hosted with ❤ by GitHub

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

_createMagnifier: function() {
this.mag = this.magnifierController.createMagnifier(
this.$find('.loadView'), {
scale: 2,
width: 200,
height: 200,
mouseover: true
});
}

view raw
index.js
hosted with ❤ by GitHub

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

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

view raw
index.js
hosted with ❤ by GitHub

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

お絵かきボード

From → hifive

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

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