POPSブログ

SVG.js filter.image()、image.filtererについて

394

  Category:  javascript2016/10/12 pops 

SVG.js プラグインsvg.filter.js(v2.0.2)にバージョンアップに伴い各種Filter処理がやり易くなりました。マニュアルも充実されています。filter.image()、image.filtererについて詳しくテストします。

 

SVG.js filter.image()、image.filtererについてテスト

各種Filter処理は「SVG.js プラグインsvg.filter.jsのFilter処理」で説明しましたが、filter.image()、image.filter、colorMatrixのアニメーションについて少し詳しく調べてみます。


ご注意、Chrome.Firefox.IE11(一部機能しません)などSVGに対応したブラウザでご覧ください。Chromeを推奨します。

 

filter.image()

filter処理関数 .filter(function(add){}) の中で画像を取り込みます。
ドラッグ設定はfilter処理前に設定しますが、画像filterでは上手くドラッグできません(1番参照)。
この様な場合はグループ化すれば防げます(2番参照)。
状況によっては、「画像塗り」の方が便利な場合があります(3番参照)。


画像の大きさは、size()で設定します。位置あわせは.x().y()またはmove()で可能です。center()は機能しません。


.filter(function(add){
	//image
	add.image('/main/images/testImage101.jpg').size(100,100).x(30).y(30)
})

対象が「四角形」以外の場合は、composite()マスクすれば内部に取り込まれます。


.filter(function(add){
	//image
	var f_img=add.image('/main/images/testImage101.jpg').size(100,100).x(30).y(30)
	//mask
	var mask=add.composite(f_img,add.sourceAlpha,'in')
})

1番 画像filter / 2番 画像filterグループ化 / 3番 画像塗り (画像filterでは有りません)


サンプルJS


	//対象エレメントID
	var draw=SVG('svg-filter-image01').size(160,160)

	//TEXT
	var text=draw.text('画像filter drag').font({leading:0.8})

	var rect_back=draw.rect(100,100).radius(10).attr({'fill':'#000','stroke':'#FFF','stroke-width':2}).center(80,80)//rect
	.attr({'filter':'url(#dropShadow2)'})//陰影
	var rect_image=draw.rect(100,100).radius(10).attr({'fill':'#000'}).center(80,80)//rect
	.draggable()//ドラッグ
	.filter(function(add){
		//image
		var f_img=add.image('/main/images/testImage101.jpg').size(100,100).x(30).y(30)
		//mask
		var mask=add.composite(f_img,add.sourceAlpha,'in')

	})

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

	//対象エレメントID
	var draw=SVG('svg-filter-image02').size(160,160)

	//TEXT
	var text=draw.text('画像filterグループ化 drag').font({leading:0.8})

	var group=draw.group()
	var rect_back2=draw.rect(100,100).radius(10).attr({'fill':'#000','stroke':'#FFF','stroke-width':2}).center(80,80)//rect
	group.add(rect_back2)
	var rect_image2=draw.rect(100,100).radius(10).attr({'fill':'#000'}).center(80,80)//rect
	group.add(rect_image2)
	rect_image2.filter(function(add){
		//image
		var f_img=add.image('/main/images/testImage101.jpg').size(100,100).x(30).y(30)
		//mask
		var mask=add.composite(f_img,add.sourceAlpha,'in')

	})

	group.draggable()//ドラッグ
	.attr({'filter':'url(#dropShadow2)'})//陰影

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

	//対象エレメントID
	var draw=SVG('svg-filter-image03').size(160,160)

	//TEXT
	var text=draw.text('画像塗り drag').font({leading:0.8})

	var group2=draw.group()
	var back_image=draw.image('/main/images/testImage101.jpg').size(160,160).scale(100/160).center(80,80)
	//filter加工はアニメしない
	var image_rect=draw.rect(100,100).radius(10).attr({'fill':back_image,'stroke':'#FFF','stroke-width':2}).center(80,80)//rect
	group2.add(image_rect)
	.draggable()//ドラッグ
	.attr({'filter':'url(#dropShadow2)'})//陰影

	//ボタン
	var click_btn1=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn1.click(fade_image)

	function fade_image(){
		//塗り
		image_rect.attr({'fill-opacity':0})
		back_image.load('/main/images/testImage102.jpg')
		image_rect.animate(1000).attr({'fill-opacity':1})
	}


