古籏一浩のJavaScriptラボ ― 第64回

Canvasで作ったWebアプリをiPhoneアプリに変換 (2/4)

NimbleKitのスライダーと組み合わせる

　ブラシの描画色を設定するためのスライダーを作成しましょう。スライダーは赤、緑、青の3つを用意して、それぞれの値の組み合わせで色を設定できるようにします。

　まずは単純にスライダーを表示してみましょう。スライダーはNKSliderクラスで扱います。newでNKSliderオブジェクトを生成し、生成されたオブジェクトのinit()メソッドを使ってスライダーの表示位置と幅を指定します。init()の第1引数がX座標、第2引数がY座標、第3引数がスライダーの横幅です。第4引数にはスライダーがドラッグされたときに呼び出す関数を指定できますが、ひとまず表示するだけなので省略します。

　赤、緑、青の3つのスライダーを用意するため、以下のようにNKSliderオブジェクトを生成します。

var slider = {
  red : new NKSlider(),
  green: new NKSlider(),
  blue : new NKSlider()
}

　これでslider.red.init()のようにして使えます。init()で設定しただけでは表示されないので、show()メソッドで画面に表示します。以下のように指定すると座標(10, 340)に横幅300pxでスライダーが表示されます。

slider.red.init(10,340, 300);
slider.red.show();

　スライダーの値はsetValue()メソッドで変更できます。設定できる値は0～100です。

slider.green.setValue(0);

　サンプル2は、サンプル1にスライダーを表示する処理を追加したものです。

スライダーを表示したところ

■サンプル2[draw.js]

var drawData = {
  drawFlag : false,
  oldX : 0, // 直前のX座標を保存するためのもの
  oldY : 0, // 直前のY座標を保存するためのもの
  brushSize : 4, // ブラシサイズ
  penColor : "rgba(255,0,0,1)"
}
var can = document.getElementById("myCanvas");
can.addEventListener("touchmove", function draw(e){
  if (!drawData.drawFlag) return;
  var x = e.touches[0].pageX;
  var y = e.touches[0].pageY;
  document.getElementById("stat").innerHTML = drawData.oldX+","+drawData.oldY;
  var can = document.getElementById("myCanvas");
  var context = can.getContext("2d");
  context.strokeStyle = drawData.penColor;
  context.lineWidth = drawData.brushSize;
  context.lineJoin= "round"; // 連結部分を丸にする
  context.lineCap = "round";
  context.beginPath();
  context.moveTo(drawData.oldX, drawData.oldY);
  context.lineTo(x, y);
  context.stroke();
  context.closePath();
  drawData.oldX = x;
  drawData.oldY = y;
}, true);
can.addEventListener("touchstart", function(e){
  drawData.drawFlag = true;
  drawData.oldX = e.touches[0].pageX;
  drawData.oldY = e.touches[0].pageY;
  document.getElementById("stat").innerHTML = drawData.oldX+","+drawData.oldY;
}, true);
can.addEventListener("touchend", function(){
  drawData.drawFlag = false;
}, true);
// デフォルトのイベントを禁止
document.ontouchmove = function(evt){
  evt.preventDefault();
}
// NimbleKit Slider
var slider = {
  red : new NKSlider(),
  green: new NKSlider(),
  blue : new NKSlider()
}
slider.red.init(10,340, 300);
slider.red.show();
slider.green.init(10,380, 300);
slider.green.show();
slider.green.setValue(0);
slider.blue.init(10,420, 300);
slider.blue.setValue(0);
slider.blue.show();