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

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

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

HTMLについて

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

https://gist.github.com/0f70888fd140cf1b34e7a34c44215758

JavaScriptについて

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

https://gist.github.com/18c3b2e3441729ef6d63d72419d9f078

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

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