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

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

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

HTMLについて

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

JavaScriptについて

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

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

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