POPSブログ

CreateJS コンテナ継承Sliderクラス

277

  Category:  javascript2014/02/02 pops 

ドラッグで動く、Sliderパーツです。前ページの「ドラッグボタン形式」を「コンテナ継承Sliderクラス」にしたものです。それを使用して画像の拡大縮小、回転、移動を行なって見ます。RESETボタンを付けました。
easeljs-0.7 でのテストです。

 

CreateJS コンテナ継承Sliderクラス テスト


デザインなどは結構簡単に修正など出来ると思いますが、リスナーが沢山あるので構成が結構面倒になります。
「AS3」などでは、殆んどライブラリー、あるいはコンポーネントを使用して制作しましたから、特別なデザインでない限りは自作することはマレでありました。
CreateJSでも、ライブラリーあるいはクラスで標準に使えるようになれば良いのですが、....
将来的にはそうなる事でしょうが?........


 

DEMO


CreateJS コンテナ継承Sliderクラス テスト、(createJS062.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///



Chrome Firefox Safari(Win) IE9、で動作確認済み。 Safari(Mac)、IE10、は未確認です。


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。(バージョン 0.7.0 使用)


<script type="text/javascript" src="js/easeljs-0.7.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。


HTML (HTML5)


<div id="demo-wrap">
	<div id="image-box">
		<canvas id="mainCanvas" width="640" height="300"></canvas>
	</div>
</div>

JS

createJS062.js、JS名は任意に変更可。注意、easeljs-0.7用です。


//日本語
//createJS062.js
//コンテナ継承Sliderクラス
//easeljs-0.7用

//--------------------------------------------------------------

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;

//テキスト使用
var textUse=true;

var mainImage;
var imageContainer;
var controlContainer;
var btncontainer;
var viewtext;

//ドラッグBTN
var myhitBtn;
//ドラッグBTN
var dragBtnBox;
var dragBtnBox2;
var dragBtnBox3;
var mousePoint;

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);
var shadow2=new createjs.Shadow("#555555",0,0,2);

//背景切り替え
var backchg_no=0;
var backcolors=["#000000","#FFFFFF","#708090","#D2B4BC","#EEEEEE","#888888","#555555"];

function init() {

	stage=new createjs.Stage("mainCanvas");
	//MouseOver設定/必要に応じ設定
	stage.enableMouseOver(20);

	//バックRect/最下位色背景層、無くとも良い
	backrect=new createjs.Shape();
	backrect.graphics.beginFill("#000000").drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);
	stage.update();

	//クリックアクション
	backrect.addEventListener("click",backchg);

	//空コンテナインスタンス配置
	imageContainer=new createjs.Container();
	mainImage=new createjs.Bitmap();
	mainImage.image=new createjs.Bitmap('/main/images/toyota_car16.jpg').image;
	mainImage.regX=canvasWidth/2;
	mainImage.regY=canvasHeight/2;
	imageContainer.x=canvasWidth/2;
	imageContainer.y=canvasHeight/2;
	imageContainer.addChild(mainImage);
	stage.addChild(imageContainer);

	//バックRect2
	backrect2=new createjs.Shape();
	backrect2.graphics.beginFill("#FFFFFF").drawRect(0,0,canvasWidth,40);
	backrect2.y=canvasHeight-40;
	backrect2.alpha=0.8;
	stage.addChild(backrect2);

	//Sliderドラッグタイプ
	//ラベル、X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、TEXT色、ラベル色、初期値 0-1 ID
	var id=0;
	dragBtnBox=new SliderParts ("SCALE",0,0,100,10,5,"#FFFFFF","#00CED1","#CCCCCC","#FFFFFF","#FFFFFF",0.5,id);
	dragBtnBox.x=80;
	dragBtnBox.y=canvasHeight-20;
	stage.addChild(dragBtnBox);

	var id=1;
	dragBtnBox2=new SliderParts ("ROTATE",0,0,100,10,5,"#FFFFFF","#00CED1","#CCCCCC","#FFFFFF","#FFFFFF",0.5,id);
	dragBtnBox2.x=280;
	dragBtnBox2.y=canvasHeight-20;
	stage.addChild(dragBtnBox2);

	var id=2;
	dragBtnBox3=new SliderParts ("MOVE",0,0,100,10,5,"#FFFFFF","#00CED1","#CCCCCC","#FFFFFF","#FFFFFF",0.5,id);
	dragBtnBox3.x=480;
	dragBtnBox3.y=canvasHeight-20;
	stage.addChild(dragBtnBox3);

	//BTNontainer
	btncontainer=new createjs.Container(0,0,10,10);
	btncontainer.x=545;
	btncontainer.y=5;
	stage.addChild(btncontainer);

	//x,y,w,h,r,c,label,lc,overc,outc
	myhitBtn=createbtn (0,0,60,20,5,"#FFFFFF","RESET","#FF0000","#48D1CC","#FFFFFF");
	myhitBtn.cursor="pointer";
	myhitBtn.x=60/2;
	myhitBtn.y=0;
	//クリック
	myhitBtn.addEventListener("click",reset_parts);
	//addChild
	btncontainer.addChild(myhitBtn);

	//簡易TEXT
	viewtext=new createjs.Text("","12px Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);

	//TEXT
	set_text("SliderBox");
	stage.update();

	//表示までの調整
	setTimeout(function() {

		//画像表示に進む
		main_set();

	},2000);

}

