LINK-GOTO-BACK(元のページに戻る)


SVG.js 画像Carousel表示デモ。DEMO-041b


解説の記事ページで収容出来ないデモなどを表示しています。解説などは少なめですので、コードをみて直感的に理解ください。このページではjquery-1.9.1を使用しています。
2016/07/06 新規


DEMO SVG.js 画像Carousel表示

 

ご注意、Chrome.Firefox.IE11等、モダンブラウザでご覧ください(Chrome推奨)。
但し、Mac、Android系の動作は不明です。


Chrome.Firefox.IE11にて確認済み。ブラウザにより多少描画差が有る場合もあります。問題のある場合は自己解決ください。
現時点で、SVG.jsに関する資料サンプルなどは配布元の資料を除き、NET上では「ほぼ皆無」です。
SVG.jsのdropshadowは、エラーで使用出来ないので、当方自作の dropshadow-custom.js (カスタムdropshadow)を使用します。

 

画像の3D風Carousel


画像無しのレクト形式の3D風Carouselに成ります。処理方法が複雑で調整に手間取りました。IMAGEでも同じ形式で処理可能です。(但し画像塗りでない場合)

下記ステージでマウスを左右に動かすと、回転速度、回転方向が変わります。薄いダミー図形は100x100の大きさで中央に表示。



 

サンプルJS


//svg-carousel2.js
//svg.js用画像

(function($){

  $(function(){

    var imgUrls=['testImage101.jpg','testImage102.jpg','testImage103.jpg','testImage104.jpg','testImage105.jpg','testImage106.jpg','testImage107.jpg','testImage108.jpg']

    function init2(){

	//画像carousel
	//-----------------------------------

	//対象エレメントID
	var draw=SVG('svg-carousel').size(640,300)

	//TEXT
	var carouseltext=draw.text('svg-carousel').font({leading:0.8})

	//案内用
	//var rect=draw.rect(100,100).attr({'fill':'none','stroke':'#CCC','stroke-width':1}).center(320,150)

	//マウスのmoveリスナー設置
	var sum_canvas=document.getElementById("svg-carousel")
	sum_canvas.onmousemove=sum_mouseMoveHandler
	var timeerId=null
	var set_angle=0
	var speed_v=0//初期速度係数0-1

	//マウスHandler未完成
	function sum_mouseMoveHandler(e) {

		//中のインスタンスに反応するので未完成
  		var rect=e.target.getBoundingClientRect()
  		//マウス座標の更新
		sum_mouseX=e.clientX-rect.left
		sum_mouseY=e.clientY-rect.top
		//carouseltext.text(' X ' + sum_mouseX + ' Y ' + sum_mouseY)
		//速度係数 0から+-2
		speed_v=(sum_mouseX-320)/160
		carouseltext.text(' V ' + speed_v)

	}

	//条件
	var spikes,a,center_x,center_y,radius_x,radius_y,angle_v
	spikes=8,a=360/spikes,center_x=320,center_y=150,radius_x=200,radius_y=50,angle_v=0 //12時方向
	var posArr=[]//オブジェクト保存容器
	var elmArr=[]

	//GROUP
	var group=draw.group()

	for (i=0; i < spikes; i++){

		//画像生成
		var image=group.image('/main/images/'+imgUrls[i]).size(100,100)
		image.attr({'filter':'url(#dropShadow2)'})//陰影
		//画像インスタンス保存
		elmArr[i]=image

	}

	//回転処理速度
	setInterval(setpostion,20)//10-20

	function setpostion(){

		//回転を変化
		angle_v +=speed_v
		posArr=[]

		for (i=0; i < spikes; i++){

			//3D風配置/matrix位置補正
			var x=(center_x+radius_x*Math.cos(((i*a+angle_v)-90)*Math.PI/180))
			var y=(center_y+radius_y*Math.sin(((i*a+angle_v)-90)*Math.PI/180))

			//スケール補正とpostion係数保存
			//*0.75すれば最大100%
			var scale_v=y/center_y*0.75

			//matrix位置決め
			var matrix=new SVG.Matrix()
			.scale(scale_v,scale_v,x,y)//.rotate(0,x,y)
			var matrix_v=matrix.toString()
			//centerと伸縮
			elmArr[i].center(x,y).attr('transform',matrix_v)

			//id.postion保存
			posArr.push({'id':i, 'postion':scale_v});

		}

		//postion配列をソート/postion昇順にsort
		posArr.sort(function(a,b) {
			var x=a.postion;
			var y=b.postion;
			return x > y ? 1 : -1}
		)
		//重ね変更
		for (var i=0; i < posArr.length; i++){
			//エレメントを取り出す
			var image=elmArr[posArr[i].id]
			//エレメントの重ね順補正
			image.front()
		}

	}


    }

	//画像キャッシュ
	var c_images=[]
	for (var i=0; i < imgUrls.length; i++){
		c_images[i]=new Image()
		c_images[i].src='/main/images/' + imgUrls[i]
	}

	setTimeout(function() {
		//start
		init2()
	},1000);

  });

})(jQuery);


