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


SVG.js 画像塗りCarousel表示デモ。DEMO-041c


解説の記事ページで収容出来ないデモなどを表示しています。解説などは少なめですので、コードをみて直感的に理解ください。このページでは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に成ります。処理方法が複雑で調整に手間取りました。ここでは画像塗りのテストが主です。

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



 

サンプルJS


//svg-carousel3.js
//svg.js用画像塗り

(function($){

  $(function(){

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

    function init3(){

	//画像塗り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=[]
	var imgArr=[]//塗り画像用

	//GROUP
	var group=draw.group()

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

		//塗り画像生成
		var back_image=group.image('/main/images/'+imgUrls[i]).size(640,300).center(320,150)
		//RECT/stroke一定
		var rect=group.rect(100,100).radius(10).attr({'fill':back_image,'stroke':'#FFF','stroke-width':2,'vector-effect':'non-scaling-stroke'}).size(100,100).center(320,150)
		.attr({'filter':'url(#dropShadow2)'})//陰影
		//レクトインスタンス保存
		elmArr[i]=rect
		//塗り画像インスタンス保存
		imgArr[i]=back_image

	}

	//回転処理速度
	setInterval(setpostion,10)//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//*0.5-0.75

			//matrix位置決め/rotateはここだけで良い
			var matrix=new SVG.Matrix()
			.scale(scale_v,scale_v,x,y)//.rotate(30,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});

			//塗り画像を修正する
			var scale_v=100/300
			var matrix=new SVG.Matrix()
			.scale(scale_v,scale_v,x,y)
			var matrix_v=matrix.toString()
			imgArr[i].center(x,y).attr('transform',matrix_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
		init3()
	},1000);

  });

})(jQuery);


サンプルJSの簡単な説明

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

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


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

 

図形中心位置の移動

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

ここでのスケールは、Y位置の比率に合わせました。(算出方法は自由です)posArrにY位置等を保存して、あとで重なり順を変更しています。


ループ処理

	//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//*0.5-0.75

	//matrix位置決め/rotateはここだけで良い
	var matrix=new SVG.Matrix()
	.scale(scale_v,scale_v,x,y)//.rotate(30,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});


画像塗り画像中心位置の移動

画像塗りは通常ステージ右上を原点にリピートされる様に塗られますので、このCarouselではレクトに合わせる様に修正の必要があります。


1. 画像塗りの画像がステージのどこでも欠損することなく塗られるように、画像読み込み時にステージ一杯に展開させて、centerを中心にセットします。

2. 画像塗りは塗り対象の図形の中心位置に画像を合わせなければなりません。大きさは伸縮前のレクトの大きさに合わせます。
その後は図形の移動と共に画像「伸縮」をあわせます。「回転」はレクトに自動的に追随します。

他によい方法があれば構いませんが....


ステージの大きさは640x300
画像は最初、ステージ一杯に展開、仮にcenterを決める

//塗り画像生成
var back_image=group.image('/main/images/'+imgUrls[i]).size(640,300).center(320,150)


レクトは100px、大きさは伸縮前のレクトの大きさに合わせます
中心は、.center(x,y)であわせたほうが楽です
その他はmatrixで修正します、.scale(scale_v,scale_v,x,y)がミソ

//塗り画像を修正する、100x100画像
var scale_v=100/300
var matrix=new SVG.Matrix()
.scale(scale_v,scale_v,x,y)
var matrix_v=matrix.toString()
imgArr[i].center(x,y).attr('transform',matrix_v)

zu

スケールの調整

キャンバス中央より、縦方向の半径の設定値によっても違いがでますが、3時9時方向がスケール1に成ります。
デモでは修正していますので6時方向がスケール1で表示(100x100)されます。

調整可能です。現在は、*0.75にしている。使用者が新たな規則で計算することも可能ですが、画像塗りが合うように注意ください。


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

画像塗りの注意点

画像塗りの場合、画像を「完全読み込み済み」で加工処理を行います。また画像の大きさを設定しない場合、正常に処理されないことがあります。特にFirefoxでは厳密ですから注意が必要。
ここでは、簡単にキャッシュしているだけで、キャッシュ画像のオブジェクトを利用するのではなく、URLで処理しています。


重なり順の修正

3D処理では無く、実態は2Dなので重なり順を修正して3D風に見せかけています。

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

 

シンボル構成の3D風Carousel

多くの要素を重ねる場合は、シンボル構成にした方が簡単なようです。下記参照ください。

【参照】当方の記事: シンボル構成の3D風Carousel

 

 

 

サンプルJSの全表示

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

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

 

JSの構造

下記の様に、サンプルではjQueryの構造の中にありますが、どのような形でもページのHTMLが構築されてからJSを実行出来るなら結構と思います。
最後の「画像キャッシュ」はrect要素に画像の塗り込みをしていますので、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(元のページに戻る)