filter.image()の画像を取り替える

● 画像filter.処理の画像を取り替えるに load() は機能しません。
次の様に、画像エフェクト(インスタンス)に対しimage()で画像を取り替えることが可能のようですが、画像処理しますと、マスクcomposite()は壊れますので複雑な処理には似合いません(4番参照)。
但し再度マスクcomposite()を行えば正常に成ります(5番参照)。

但し、この手法はマニュアルに記載されてはいません。独自のテストによるものです。


filter_fade.image('/main/images/testImage102.jpg').size(100,100).move(30,30)

click、1回のみ

4番 画像filter NG / 5番 画像filter OK / 6番 画像に画像filter


サンプルJS


	//対象エレメントID
	var draw=SVG('svg-filter-image04').size(160,160)

	//TEXT
	var text=draw.text('画像filter-chenge ダメ').font({leading:0.8})

	var imagefilter_elm
	var rect_back=draw.rect(100,100).radius(10).attr({'fill':'#000','stroke':'#FFF','stroke-width':2}).center(80,80)//rect
	.attr({'filter':'url(#dropShadow2)'})//陰影
	var rect_image2=draw.rect(100,100).radius(10).attr({'fill':'#000'}).center(80,80)//rect
	rect_image2.filter(function(add){
		//image2
		imagefilter_elm=add.image('/main/images/testImage101.jpg').size(100,100).move(30,30)
		add.composite(imagefilter_elm,add.sourceAlpha,'in')
	})

	//ボタン
	var click_btn2=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn2.click(chg_image)

	function chg_image(){
		//compositeマスクは外れるダメ/塗りならばOK
		imagefilter_elm.image('/main/images/testImage102.jpg').size(100,100).move(30,30)

	}

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

	//対象エレメントID
	var draw=SVG('svg-filter-image05').size(160,160)

	//TEXT
	var text=draw.text('画像filter-chenge OK').font({leading:0.8})

	var imagefilter_elm2
	var rect_back=draw.rect(100,100).radius(10).attr({'fill':'#000','stroke':'#FFF','stroke-width':2}).center(80,80)//rect
	.attr({'filter':'url(#dropShadow2)'})//陰影
	var rect_image3=draw.rect(100,100).radius(10).attr({'fill':'#000'}).center(80,80)//rect
	set_chg_image(rect_image3,'/main/images/testImage101.jpg')

	//ボタン
	var click_btn3=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn3.click(function(){
		set_chg_image(rect_image3,'/main/images/testImage102.jpg')
	})

	//その都度compositeマスクをする
	function set_chg_image(instanse,image_url){
		//unfilter
		instanse.unfilter()
		//filter
		instanse.filter(function(add){
			//image-mask
			var image=add.image(image_url).size(100,100).move(30,30)
			add.composite(image,add.sourceAlpha,'in')

		})
	}

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

	//対象エレメントID
	var draw=SVG('svg-filter-image06').size(160,160)

	//TEXT
	var text=draw.text('画像に画像filter').font({leading:0.8})

	var rect_back=draw.rect(100,100).attr({'fill':'#000','stroke':'#FFF','stroke-width':2}).center(80,80)//rect
	.filter(function(add){
		var shadow=add.offset(0,0).in(add.sourceAlpha).gaussianBlur(3)
		add.merge(shadow,add.source)
	})

	var rect_image5=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)
	rect_image5.filter(function(add){
		//image
		add.image('/main/images/testImage102.jpg').size(100,100).move(30,30)

	})
	var group3=draw.group()
	var rect_image6=draw.image('/main/images/testImage104.jpg').size(100,100).center(80,80)//動かせない
	group3.add(rect_image6)
	.draggable()//ドラッグ
	rect_image6.filter(rect_image5.filterer)


image.filterer