サンプルJSの簡単な説明

3D風Carouselにするため、角度を変更して外周配置位置を変更しています。レクトなどの書き換えは行っていません。その都度重なり順を変更して、3D風に見せかけています。

SVGでこのような処理をすることは余り無いと思います。(無意味に勢いで作っているだけです)


1. 角度変更はタイマーで10ミリ秒に1回処理。(10-50ミリ秒位が適正のようだ)
2. ステージにマウスが入ると、回転速度方向が変わるようにしていますが、処理は削除できる。
(中の図形にも反応するので、本来は別形式でつくるのが良いと思います。簡単なのでとりあえず。)
3. 画像表示も出来るが、塗りの場合は別処理になる。(別途サンプル参照)
4. CSS Matrix処理と似通っているが、SVGはクセがあり少し面倒である。
5. 処理が悪いと、陰影が途中で切れます。回転軸を図形の中心にする事が重要です。
(注意、このページは、jQuery1.9のため、dropshadow-custom.jsで陰影処理)

 

図形中心位置の移動

角度を加える都度に外周位置を計算してそこに図形を移動させます。


//matrix位置決め
var matrix=new SVG.Matrix()
.scale(scale_v,scale_v,x,y)//.rotate(0,x,y)
var matrix_v=matrix.toString()
//centerと伸縮
elmArr[i].center(x,y).attr('transform',matrix_v)

重なり順の修正

3D風Carouselにするため、重なり順の修正を行っています、Y位置の順序またはスケールの順序を並び替えして、下記の様に処理しています。


//postion配列をソート/postion昇順にsort
posArr.sort(function(a,b) {
	var x=a.postion;
	var y=b.postion;
	return x > y ? 1 : -1}
	)
//重ね変更
for (var i=0; i < posArr.length; i++){
	//エレメントを取り出す
	var image=elmArr[posArr[i].id]
	//エレメントの重ね順補正
	image.front()
}

画像塗りの場合のサンプル

画像塗りの場合は下記ページにサンプルが有ります。処理はほとんど似通っています。

【参照】当方の記事: 角丸レクトの画像塗り3D風Carousel

 

 

 

サンプルJSの全表示

Chromeは文字化けしますのでエンコード(UTF-8)してご覧ください。

● サンプルJSの全表示 svg-carousel2.js

 

JSの構造

下記の様に、サンプルではjQueryの構造の中にありますが、どのような形でもページのHTMLが構築されてからJSを実行出来るなら結構と思います。
原則、画像表示は読み込み次第に表示しますが、加工処理次第ではFirefoxでエラーになる場合があります。事前に「画像キャッシュ」すれば防げます。
(画像は「完全読み込み完了」でなければ処理されない場合が多い)


(function($){

  $(function(){

    function init(){

	//

    }

    //画像キャッシュ
    var image1=new Image()
    image1.src="/main/images/testImage108.jpg"
    var image2=new Image()
    image2.src="/main/images/slice_img06b.jpg"

    setTimeout(function() {
      //start
      init()
    },1000);

  });

})(jQuery);

CSS


.carousel-elm {
width:640px;
height:300px;
border:1px #000000 solid;
overflow:hidden;
}

使用画像

画像は原則使用者が用意ください。デモなどで使用した画像は下記に有ります。

使用画像サンプル

 

 

詳細説明などは、記事ページなどを参照ください。

 

以上。

 

LINK-GOTO-BACK(元のページに戻る)