コンテンツへスキップ

お絵かきボードの拡大表示でサイズを固定する

by : 2017/09/01

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

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

HTMLについて

HTMLは前回の拡大表示をベースに、拡大する部分を設定できるテキストボックスを追加します。


<div class="controls">
<label>サイズ:幅
<input type="input" name="width" value="100" size="3" />
</label>
<label>高さ
<input type="input" name="height" value="100" size="3" />
</label>
<input class="setSize" type="button" value="セット" />
</div>

view raw

index.html

hosted with ❤ by GitHub

JavaScriptについて

JavaScriptでは拡大する部分のサイズを設定する処理を次のように書きます。


'.setSize click': function() {
var width = this.$find('[name="width"]').val();
var height = this.$find('[name="height"]').val();
this.mag.setSize({
width: width,
height: height
});
},

view raw

index.html

hosted with ❤ by GitHub

setSizeに数字を適用するだけなので、拡大/縮小ボタンのような使い方も簡単です。


デモはこちらのJSFiddleになります。ターゲットの画像によってサイズを分けるような使い方も良さそうですね。

From → hifive

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

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