filterを使い回しする仕組みですが、unfilter()と同様に設定の仕方に問題があるので注意が必要です。
.filtererは、url(#対象ID名)と同等に成ります。


● filtererを取得できない。困りますネ。

チェーンメソッドで繋ぐとunfilterも出来ない。filter自体の処理には何ら問題は無い。将来修正なるかは不明。

まだこの事が判らなかったので、前々ページでは説明していなかった。
SVG.jsではチェーンメソッドを推奨している面が多いので、下記の様な書き方が多いのも事実です。


var image=draw.image()...
.filter(function(add){
	var shadow=add.offset(0,0).in(add.sourceAlpha).gaussianBlur(3)
	add.merge(shadow,add.source)
})
//NG
var image2=draw.image()...
image2.filter(image.filterer)//undefined

● filtererを取得出来る。全くモウ。

filtererを取得したい場合は、チェーンメソッドで繋がないで処理ください。


var image=draw.image()...
image.filter(function(add){
	var shadow=add.offset(0,0).in(add.sourceAlpha).gaussianBlur(3)
	add.merge(shadow,add.source)
})
//OK
var image2=draw.image()...
image2.filter(image.filterer)

● filtererをattr()で取得出来ます。取得値は同じ、url(#対象ID名)です。
チェーンメソッドは関係有りません。グローバル変数に保持しておけば何時でも利用できます。


var filterUrl//保存用
var image=draw.image()...
.filter(function(add){
	var shadow=add.offset(0,0).in(add.sourceAlpha).gaussianBlur(3)
	add.merge(shadow,add.source)
})
//取得保存
filterUrl=image.attr('filter')
//OK
var image2=draw.image()...
image2.filter(filterUrl)

7番 filterer取得OK / 8番 filterer取得NG / 9番 離れていてもOK


サンプルJS


	//対象エレメントID
	var draw=SVG('svg-filter-image07').size(160,160)

	//TEXT
	var text=draw.text('filter').font({leading:0.8})

	var rect_image7=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)
	.draggable()//ドラッグ
	rect_image7.filter(function(add){
		var shadow=add.offset(0,0).in(add.sourceAlpha).gaussianBlur(3)
		add.merge(shadow,add.source)
	})

	text.text(''+rect_image7.filterer)

	var rect_image8=draw.image('/main/images/testImage104.jpg').size(80,80).center(100,100)
	.draggable()//ドラッグ
	.filter(rect_image7.filterer)//OK

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

	//対象エレメントID
	var draw=SVG('svg-filter-image08').size(160,160)

	//TEXT
	var text=draw.text('filter').font({leading:0.8})

	var rect_image9=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)
	.filter(function(add){
		var shadow=add.offset(0,0).in(add.sourceAlpha).gaussianBlur(3)
		add.merge(shadow,add.source)
	})

	text.text(''+rect_image9.filterer)

	var rect_image10=draw.image('/main/images/testImage104.jpg').size(80,80).center(100,100)
	.filter(rect_image9.filterer)//NG

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

	//対象エレメントID
	var draw=SVG('svg-filter-image09').size(160,160)

	//TEXT
	var text=draw.text('filter').font({leading:0.8})
	text.text(''+rect_image7.filterer)

	var rect_image11=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)
	.draggable()//ドラッグ
	.filter(rect_image7.filterer)//NG

	var rect_image12=draw.image('/main/images/testImage104.jpg').size(80,80).center(100,100)
	.draggable()//ドラッグ
	.filter(rect_image7.filterer)//NG


colorMatrixのアニメーション

W3C規格によれば、colorMatrixのアニメーションが可能と記載されていますが、desaturate hueRotateタイプ、はアニメ可能ですが(13.14番参照)、
matrixタイプはアニメーションにはなりません(10番参照)。時間がくれば切り替わりはしますが...

W3C規格にまだブラウザが未対応なのか、将来対応するのか、この辺は不明です。(将来は対応すると思ってはいますが....)

アニメーションには成らなくとも、何れもattr()での変更は可能です。


取り合えず、matrixタイプをFadeしてみますが、グループ化しないと処理出来ないためメンドウです。


//アニメーションにはなりません
matrix_elm.animate(2000).attr({'values':'0.3 0.4 0.2 0 0, 0.15 0.25 0.1 0 0, 0.05 0.2 0.1 0 0, 0 0 0 1 0'})

