tmlib.jsでSlider (iPhoneの音量調整とかで使ってるアレ)

tmlib.jsでSlider (この名称で合ってるか知らない) を実装しました。
今回はShapeを使用しています。画像指定すればSpriteも可。
そして引数が多い…

jsdo.itにサンプル置きました。

/**
 * Sliderクラス
 */
var Slider = tm.createClass({
	superClass: tm.app.Shape,
	
	value: 0,           // Sliderの現在値
	min: null,          // 最小値
	max: null,          // 最大値
	default: null,      // 初期値
	dragging: false,    // スライド中フラグ
	disabled: false,    // disabled
	
	init: function(x, y, width, height, margin, min, max, def, sliderImage, gripImage) {
		this.superInit(width, height + (margin==null ? 100 : margin));
		this.setPosition(x, y);
		
		// 値の初期化
		this.min = ((min == null) ? 1 : min) - 1;
		this.max = ((max == null) ? 100 : max);
		this.default = (def == null) ? this.min : def;
		this.value = this.default;
		
		// Slider追加
		if (sliderImage != null) {
			var img = tm.graphics.TextureManager.get(sliderImage);
			this.slider = tm.app.Sprite(img.width, img.height, sliderImage).setPosition(0, 0);
		} else {
			this.slider = tm.app.RectangleShape(width, height / 2, {
				fillStyle: "gray",
				strokeStyle: "black",
				lineWidth: "1"
			});
		}
		this.slider.setPosition(0, 0);
		this.slider.addChildTo(this);
		
		// グリップ初期位置
		var pos = this.value * width / (this.max - this.min);
		// 初期位置のずれ防止
		if (this.value <= this.min) { pos = 0; }
		if (this.value >= this.max) { pos = this.width; }
		
		// グリップ追加
		if (gripImage != null) {
			var img = tm.graphics.TextureManager.get(gripImage);
			this.slideGrip = tm.app.Sprite(img.width, img.height, gripImage);
		} else {
			this.slideGrip = tm.app.CircleShape(this.height/2.5, this.height/2.5, {
				fillStyle: "white",
				strokeStyle: "black",
				lineWidth: "5",
			});
		}
		this.slideGrip.setPosition(pos - (this.width/2), 0);
		this.slideGrip.addChildTo(this);
		
		// マウスイベントを有効化
		this.interaction.enabled = true;
		this.interaction.boundingType = "rect";
	},
	
	// タッチ開始
	onpointingstart: function(e) {
		if (this.disabled) {
			this.dragging = false;
			return;
		}
		// スライド開始はグリップ上をポイントしていること
		var gp = this.localToGlobal(this.pointing);
		if (this.slideGrip.isHitPoint(e.app.pointing.x - gp.x, e.app.pointing.y - gp.y)) {
			this.dragging = true;
		}
	},
	
	// スワイプ
	onpointingmove: function(e) {
		// グリップがドラッグ状態であればSlider上のポインタ座標に移動する
		var gp = this.localToGlobal(this.pointing);
		if (this.dragging && this.isHitPoint(e.app.pointing.x, e.app.pointing.y)) {
			this.slideGrip.setPosition(e.app.pointing.x - gp.x, this.slideGrip.y);
			this.value = (this.slideGrip.x + (this.width / 2)) * ((this.max - this.min) / this.width);
		}
	},
	
	// タッチ終了
	onpointingend: function() {
		this.dragging = false;
	},
	
	// 現在値をIntで受け取る
	getIntValue: function() {
		return parseInt(this.value);
	},
	
	// 現在値をFloat(加工無し)で受け取る
	getFloatValue: function() {
		return this.value;
	},
});

使用例（Sliderクラスの定義は省略）

/*
 * constant
 */
var SCREEN_WIDTH    = 640;
var SCREEN_HEIGHT   = 920;
var SCREEN_CENTER_X = SCREEN_WIDTH / 2;
var SCREEN_CENTER_Y = SCREEN_HEIGHT / 2;

/*
 * メイン処理(ページ読み込み後に実行される)
 */
tm.main(function() {
	
	// アプリケーション作成
	var app = tm.app.CanvasApp("#world");
	app.resize(SCREEN_WIDTH, SCREEN_HEIGHT); // リサイズ
	app.fitWindow();    // 自動フィット
	app.background = "white";
	
	// シーンを切り替える
	app.replaceScene(MainScene());
	
	// 実行
	app.run();
});


tm.define("MainScene", {
	superClass: "tm.app.Scene",
	
	init: function() {
		// 親の初期化
		this.superInit();
		
		// Slider
		this.slider = Slider(320, 400, 400, 21, 100, 0, 200, 100);
		this.slider.addChildTo(this);
		
		// Sliderの現在値表示用ラベル
		this.sliderValue = tm.app.Label("0");
		this.sliderValue.setPosition(70, 410).setFillStyle("black").addChildTo(this);
	},
	
	update: function(app) {
		this.sliderValue.text = this.slider.getIntValue();
	},
});

実行結果  グッと掴んでスッと動かせば数値が変わります。 横方向の認識範囲のマージンが取れてないので改善の余地あり。