POPSブログ

CreateJS Sliderパーツ、簡易3種を作ってみた

276

  Category:  javascript2014/02/01 pops 

ドラッグで動く、Sliderパーツです。簡易に3種作ってみましたが結構面倒です。それを使用して画像の拡大縮小、回転、移動を行なって見ます。RESETボタン無しのものと、付けたものと2通りのテストを行います。
easeljs-0.7 でのテストです。

 

CreateJS CreateJS Sliderパーツ、簡易3種テスト


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


1. [デモ 1] Slider 簡易3種テスト 1、RESETボタンを付けないもので簡単です。
2. [デモ 2] Slider 簡易3種テスト 2、RESETボタンを付けたもの少々面倒です。


 

DEMO


CreateJS CreateJS Slider 簡易3種 テスト、(createJS061.js)

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


[デモ 1]


[デモ 2] RESETボタンを付けたもの


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

[デモ 1] RESETボタン無し

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


//日本語
//createJS061.js
//Sliderリセット無し
//easeljs-0.7用

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

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

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

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

//ドラッグBTN
var dragBtnBox;
var mousePoint;
//ドラッグRING
var dragBtnRing;
var ring_angle=0;
//スライダーBox
var sliderBox;

//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);

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

	//空コンテナインスタンス配置
	imageContainer=new createjs.Container();
	mainImage=new createjs.Bitmap();
	mainImage.image=new createjs.Bitmap('/main/images/toyota_car11.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,50);
	backrect2.y=canvasHeight-50;
	backrect2.alpha=0.8;
	stage.addChild(backrect2);

	stage.update();

	//ドラッグスライダーBox
	//X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、初期値 0-1
	dragBtnBox=createDragBtnBox (0,0,100,10,5,"#FFFFFF","#FF0000","#CCCCCC",0.5);
	dragBtnBox.x=100;
	dragBtnBox.y=canvasHeight-20;
	stage.addChild(dragBtnBox);

	//ダイアルスライダーBox
	//X、Y、ベース半径、高さ、ボタン半径、ベース色、ボタン色、0ボタン色,初期値 0
	dragBtnRing=createDragBtnRing (0,0,20,5,"#FFFFFF","#FF0000","#EEEEEE",0);
	dragBtnRing.x=320;
	dragBtnRing.y=canvasHeight-25;
	stage.addChild(dragBtnRing);

	//簡易スライダーBox
	//X、Y、幅、高さ、ベース色、ライン色、初期値 0-1
	sliderBox=createSliderBox (0,0,100,10,"#FFFFFF","#CCCCCC",0.5);
	sliderBox.x=500;
	sliderBox.y=canvasHeight-20;
	stage.addChild(sliderBox);

	//ラベル
	var textlable=["SCALE","ROTATE","MOVE"];
	for (var i=0; i < 3; i++) {
		var t=new createjs.Text("","12px Arial","#888888");
		t.text=textlable[i];
		t.x=200*i+40;
		t.y=canvasHeight-10;
		t.textBaseline="bottom";
		stage.addChild(t);
	}

	//簡易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 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);
	//TEXT
	var move=Math.floor(move_v*canvasWidth-canvasWidth/2);
	set_text("MOVE: " + move);
}

//角度0
function resetAngle () {

	//ANGLE
	dragBtnRing.rotation=0;
	mainImage.rotation=0;
	set_text("RESET-ANGLE");
}

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

//ドラッグスライダーBox
//X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、初期値 0-1
function createDragBtnBox (x,y,w,h,r,b_c,btn_c,line_c,start_v) {

	//BTNコンテナ
	var box=new createjs.Container();
	var mask=new createjs.Shape();
	mask.graphics.s().beginFill(b_c);
	operaRoundRect(mask,x,y,w,h,h/2);
	mask.visible=false;
	//Base
	var s=new createjs.Shape();
	s.graphics.s().beginFill(b_c);
	operaRoundRect(s,x,y,w,h,h/2);
	//line
	var line=new createjs.Shape();
	line.name="dragline";//名前重要
	line.graphics.ss(5).s(line_c).moveTo(0,h/2).lineTo(start_v*w,h/2);
	line.mask=mask;
	//Btn
	var drag_btn=new createjs.Shape();
	drag_btn.graphics.s().beginFill(btn_c).drawCircle(x,h/2,r);
	drag_btn.x=start_v*w;
	//addChild
	box.addChild(mask,s,line,drag_btn);
	box.width=w;//重要
	box.height=h;
	box.color=line_c;
	//Base-shadow
	box.shadow=shadow2;

	//ドラッグアクション設定
	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);
	});

	return box;

}