fadeも直接出来ませんのでグループ化して「g」をfadeさせる構造に作り変えて処理します。
12番の様に面取りの場合はマスクで処理しますが、概ね大変メンドウになります。

anime/colorMatrix()タイプmatrixは難しい、click、1回のみ

10番 anime NG / 11番 fade / 12番 fade


サンプルJS


	//対象エレメントID
	var draw=SVG('svg-filter-image10').size(160,160)

	//TEXT
	var text12=draw.text('matrix NG').font({leading:0.8})

	var matrix_elm
	var rect_image12=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)
	rect_image12.filter(function(add){
		matrix_elm=add.colorMatrix('matrix','1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0')
	})

	//変化するがanimeには成らない
	//matrix_elm.animate(2000,'-',2000).attr({'values':'0.3 0.4 0.2 0 0, 0.15 0.25 0.1 0 0, 0.05 0.2 0.1 0 0, 0 0 0 1 0'})

	//ボタン
	var click_btn12=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn12.click(matrix_anime12)

	//変化するがanimeには成らない
	function matrix_anime12(){
		text12.text('anime NG 変化のみ')
		matrix_elm.animate(2000).attr({'values':'0.3 0.4 0.2 0 0, 0.15 0.25 0.1 0 0, 0.05 0.2 0.1 0 0, 0 0 0 1 0'})
	}

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

	//対象エレメントID
	var draw=SVG('svg-filter-image11').size(160,160)

	//TEXT
	var text13=draw.text('fade').font({leading:0.8})

	var matrix_elm2

	var rect_image13a=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)//下層
	//fadeのためgroup化
	var group13=draw.group()
	var rect_image13b=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)//上層
	group13.add(rect_image13b).attr('opacity',0)
	rect_image13b.filter(function(add){
		matrix_elm2=add.colorMatrix('matrix','0.91 0.25 0.25 0 0, 0.25 0.25 0.25 0 0, 0.25 0.25 0.51 0 0, 0 0 0 1 0')
	})

	//ボタン
	var click_btn13=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn13.click(matrix_anime13)

	function matrix_anime13(){
		text13.text('group-fade OK')
		//group/anime
		group13.animate(2000).attr('opacity',1)

	}

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

	//対象エレメントID
	var draw=SVG('svg-filter-image12').size(160,160)

	//TEXT
	var text14=draw.text('clipWith fade').font({leading:0.8})

	var matrix_elm3

	//陰影用
	var rect=draw.rect(100,100).radius(10).attr({'fill':'#000','stroke':'#FFF','stroke-width':2}).center(80,80)
	.filter(function(add){
		var shadow=add.offset(0,0).in(add.sourceAlpha).gaussianBlur(3)
		add.merge(shadow,add.source)
	})

	//マスクのためgroup化
	var maskgroup=draw.group()
	var rect_image14a=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)//下層
	rect_image14a.filter(function(add){
		matrix_elm3=add.colorMatrix('matrix','0.333 0.333 0.333 0 0, 0.333 0.333 0.333 0 0, 0.333 0.333 0.333 0 0, 0 0 0 1 0')
	})
	maskgroup.add(rect_image14a)
	//fadeのためgroup化
	var group14=maskgroup.group()
	var rect_image14b=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)//上層
	group14.add(rect_image14b).attr('opacity',0)
	rect_image14b.filter(function(add){
		matrix_elm3=add.colorMatrix('matrix','0.6 0 0.77 0 0, 0 0 0 0 0, 0 0 0.49 0 0, 0.2125 0.7154 0.0721 0 1')
	})
	//mask
	var mask_rect=draw.rect(100,100).radius(10).attr({'fill':'#000','stroke':'#FFF','stroke-width':1}).center(80,80)//rect
	maskgroup.clipWith(mask_rect)

	//ボタン
	var click_btn14=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn14.click(matrix_anime14)

	function matrix_anime14(){
		text14.text('group-fade OK')
		//group/anime
		group14.animate(2000).attr('opacity',1)

	}


