お絵かきボードの拡大表示でサイズを固定する
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> |
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 | |
| }); | |
| }, |
setSizeに数字を適用するだけなので、拡大/縮小ボタンのような使い方も簡単です。
デモはこちらのJSFiddleになります。ターゲットの画像によってサイズを分けるような使い方も良さそうですね。
コメントは受け付けていません。