//
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");
	//親Boxの大きさ
	var box=event.target.parent;
	var w=box.width;
	var h=box.height;
	var c=box.color;
	//移動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(c).moveTo(0,h/2).lineTo(moveX_v,h/2);

	//画像拡大
	imageScaleUp(moveX_v*2/w);

	stage.update();

}

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

//ダイアルスライダーBox
//X、Y、ベース半径、高さ、ボタン半径、ベース色、ボタン色、初期値 0
function createDragBtnRing (x,y,br,r,b_c,btn_c,resetbtn_c,start_v) {

	//BTNコンテナ
	var ring=new createjs.Container();
	ring.rotation=0;//0
	//Base
	var s=new createjs.Shape();
	s.graphics.s().beginFill(b_c).drawCircle(x,y,br);
	//Btn
	var drag_btn=new createjs.Shape();
	drag_btn.graphics.s().beginFill(btn_c).drawCircle(0,0,r);
	drag_btn.x=0;
	drag_btn.y=-br+r+1;
	//reset-Btn
	var reset_btn=new createjs.Shape();
	reset_btn.graphics.s().beginFill(resetbtn_c).drawCircle(0,0,br*.35);
	reset_btn.x=0;
	reset_btn.y=0;
	//addChild
	ring.addChild(s,reset_btn,drag_btn);
	ring.width=br*2;//重要
	ring.height=br*2;
	//Base-shadow
	ring.shadow=shadow2;

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

	return ring;

}
//
function stopdrag2(event) {

	var instance=event.currentTarget;
	instance.removeEventListener("pressup",stopdrag2);
	instance.removeEventListener("pressmove",drag2);

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

	//ボタン
	var instance=event.currentTarget;
	//親Ringの大きさ
	var ring=event.target.parent;
	var w=ring.width;
	var h=ring.height;
	//移動Point
	var offset=ring.localToGlobal(mousePoint.x,mousePoint.y);
	//移動量ANGLE変換
	var moveX_v=(event.stageX-offset.x);
	var moveY_v=(event.stageY-offset.y);
	var angle=(180*Math.atan2(moveY_v,moveX_v)/Math.PI)+90;
	ring.rotation=angle;

	//画像回転
	imageRotateUp(angle);

	stage.update();

}

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

//簡易スライダーBox
//X、Y、幅、高さ、ベース色、ライン色、TEXT色、初期値 0-1
function createSliderBox (x,y,w,h,b_c,line_c,start_v) {

	//両端の空白追加
	var margin=2;

	//BTNコンテナ
	var box=new createjs.Container();
	//Base
	var s=new createjs.Shape();
	s.graphics.s().beginFill(b_c).drawRect(x,y,w+margin*2,h);
	//Base-shadow
	s.shadow=shadow2;
	//line
	var line=new createjs.Shape();
	line.name="slideline";//名前重要
	line.graphics.s().beginFill(line_c).drawRect(x+margin,y,w*start_v,h);

	//addChild
	box.addChild(s,line);
	box.width=w;//重要
	box.height=h;
	box.color=line_c;
	box.margin=margin;

	//ドラッグアクション設定
	box.addEventListener("mousedown",function(event){

		var instance=event.currentTarget;
		var w=instance.width;//重要
		var h=instance.height;
		var c=instance.color;
		var m=instance.margin;
		//line
		var graphicsInstance=event.target.parent.getChildByName("slideline");
		mousePoint=instance.globalToLocal(event.stageX-margin,event.stageY);
		drawline(graphicsInstance,w,h,c,m);

	});

	return box;

}
//ライン再描画
function drawline(line_instance,w,h,c,margin) {

	//ポインタ位置
	var line_w=mousePoint.x;
	//食み出し修正
	if (mousePoint.x < 0) {line_w=0;}
	if (mousePoint.x > w) {line_w=w;}
	//ライン再描画
	line_instance.graphics.clear();
	line_instance.graphics.s().beginFill(c).drawRect(0+margin,0,line_w,h);
	//
	set_text("LINE: "+line_w);

	//画像移動
	imageMoveUp(line_w/w);

	stage.update();
}

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

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