desaturate hueRotate Blurは引数が1つのためアニメを簡単に出来ます。click、1回のみ

13番 desaturate / 14番 hueRotate / 15番 Blur


サンプルJS


	//対象エレメントID
	var draw=SVG('svg-filter-image13').size(160,160)

	//TEXT
	var text=draw.text('desaturate').font({leading:0.8})

	var matrix_elm15
	var image15=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)
	.filter(function(add){
		//desaturate
		matrix_elm15=add.colorMatrix('saturate',1)
	})

	//ボタン
	var click_btn15=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn15.click(matrix_anime15)

	function matrix_anime15(){
		matrix_elm15.animate(1000).attr({'values':0})

	}

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

	//対象エレメントID
	var draw=SVG('svg-filter-image14').size(160,160)

	//TEXT
	var text=draw.text('hueRotate').font({leading:0.8})

	var matrix_elm16
	var image16=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)
	.filter(function(add){
		//hueRotate
		matrix_elm16=add.colorMatrix('hueRotate',0)
	})

	//ボタン
	var click_btn16=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn16.click(matrix_anime16)

	function matrix_anime16(){
		matrix_elm16.animate(3600).attr({'values':360})

	}

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

	//対象エレメントID
	var draw=SVG('svg-filter-image15').size(160,160)

	//TEXT
	var text=draw.text('Blur').font({leading:0.8})

	var matrix_elm17
	var image17=draw.image('/main/images/testImage101.jpg').size(100,100).center(80,80)
	.filter(function(add){
		//blur
		matrix_elm17=add.gaussianBlur('0 0')
		this.attr({'x':'-100%','y':'-100%','width':'400%','height':'400%'})
	})

	//ボタン
	var click_btn17=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn17.click(matrix_anime17)

	function matrix_anime17(){
		matrix_elm17.animate(1000).attr({'stdDeviation':'10 0'})

	}


画像塗りの画像にmatrix処理した場合の画像交換
画像をmatrix処理すると.radius(10)が外れてはみ出しますので、.composite()マスクをした。陰影はレクト側に処理する。

画像を交換しても、matrix処理はのこる。strokeの幅が変わらない所は便利である。matrixの影響でアニメ Fadeはできない。

状況、目的にもよるが、この方が構造を簡略化できる。click、1回のみ

16番 matrix 画像変更 / 17番 hueRotate 画像変更 / 18番 fill-opatity は機能しない。


サンプルJS


	//対象エレメントID
	var draw=SVG('svg-filter-image16').size(160,160)

	//TEXT
	var text=draw.text('画像塗り matrix').font({leading:0.8})

	var image18=draw.image('/main/images/testImage101.jpg').size(160,160).scale(100/160).center(80,80)
	image18.filter(function(add){
		matrix_elm18=add.colorMatrix('matrix','0.91 0.25 0.25 0 0, 0.25 0.25 0.25 0 0, 0.25 0.25 0.51 0 0, 0 0 0 1 0')
		add.composite(matrix_elm18,add.sourceAlpha,'in')
	})

	var rect_box=draw.rect(100,100).radius(10).attr({'fill':image18,'stroke':'#FFF','stroke-width':2}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})//陰影

	//ボタン
	var click_btn18=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn18.click(matrix_anime18)

	function matrix_anime18(){
		image18.load('/main/images/testImage102.jpg')

	}

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

	//対象エレメントID
	var draw=SVG('svg-filter-image17').size(160,160)

	//TEXT
	var text=draw.text('画像塗り hueRotate').font({leading:0.8})

	var image19=draw.image('/main/images/testImage101.jpg').size(160,160).scale(100/160).center(80,80)
	image19.filter(function(add){
		matrix_elm19=add.colorMatrix('hueRotate',180)
		add.composite(matrix_elm19,add.sourceAlpha,'in')
	})

	var rect_box2=draw.rect(100,100).radius(10).attr({'fill':image19,'stroke':'#FFF','stroke-width':2}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})//陰影

	//ボタン
	var click_btn19=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn19.click(matrix_anime19)

	function matrix_anime19(){
		image19.load('/main/images/testImage102.jpg')

	}

	//対象エレメントID
	var draw=SVG('svg-filter-image18').size(160,160)

	//TEXT
	var text=draw.text('matrix fill-opatity NG').font({leading:0.8})

	var image20=draw.image('/main/images/testImage101.jpg').size(160,160).scale(100/160).center(80,80)
	image20.filter(function(add){
		matrix_elm20=add.colorMatrix('matrix','1 0.5 0.5 0 0, 0.5 0.73 0.5 0 0, 0.5 0.5 1 0 0, 0 0 0 1 0')
		add.composite(matrix_elm20,add.sourceAlpha,'in')
	})

	var rect_box3=draw.rect(100,100).radius(10).attr({'fill':image20,'stroke':'#FFF','stroke-width':2}).center(80,80)
	.attr({'filter':'url(#dropShadow2)'})//陰影

	//ボタン
	var click_btn20=draw.circle(10).attr({'fill':'#FF0000','stroke':'#FFF','stroke-width':2}).center(145,145)
	.attr({'filter':'url(#dropShadow2)'})//陰影
	.style('cursor','pointer')
	click_btn20.click(matrix_anime20)

	function matrix_anime20(){
		//fadeはダメ
		rect_box3.attr({'fill-opatity':0})
		image20.load('/main/images/testImage102.jpg')
		rect_box3.animate(1000).attr({'fill-opatity':1})
	}


 