//背景色変更
function backchg() {
	backchg_no ++;
	if (backchg_no > backcolors.length-1) {backchg_no=0;}
	var color=backcolors[backchg_no];
	backrect.graphics.beginFill(color).drawRect(0,0,canvasWidth,canvasHeight);
}

//Main
function main_set() {
	//
	//Ticker設定
	createjs.Ticker.setFPS(20);
	createjs.Ticker.addEventListener('tick',tick);

}

//tick
function tick() {
	stage.update();
}

//
function stopdrag(event) {

	var instance=event.currentTarget;
	instance.removeEventListener("pressup",stopdrag);
	instance.removeEventListener("pressmove",drag);

}
//ドラッグ完了
function drag(event) {

	//ボタン
	var instance=event.currentTarget;
	//Box
	var graphicsInstance=event.target.parent.getChildByName("dragline");
	//TEXT
	var textInstance=event.target.parent.getChildByName("text");

	//親インスタンス
	var boxInstance=event.currentTarget.parent;
	//var boxInstance=event.target.parent;//どちらでも良い

	//親Boxの大きさ
	var w=boxInstance.width;
	var h=boxInstance.height;
	//処理識別ID
	var id=boxInstance.id;
	//移動Point
	var offset=instance.localToGlobal(mousePoint.x,mousePoint.y);
	//移動量
	var moveX_v=instance.x+event.stageX-offset.x;
	//Line食み出し修正
	if (moveX_v < 0) {moveX_v=0;}
	if (moveX_v > 100) {moveX_v=w;}
	//ボタン移動
	instance.x=moveX_v;

/*
	//直接Lineグラフィック修正
	graphicsInstance.graphics.clear();
	graphicsInstance.graphics.ss(5).s("#CCCCCC").moveTo(0,h/2).lineTo(moveX_v,h/2);
	//直接TEXT修正
	textInstance.text=Math.round(moveX_v/w*100);
*/

	//クラスメソッドで修正/比率で計算
	boxInstance.graphics_chg(moveX_v/w);

	//ID=0 画像拡大
	if (id == 0) {
		imageScaleUp(moveX_v*2/w);
	}
	//ID=1 画像回転
	if (id == 1) {
		imageRotateUp((moveX_v*360/w)-180);
	}
	//ID=2 画像移動
	if (id == 2) {
		imageMoveUp((moveX_v*640/w)-320);
	}
	stage.update();

}
//画像拡大
function imageScaleUp(scale_v) {

	//SCALE
	mainImage.scaleX=scale_v;
	mainImage.scaleY=scale_v;
	//TEXT
	var scale=Math.floor(scale_v*100);
	set_text("SCALE: " + scale + "%");
}
//画像回転
function imageRotateUp(rotate_v) {

	//ROTATE
	mainImage.rotation=rotate_v;
	//TEXT
	var rotate=Math.floor(rotate_v);
	set_text("ROTATE: " + rotate);
}

//画像移動
function imageMoveUp(move_v) {

	//MOVE
	imageContainer.x=move_v+canvasWidth/2;
	//TEXT
	var move=Math.floor(move_v);
	set_text("MOVE: " + move);
}