//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);
}

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

init();

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


JS

[デモ 2] RESETボタンあり

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


//日本語
//createJS061b.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 mousePoint;
//ドラッグRING
var dragBtnRing;
var ring_angle=0;
//スライダーBox
var sliderBox;

//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_car10.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,50);
	backrect2.y=canvasHeight-50;
	backrect2.alpha=0.8;
	stage.addChild(backrect2);

	//ドラッグスライダーBox
	//X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、初期値 0-1
	dragBtnBox=createDragBtnBox (0,0,100,10,5,"#FFFFFF","#FF0000","#CCCCCC",0.5);
	dragBtnBox.x=100;
	dragBtnBox.y=canvasHeight-20;
	stage.addChild(dragBtnBox);

	//ダイアルスライダーBox
	//X、Y、ベース半径、高さ、ボタン半径、ベース色、ボタン色、0ボタン色,初期値 0
	dragBtnRing=createDragBtnRing (0,0,20,5,"#FFFFFF","#FF0000","#EEEEEE",0);
	dragBtnRing.x=320;
	dragBtnRing.y=canvasHeight-25;
	stage.addChild(dragBtnRing);

	//簡易スライダーBox
	//X、Y、幅、高さ、ベース色、ライン色、初期値 0-1
	sliderBox=createSliderBox (0,0,100,10,"#FFFFFF","#CCCCCC",0.5);
	sliderBox.x=500;
	sliderBox.y=canvasHeight-20;
	stage.addChild(sliderBox);

	//ラベル
	var textlable=["SCALE","ROTATE","MOVE"];
	for (var i=0; i < 3; i++) {
		var t=new createjs.Text("","12px Arial","#888888");
		t.text=textlable[i];
		t.x=200*i+40;
		t.y=canvasHeight-10;
		t.textBaseline="bottom";
		stage.addChild(t);
	}

	//BTN-Container
	btncontainer=new createjs.Container(0,0,10,10);
	btncontainer.x=545;
	btncontainer.y=5;
	stage.addChild(btncontainer);
	//btncontainer.visible=false;

	//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 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);
	//TEXT
	var move=Math.floor(move_v*canvasWidth-canvasWidth/2);
	set_text("MOVE: " + move);

}
//角度0/内部関数実行
function resetAngle () {

	//ANGLE
	dragBtnRing.reset();
	mainImage.rotation=0;
	set_text("RESET-ANGLE");
}

//reset
function reset_parts() {

	//画像初期化
	imageScaleUp(1);
	imageRotateUp(0);
	imageMoveUp(0.5);

	//パーツ初期化
	dragBtnBox.reset(0.5);
	dragBtnRing.reset();
	sliderBox.reset(0.5);

	//TEXT
	set_text("RESET");
}

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