slideshow

総括の意味で下記の様にslideshowを作ってみましたが、結構メンドウですから、通常SVGで作ることは余り考えられません。slideshowのみならば他の方法が簡単ゆえに現在SVGで作るメリットは無いと思います。一応参考まで。

svg-slideshow/svg-slideshow01.js (画像サイズ640x300)

 

 

サムネール画像は通常.image(src)で読み込み表示しますので、ここでは事前に「読み込み」はしていません。
但し、画像の処理如何によっては「完全読み込み済み」でない故に処理出来ない場合があります。
このような場合は、ローダーなどで画像を読み込んでから画像処理を行います。

このslideshowでは運よく処理できたに過ぎません。この点注意ください。

 

サムネール画像(縮小画像)がある場合
一応画像は読み込み済みと考えてよい。


//画像Load
function load_image(no){
	//FADE処理中は戻る
	if(loadflag){retrun}
	//上層に画像ロード
	top_image2.load(image_urls2[no])
	//直ぐ画像ロード完了前提
	crossFade(no)

}

サムネール画像が無い場合
画像は読み込み済みではないから、loaded処理で判定する。(但し完全ではない)


//画像Load
function load_image(no){
	//FADE処理中は戻る
	if(loadflag){retrun}
	//上層に画像ロード/loadedで判定
	top_image2.load(image_urls2[no]).loaded(function(){
		crossFade(no)
	})
}

サムネール画像の陰影
最初、ステージに同等の大きさの背景レクトを配置して陰影を付け、それをサムネール画像の陰影に「使い回し」しています。


//back
var stage_back=draw.rect(640,350).attr({'fill':'#EEE'})
stage_back.filter(function(add){
	var shadow=add.offset(0,0).in(add.sourceAlpha).gaussianBlur(3)
	add.merge(shadow,add.source)
})

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

//サムネールベース/shadow
var thmub_base=btngroup.rect(64,30).attr({'fill':'#000'}).move(i*80+25,310)
.filter(stage_back.filterer)

CSS


.svg-slideshow-elm{
width:640px;
height:350px;
margin:0;
padding:0;
overflow:hidden;
}

 

 

サンプルJSの全表示

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

● サンプルJSの全表示1(解説ページ用) svg-sample21.js

● SlideShowJSの全表示svg-slideshow01.js

使用画像

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

使用画像サンプル


プラグインsvg.filter.jsのFilter処理および、colorMatrixについては下記を参照ください。

【参照】当方の記事: SVG.js プラグインsvg.filter.jsのFilter処理

【参照】当方の記事: SVG.js colorMatrix シミュレーション

 

より良い方法があれば、考えてください。以上です。

 


[ この記事のURL ]


タグ:javascript , SVG

 

ブログ記事一覧

年別アーカイブ一覧



[1]