お絵かきボードの拡大表示でサイズを固定する
hifiveのUIライブラリ、お絵かきボードの機能で拡大する部分のサイズを変更する方法です。
実際の動きは次の画像のようになります。デモはこちらのJSFiddleで試せます。
HTMLについて
HTMLは前回の拡大表示をベースに、拡大する部分を設定できるテキストボックスを追加します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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では拡大する部分のサイズを設定する処理を次のように書きます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '.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になります。ターゲットの画像によってサイズを分けるような使い方も良さそうですね。
hifive開発者ブログ 
コメントは受け付けていません。