//ドラッグスライダーBox
//X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、初期値 0-1
function createDragBtnBox (x,y,w,h,r,b_c,btn_c,line_c,start_v) {

	//BTNコンテナ
	var box=new createjs.Container();
	var mask=new createjs.Shape();
	mask.graphics.s().beginFill(b_c);
	operaRoundRect(mask,x,y,w,h,h/2);
	mask.visible=false;
	//Base
	var s=new createjs.Shape();
	s.graphics.s().beginFill(b_c);
	operaRoundRect(s,x,y,w,h,h/2);
	//line
	var line=new createjs.Shape();
	line.name="dragline";//名前重要
	line.graphics.ss(5).s(line_c).moveTo(0,h/2).lineTo(start_v*w,h/2);
	line.mask=mask;
	//Btn
	var drag_btn=new createjs.Shape();
	drag_btn.graphics.s().beginFill(btn_c).drawCircle(x,h/2,r);
	drag_btn.x=start_v*w;
	//addChild
	box.addChild(mask,s,line,drag_btn);
	box.width=w;//重要
	box.height=h;
	box.color=line_c;
	//Base-shadow
	box.shadow=shadow2;

	//ドラッグアクション設定
	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);
	});

	//初期化関数
	box.reset=function(s_v) {
		line.graphics.clear();
		line.graphics.ss(5).s(line_c).moveTo(0,h/2).lineTo(s_v*w,h/2);
		drag_btn.x=s_v*w;
	}

	return box;

}

//
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");
	//親Boxの大きさ
	var box=event.target.parent;
	var w=box.width;
	var h=box.height;
	var c=box.color;
	//移動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グラフィック修正
	box.reset(moveX_v/w);

	//画像拡大
	imageScaleUp(moveX_v*2/w);

	stage.update();

}

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

//ダイアルスライダーBox
//X、Y、ベース半径、高さ、ボタン半径、ベース色、ボタン色、初期値 0
function createDragBtnRing (x,y,br,r,b_c,btn_c,resetbtn_c,start_v) {

	//BTNコンテナ
	var ring=new createjs.Container();
	ring.rotation=0;//0
	//Base
	var s=new createjs.Shape();
	s.graphics.s().beginFill(b_c).drawCircle(x,y,br);
	//Btn
	var drag_btn=new createjs.Shape();
	drag_btn.graphics.s().beginFill(btn_c).drawCircle(0,0,r);
	drag_btn.x=0;
	drag_btn.y=-br+r+1;
	//reset-Btn
	var reset_btn=new createjs.Shape();
	reset_btn.graphics.s().beginFill(resetbtn_c).drawCircle(0,0,br*.35);
	reset_btn.x=0;
	reset_btn.y=0;
	//addChild
	ring.addChild(s,reset_btn,drag_btn);
	ring.width=br*2;//重要
	ring.height=br*2;
	//Base-shadow
	ring.shadow=shadow2;

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

	//初期化関数
	ring.reset=function() {
		ring.rotation=0;//0
	}
	return ring;

}
//
function stopdrag2(event) {

	var instance=event.currentTarget;
	instance.removeEventListener("pressup",stopdrag2);
	instance.removeEventListener("pressmove",drag2);

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

	//ボタン
	var instance=event.currentTarget;
	//親Ringの大きさ
	var ring=event.target.parent;
	var w=ring.width;
	var h=ring.height;
	//移動Point
	var offset=ring.localToGlobal(mousePoint.x,mousePoint.y);
	//移動量ANGLE変換
	var moveX_v=(event.stageX-offset.x);
	var moveY_v=(event.stageY-offset.y);
	var angle=(180*Math.atan2(moveY_v,moveX_v)/Math.PI)+90;
	ring.rotation=angle;

	//画像回転
	imageRotateUp(angle);

	stage.update();

}

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

//簡易スライダーBox
//X、Y、幅、高さ、ベース色、ライン色、TEXT色、初期値 0-1
function createSliderBox (x,y,w,h,b_c,line_c,start_v) {

	//両端の空白追加
	var margin=2;
	//BTNコンテナ
	var box=new createjs.Container();
	//Base
	var s=new createjs.Shape();
	s.graphics.s().beginFill(b_c).drawRect(x,y,w+margin*2,h);
	//Base-shadow
	s.shadow=shadow2;
	//line
	var line=new createjs.Shape();
	line.name="slideline";//名前重要
	line.graphics.s().beginFill(line_c).drawRect(x+margin,y,w*start_v,h);

	//addChild
	box.addChild(s,line);
	box.width=w;//重要
	box.height=h;
	box.color=line_c;
	box.margin=margin;

	//ドラッグアクション設定
	box.addEventListener("mousedown",function(event){

		var instance=event.currentTarget;
		var w=instance.width;//重要
		var h=instance.height;
		var c=instance.color;
		var m=instance.margin;

		//line
		var graphicsInstance=event.target.parent.getChildByName("slideline");
		mousePoint=instance.globalToLocal(event.stageX-margin,event.stageY);
		//ライン再描画
		drawline(instance,w,h,c,m);

	});

	//初期化関数
	box.reset=function(s_v) {
		line.graphics.clear();
		line.graphics.s().beginFill(line_c).drawRect(x+margin,y,w*s_v,h);
	}

	return box;

}