//reset
function reset_parts() {
	//画像初期化
	imageScaleUp(1);
	imageRotateUp(0);
	imageMoveUp(0);
	//クリアメソッド実行
	dragBtnBox.reset();
	dragBtnBox2.reset();
	dragBtnBox3.reset();
	//TEXT
	set_text("RESET");
}

//VIEWTEXT
function set_text(t) {
	if (textUse) {
		viewtext.text=t;
		stage.update();
	}
}

//create-bottunベタ塗り
function createbtn (x,y,w,h,r,c,label,lc,overc,outc) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	var s=new createjs.Shape();
	s.graphics.s(0).beginFill(outc);
	operaRoundRect(s,x,y,w,h,r);
	btn.addChild(s);
	//myBtn shadow onMouseOverでupdate()すると濃くなる
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,"12px Arial",lc);
	tx.x=w/2;
	tx.y=h/5;
	tx.maxWidth=w;
	//tx.lineWidth=w;
	tx.textAlign="center";
	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//MouseOver
	btn.addEventListener("mouseover",function () {
		s.graphics.clear();
		s.graphics.s(0).beginFill(overc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	//MouseOut
	btn.addEventListener("mouseout",function () {
		s.graphics.clear();
		s.graphics.s(0).beginFill(outc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	return btn;
}

//quadraticCurveTo
function operaRoundRect(s,x,y,w,h,r) {
	s.graphics.moveTo(x+r,y)
	.lineTo(x+w-r,y)
	.quadraticCurveTo(x+w,y,x+w,y+r)
	.lineTo(x+w,y+h-r)
	.quadraticCurveTo(x+w,y+h,x+w-r,y+h)
	.lineTo(x+r,y+h)
	.quadraticCurveTo(x,y+h,x,y+h-r)
	.lineTo(x,y+r)
	.quadraticCurveTo(x,y,x+r,y);
}

//--------------------------------------------------------------
//SliderPartsクラスContainer継承クラスDragBtn
(function(window){

	//ラベル、X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、TEXT色、ラベル色、初期値 0-1 ID
	function SliderParts (label,x,y,w,h,r,b_c,btn_c,line_c,text_c,label_c,start_v,id) {

		this.initialize(label,x,y,w,h,r,b_c,btn_c,line_c,text_c,label_c,start_v,id);

	}

	//Containerクラス
	SliderParts.prototype=new createjs.Container();
	//親クラスのinitializeを取得
	SliderParts.prototype.Container_init=SliderParts.prototype.initialize;
	//
	SliderParts.prototype.initialize=function(label,x,y,w,h,r,b_c,btn_c,line_c,text_c,label_c,start_v,id){

		this.Container_init(label,x,y,w,h,r,b_c,btn_c,line_c,text_c,label_c,start_v,id);

		this.label=label;
		this.x=x;
		this.y=y;
		this.w=w;
		this.h=h;
		this.r=r;
		this.b_c=b_c;
		this.btn_c=btn_c;
		this.line_c=line_c;
		this.text_c=text_c;
		this.label_c=label_c;
		this.start_v=start_v;
		this.id=id;//重要

		//BTNコンテナ
		var mask=new createjs.Shape();
		mask.graphics.s().beginFill(this.b_c);
		operaRoundRect(mask,this.x,this.y,this.w,this.h,this.h/2);
		mask.visible=false;
		//Base
		var s=new createjs.Shape();
		s.graphics.s().beginFill(this.b_c);
		operaRoundRect(s,this.x,this.y,this.w,this.h,this.h/2);
		//ラベル
		var labels=new createjs.Text("LABEL","12px Arial",this.label_c);
		labels.text=this.label;
		labels.textAlign="left";
		labels.x=0;
		labels.y=-2;
		labels.lineHeight=20;
		labels.textBaseline="bottom";
		labels.name="label";
		//text
		var t=new createjs.Text("-","10px Arial",text_c);
		t.text=""+start_v*100;
		t.textAlign="right";
		t.x=w+25;
		t.y=-2;
		t.lineHeight=20;
		t.textBaseline="top";
		t.name="text";
		//line
		var line=new createjs.Shape();
		line.name="dragline";//名前重要
		line.graphics.ss(5).s(this.line_c).moveTo(0,this.h/2).lineTo(this.start_v*this.w,this.h/2);
		line.mask=mask;
		//Btn
		var drag_btn=new createjs.Shape();
		drag_btn.graphics.s().beginFill(this.btn_c).drawCircle(this.x,this.h/2,this.r);
		drag_btn.x=this.start_v*this.w;

		//addChild
		this.addChild(mask,s,labels,t,line,drag_btn);
		this.width=this.w;//重要
		this.height=this.h;
		this.id=this.id;//重要

		//Base-shadow
		this.shadow=new createjs.Shadow("#555555",0,0,2);

		//ドラッグアクション設定
		drag_btn.addEventListener("mousedown",function(event){
			var instance=event.currentTarget;
			//ドラッグ開始
			mousePoint=instance.globalToLocal(event.stageX,event.stageY);
			//直接eventでは無くinstanceに
			instance.addEventListener("pressup",stopdrag);
			instance.addEventListener("pressmove",drag);
		});

		//グラフィック修正ソッド/注意比率で受け取る
		this.graphics_chg=function(chg_v) {
			line.graphics.clear();
			line.graphics.ss(5).s(this.line_c).moveTo(0,this.h/2).lineTo(chg_v*this.w,this.h/2);
			drag_btn.x=chg_v*this.w;
			t.text=""+Math.round(chg_v*100);

		}
		//クリアメソッド
		this.reset=function() {
			line.graphics.clear();
			line.graphics.ss(5).s(this.line_c).moveTo(0,this.h/2).lineTo(this.start_v*this.w,this.h/2);
			drag_btn.x=this.start_v*this.w;
			t.text=""+start_v*100;

		}

	}

	window.SliderParts=SliderParts;

}(window));

//------------------------------------------------------------------------

init();

注釈文を削除すれば、幾分早くなります。
画像使用の場合、登録画像パスは当方の例です。使用の際は環境に合わせて下さい。


CSS

createJS062.css、CSS名は任意に変更可


/*日本語 createJS062.css*/

#demo-wrap {
text-align:center;
}

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:300px;
margin:0 auto;
padding:0;
border:1px #CCCCCC solid;
background-color:#FFFFFF;
}

当方のサンプルの例です。


簡単な説明


[説明図]

 

簡単に作ってみましたが結構色々と悩みます。何とか出来たと言う感じで、これも無印悪品だ!


1. ドラッグボタン形式で一般的な形です。(デザインは多様に変更可能)
2. 他のものも継承クラス化は簡単に出来るでしょう。(前ページ参照)
3. ラベル及びテキストを付加してみました。
4. モット簡単な良いアイデアなどあったら知りたいです。
5. 一応 easeljs-0.7.1でも可動します。


インスタンスの作成と識別

ここでは、インスタンスの識別に id を書き込みその「値」で識別しています。(識別は、id 以外でも可能で自由です)
継承クラスですから、new SliderParts() で作り addChild() します。複数設置が実に簡単になります。

注意、インスタンスの原点は、図の様に「グラフィックの左上」になります。



//Sliderドラッグタイプ
//ラベル、X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、TEXT色、ラベル色、初期値 0-1 ID
var id=0;
dragBtnBox=new SliderParts ("SCALE",0,0,100,10,5,"#FFFFFF","#00CED1","#CCCCCC","#FFFFFF","#FFFFFF",0.5,id);
dragBtnBox.x=80;
dragBtnBox.y=canvasHeight-20;
stage.addChild(dragBtnBox);

ドラッグ完了でインスタンスを識別して処理

ドラッグ完了でインスタンスを識別して処理していますが、Sliderのグラフイック更新などは、継承クラス内の「メソッド」にアクセスして描き換えする様に作りました。(簡単、効率的)

ここでは、直接Lineグラフィック修正も行なえるように、graphicsInstance textInstance 等も取得しています。 「メソッド」にアクセスしてグラフィック更新ならば、親インスタンス boxInstance を取得すれば良い。


継承クラス内の「メソッド」にアクセスしてグラフィック更新

親Boxの大きさなどは、事前に登録して要る値で、実際の大きさとは異なります。


//ドラッグ完了
function drag(event) {

	//ボタン
	var instance=event.currentTarget;
	//Box
	var graphicsInstance=event.target.parent.getChildByName("dragline");
	//TEXT
	var textInstance=event.target.parent.getChildByName("text");

	//親インスタンス
	var boxInstance=event.currentTarget.parent;
	//var boxInstance=event.target.parent;//どちらでも良い

	//親Boxの大きさ
	var w=boxInstance.width;
	var h=boxInstance.height;
	//処理識別ID
	var id=boxInstance.id;
	//移動Point
	var offset=instance.localToGlobal(mousePoint.x,mousePoint.y);
	//移動量
	var moveX_v=instance.x+event.stageX-offset.x;
	//Line食み出し修正
	if (moveX_v < 0) {moveX_v=0;}
	if (moveX_v > 100) {moveX_v=w;}
	//ボタン移動
	instance.x=moveX_v;

	//直接Lineグラフィック修正は削除 クラスメソッドで修正

	//クラスメソッドで修正/比率で計算
	boxInstance.graphics_chg(moveX_v/w);

	//ID=0 画像拡大
	if (id == 0) {
		imageScaleUp(moveX_v*2/w);
	}
	//ID=1 画像回転
	if (id == 1) {
		imageRotateUp((moveX_v*360/w)-180);
	}
	//ID=2 画像移動
	if (id == 2) {
		imageMoveUp((moveX_v*640/w)-320);
	}
	stage.update();

}

● 直接Lineグラフィック修正
直接Lineグラフィック修正(目盛り、ボタン位置)するには、グラフィック部分のインスタンスを取得して書き換えねばなりませんのでいささか面倒なのでやめます。(大きさなどの「数値」を常に「受け渡し」で認識できるようにする処理が面倒)


ドラッグは複数のリスナー経由で処理せねばならないため、通常より面倒だ!
よってこの処理はしていません、下記の「クラスメソッドで修正」しています。


//直接Lineグラフィック修正
graphicsInstance.graphics.clear();
graphicsInstance.graphics.ss(5).s("#CCCCCC").moveTo(0,h/2).lineTo(moveX_v,h/2);
//直接TEXT修正
textInstance.text=Math.round(moveX_v/w*100);

● クラスメソッドで修正
クラスメソッドで修正(グラフィック修正)するには、リスナー内より親のインスタンスさえわかれば、下記の様に簡単に更新出来ます。1回で、グラフィック、テキスト更新が出来ます。


//クラスメソッドで修正
boxInstance.graphics_chg(moveX_v/w);

大きさ、色情報などもクラス内にありますので、少ない引数で更新できる簡便さがある。


● クラスメソッドでリセット
リセットボタンを押した時の「リセット」(グラフィック修正)もクラスメソッドで行います。


//reset
function reset_parts() {
	//画像初期化
	imageScaleUp(1);
	imageRotateUp(0);
	imageMoveUp(0);
	//クリアメソッド実行
	dragBtnBox.reset();
	dragBtnBox2.reset();
	dragBtnBox3.reset();
	//TEXT
	set_text("RESET");
}

クラスメソッドを目的に応じて作っておけば、クラス内部の書換えなどが簡単で便利です。


● SliderPartsクラス (Container継承クラス)

グラフィック更新のために、クラスメソッドを加えました。
この、「Container継承クラス」は、CreateJS付録のサンプル(tutorials Inheritance)などを参考に書いたものです。


//SliderPartsクラスContainer継承クラスDragBtn
(function(window){

	//ラベル、X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、TEXT色、ラベル色、初期値 0-1 ID
	function SliderParts (label,x,y,w,h,r,b_c,btn_c,line_c,text_c,label_c,start_v,id) {

		this.initialize(label,x,y,w,h,r,b_c,btn_c,line_c,text_c,label_c,start_v,id);

	}

	//Containerクラス
	SliderParts.prototype=new createjs.Container();
	//親クラスのinitializeを取得
	SliderParts.prototype.Container_init=SliderParts.prototype.initialize;
	//
	SliderParts.prototype.initialize=function(label,x,y,w,h,r,b_c,btn_c,line_c,text_c,label_c,start_v,id){

		this.Container_init(label,x,y,w,h,r,b_c,btn_c,line_c,text_c,label_c,start_v,id);

		this.label=label;
		this.x=x;
		this.y=y;
		this.w=w;
		this.h=h;
		this.r=r;
		this.b_c=b_c;
		this.btn_c=btn_c;
		this.line_c=line_c;
		this.text_c=text_c;
		this.label_c=label_c;
		this.start_v=start_v;
		this.id=id;//重要

		//BTNコンテナ
		var mask=new createjs.Shape();
		mask.graphics.s().beginFill(this.b_c);
		operaRoundRect(mask,this.x,this.y,this.w,this.h,this.h/2);
		mask.visible=false;
		//Base
		var s=new createjs.Shape();
		s.graphics.s().beginFill(this.b_c);
		operaRoundRect(s,this.x,this.y,this.w,this.h,this.h/2);
		//ラベル
		var labels=new createjs.Text("LABEL","12px Arial",this.label_c);
		labels.text=this.label;
		labels.textAlign="left";
		labels.x=0;
		labels.y=-2;
		labels.lineHeight=20;
		labels.textBaseline="bottom";
		labels.name="label";
		//text
		var t=new createjs.Text("-","10px Arial",text_c);
		t.text=""+start_v*100;
		t.textAlign="right";
		t.x=w+25;
		t.y=-2;
		t.lineHeight=20;
		t.textBaseline="top";
		t.name="text";
		//line
		var line=new createjs.Shape();
		line.name="dragline";//名前重要
		line.graphics.ss(5).s(this.line_c).moveTo(0,this.h/2).lineTo(this.start_v*this.w,this.h/2);
		line.mask=mask;
		//Btn
		var drag_btn=new createjs.Shape();
		drag_btn.graphics.s().beginFill(this.btn_c).drawCircle(this.x,this.h/2,this.r);
		drag_btn.x=this.start_v*this.w;

		//addChild
		this.addChild(mask,s,labels,t,line,drag_btn);
		this.width=this.w;//重要
		this.height=this.h;
		this.id=this.id;//重要

		//Base-shadow
		this.shadow=new createjs.Shadow("#555555",0,0,2);

		//ドラッグアクション設定
		drag_btn.addEventListener("mousedown",function(event){
			var instance=event.currentTarget;
			//ドラッグ開始
			mousePoint=instance.globalToLocal(event.stageX,event.stageY);
			//直接eventでは無くinstanceに
			instance.addEventListener("pressup",stopdrag);
			instance.addEventListener("pressmove",drag);
		});

		//グラフィック修正ソッド/注意比率で受け取る
		this.graphics_chg=function(chg_v) {
			line.graphics.clear();
			line.graphics.ss(5).s(this.line_c).moveTo(0,this.h/2).lineTo(chg_v*this.w,this.h/2);
			drag_btn.x=chg_v*this.w;
			t.text=""+Math.round(chg_v*100);

		}
		//クリアメソッド
		this.reset=function() {
			line.graphics.clear();
			line.graphics.ss(5).s(this.line_c).moveTo(0,this.h/2).lineTo(this.start_v*this.w,this.h/2);
			drag_btn.x=this.start_v*this.w;
			t.text=""+start_v*100;

		}

	}

	window.SliderParts=SliderParts;

}(window));

初期値 start_v

0-1 の値をとる、目盛りの範囲であるが、Matrixでも使用できるようにの「値」である。原則、この値で目的に応じて計算するようにするが、この辺は自由でも良い。


目的に応じ処理を書く

ライブラリなどと違い、単なる「継承クラス」ですから、その時の状況に応じて詳細を処理しなければなりません。
まだまだ中途半端ですが、多少は「効率的に処理」できる一面は有ります。

「継承クラス」化しても、まだまだ結構面倒である。


グラフィック部分はまだ未完成

横に大きくしても問題は有りませんが、縦に大きくした場合は中のグラフィック部分(lineの高さ)は未処理です。適当にスペース、高さ、等を修正下さい。デザイン変更などは自由です。あくまでもこれはテストです。


Shadow処理

Slider全体にShadow処理をしていますが(CreateJSは親に処理すると中の子にもShadowがかかる)、部分的にShadow処理も可能です。またラベル色など変更出来ますので背景を考慮して読みやすい色にして下さい。


この「デモ」の原型である、継承クラス化していないものは前ページに3種類有ります。

【参照】当方の記事: CreateJS Sliderパーツ、簡易3種を作ってみた


一応、作ってみたが、Sliderは結構面倒である。使用すべき時があれば雌型として利用しようと思います。
ライブラリー等では有りませんので、使用目的に応じて必要箇所の修正が必要です。これは単なるテストです。


これらの改造などは自由です。



 

一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。

CreateJSは結構「仕様」が変わりますので特に注意が必要です。


昨日言い忘れましたが、毎月一日はワタシの誕生日です。以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]