//ライン再描画
function drawline(instance,w,h,c,m) {

	//ポインタ位置
	var line_w=mousePoint.x;
	//食み出し修正
	if (mousePoint.x < 0) {line_w=0;}
	if (mousePoint.x > w) {line_w=w;}

	//Lineグラフィック修正
	instance.reset(line_w/w);

	//画像移動
	imageMoveUp(line_w/w);

	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;
}

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

//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);
}


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

init();


CSS

createJS061.css、createJS061b.css、共通、CSS名は任意に変更可


/*日本語 createJS061.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;
}

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


簡単な説明


[説明図]

 

簡単な、Sliderパーツを作ってみましたが結構色々と悩みます。何とか出来たと言う感じで、無印悪品だ!


1. 簡単な作りで、処理も簡単にしています。(面倒な作りにしたくない!)
2. 目的に応じて書き換えなど行なわなければ成りませんので、出来の良いものでは無い。
3. RESETも簡単なものです(処理が大変)。ラベルは別途に付け加えたものです。
4. 多目的用に作るには結構面倒と思われます。(これ以上は止めときます)
5. HTMLと、jQueryで作った方が簡単かも知れませんが、一応CreateJSで作らねば様にならない!
6. 良いアイデアなどあったら知りたいです。
7. 一応 easeljs-0.7.1でも可動します。


簡易3種

簡易3種を作ってみました。通常の「ドラッグボタン形式」が極一般的であろうかと思う。デザインの形式で処理など面倒になる場合もあろうかとも思いますが、....


1. ドラッグボタン形式: 一般的な形です。(デザインは多様に変更可能)
2. ダイアル形式: ドラッグ位置の角度を求めて全体を回転している。小さいと使い難い。(初期ドラッグボタン位置は上方12時方向に固定になります)
特に角度 0 に戻すのに苦労するので、中央「クリック」で 0 になるようにした。
3. 簡易クリック形式: 簡単だが、両端のクリックが難しい。(対策として、両端に余白を付けました)


RESETボタンを付けないもの (createJS061.js)

リスナーが沢山あるので、処理判別などの変数の渡し、構成などにアイデアがいるから面倒です。RESETボタンをつければモット面倒である。


処理の流れは ほぼ同じ で有り、「ドラッグ完了」部分のみが違うので、判別出来れば共通にも作れる。
リスナー内からでも各要素を判別出来るように、名前などを事前に書き込み利用しているだけです。
ここでは、Lineグラフィック修正を「ドラッグ完了」の中で行なっているが、別の方法でも出来る。



//ドラッグスライダーBox
//X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、初期値 0-1
function createDragBtnBox (x,y,w,h,r,b_c,btn_c,line_c,start_v) {

	略す

	//ドラッグアクション設定
	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);
	});

	return box;

}

//
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");
	//親Boxの大きさ
	var box=event.target.parent;
	var w=box.width;
	var h=box.height;
	var c=box.color;
	//移動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(c).moveTo(0,h/2).lineTo(moveX_v,h/2);

	//画像拡大
	imageScaleUp(moveX_v*2/w);

	stage.update();

}

大きさなどの変更

 

大きさなどを変更できるようにはしていますが、完全に出来上がった状態では有りませんので、レイアウトなど合わない箇所もでますので、修正の必要があります。あくまでテストです。


初期値 start_v

初期値、start_v は最初に目盛りであるラインを何処まで描画するかの値で、0-1の範囲になります。
但し、変更した場合には、画像の位置などの計算も訂正しなければなりませんので注意下さい。


//X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、初期値 0-1
function createDragBtnBox (x,y,..............,start_v) {
	//
}

変数などの受け渡し

ドラッグ処理の場合は、2つのリスナー経由で処理をしていますので、変数の受け渡しが大変に成ります。
インスタンスなどには、id name その他、を書き込み出来ますからそれらを利用しています。


インスタンスなどに必要なものをデータ登録する

function createDragBtnBox (x,y,w,h,r,b_c,btn_c,line_c,start_v) {

	略す

	//addChild
	box.addChild(mask,s,line,drag_btn);
	box.width=w;//重要
	box.height=h;
	box.color=line_c;

	略す

}

名前などで判別して登録のデータを取り出し使用する

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

	略す


	//Box
	var graphicsInstance=event.target.parent.getChildByName("dragline");
	//親Boxの大きさ
	var box=event.target.parent;
	var w=box.width;
	var h=box.height;
	var c=box.color;

	略す

}

非効率的ですが、この辺の処理がキーポイントですか....


簡易クリック形式の両端に余白をつけた場合

この方が両端の反応が良いし、範囲外は無効で処理している。余白分横幅が広がるが設置の幅(w)は同じです。



//簡易スライダーBox
//X、Y、幅、高さ、ベース色、ライン色、TEXT色、初期値 0-1
function createSliderBox (x,y,w,h,b_c,line_c,start_v) {

	//両端の空白追加
	var margin=2;

	//BTNコンテナ
	var box=new createjs.Container();
	//Base
	var s=new createjs.Shape();
	s.graphics.s().beginFill(b_c).drawRect(x,y,w+margin*2,h);
	//Base-shadow
	s.shadow=shadow2;
	//line
	var line=new createjs.Shape();
	line.name="slideline";//名前重要
	line.graphics.s().beginFill(line_c).drawRect(x+margin,y,w*start_v,h);

	//addChild
	box.addChild(s,line);
	box.width=w;//重要
	box.height=h;
	box.color=line_c;
	box.margin=margin;

	//ドラッグアクション設定
	box.addEventListener("mousedown",function(event){

		var instance=event.currentTarget;
		var w=instance.width;//重要
		var h=instance.height;
		var c=instance.color;
		var m=instance.margin;
		//line
		var graphicsInstance=event.target.parent.getChildByName("slideline");
		mousePoint=instance.globalToLocal(event.stageX-margin,event.stageY);
		drawline(graphicsInstance,w,h,c,m);

	});

	return box;

}
//ライン再描画
function drawline(line_instance,w,h,c,margin) {

	//ポインタ位置
	var line_w=mousePoint.x;
	//食み出し修正
	if (mousePoint.x < 0) {line_w=0;}
	if (mousePoint.x > w) {line_w=w;}
	//if (mousePoint.x >= w*.99) {line_w=w;}//余白無しの場合
	//ライン再描画
	line_instance.graphics.clear();
	line_instance.graphics.s().beginFill(c).drawRect(0+margin,0,line_w,h);
	//
	set_text("LINE: "+line_w);

	//画像移動
	imageMoveUp(line_w/w);

	stage.update();
}

----------------------------------------------------------------------

余白無しの場合、端のクリックが旨く反応しなくなりますので、下記を有効にする

var margin=0;

if (mousePoint.x >= w*.99) {line_w=w;}

RESETボタンを付けたもの (createJS061b.js)

RESETボタンをつけた場合は、効率よく処理できるスクリプトの構成が必要みたいです。
RESETボタンは簡単につけれるが、「画像の修正」と「Sliderの修正」を行なわねばならないので面倒になる。


createDragBtnBox() {...} 等の中に、別途 メソッド を作り、そこにアクセスして処理するようにしてみた。


「初期化関数」はグラフイックの書き換えを行なうので「更新」「RESET」とで共通で使える。もう少し工夫すればモット単純化出来るかも知れない。



//ドラッグスライダーBox
//X、Y、幅、高さ、ボタン半径、ベース色、ボタン色、ライン色、初期値 0-1
function createDragBtnBox (x,y,w,h,r,b_c,btn_c,line_c,start_v) {

	略す

	//ドラッグアクション設定
	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);
	});

	//初期化関数
	box.reset=function(s_v) {
		line.graphics.clear();
		line.graphics.ss(5).s(line_c).moveTo(0,h/2).lineTo(s_v*w,h/2);
		drag_btn.x=s_v*w;
	}

	return box;

}

//
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");
	//親Boxの大きさ
	var box=event.target.parent;
	var w=box.width;
	var h=box.height;
	var c=box.color;
	//移動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グラフィック修正
	box.reset(moveX_v/w);

	//画像拡大
	imageScaleUp(moveX_v*2/w);

	stage.update();

}

RESET処理

「画像初期化」「パーツ初期化」の2つの処理を行う。画像は簡単であるが、「パーツ初期化」は面倒である。
create..() {...} の中の、「内部関数」にアクセスする事により多少効率的に書き換えが可能のようだ。


//reset
function reset_parts() {

	//画像初期化
	imageScaleUp(1);
	imageRotateUp(0);
	imageMoveUp(0.5);

	//パーツ初期化
	dragBtnBox.reset(0.5);
	dragBtnRing.reset();
	sliderBox.reset(0.5);

	//TEXT
	set_text("RESET");
}

親であるインスタンスさえ判定出来れば、パーツ初期化、更新、も出来るので、「内部関数」にアクセスするこの処理方法の方が効率的なようです。



 

MARGIN無し

当初、MARGIN無しで作った時のものです。結局は上記の様に、「MARGIN付き」のもになっています。
上記、createJS061.js 参照


//簡易スライダーBox
//X、Y、幅、高さ、ベース色、ライン色、TEXT色、初期値 0-1
function createSliderBox (x,y,w,h,b_c,line_c,start_v) {

	//BTNコンテナ
	var box=new createjs.Container();
	//Base
	var s=new createjs.Shape();
	s.graphics.s().beginFill(b_c).drawRect(x,y,w,h);
	//Base-shadow
	s.shadow=shadow2;
	//line
	var line=new createjs.Shape();
	line.name="slideline";//名前重要
	line.graphics.s().beginFill(line_c).drawRect(x,y,w*start_v,h);

	//addChild
	box.addChild(s,line);
	box.width=w;//重要
	box.height=h;
	box.color=line_c;

	//ドラッグアクション設定
	box.addEventListener("mousedown",function(event){

		var instance=event.currentTarget;
		var w=instance.width;//重要
		var h=instance.height;
		var c=instance.color;
		//line
		var graphicsInstance=event.target.parent.getChildByName("slideline");
		mousePoint=instance.globalToLocal(event.stageX,event.stageY);
		drawline(graphicsInstance,w,h,c);

	});

	return box;

}
//ライン再描画
function drawline(line_instance,w,h,c) {

	//ポインタ位置
	var line_w=mousePoint.x;
	//食み出し修正
	if (mousePoint.x < 0) {line_w=0;}
	if (mousePoint.x > w) {line_w=w;}
	if (mousePoint.x >= w*.99) {line_w=w;}
	//ライン再描画
	line_instance.graphics.clear();
	line_instance.graphics.s().beginFill(c).drawRect(0,0,line_w,h);
	//
	set_text("LINE: "+line_w);

	//画像移動
	imageMoveUp(line_w/w);

	stage.update();
}


ラベルを付けたりの発展形式にする

使用仕易いようにラベルを付けたり、状況をテキスト表示させたりと発展させることは可能ですが、リセットなどを考えると付随処理が多く汎用性に富むものを作ることは大変です。(コンテナ継承クラスで作るのは比較的簡単のようだ)
将来、何らかの形で供給されるかも知れませんので、待ったほうが利口かも知れません。......??


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


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



 

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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]