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


SVG.js 各種Filter表示 colorMatrix デモ(v2.0.2)。DEMO-043


解説の記事ページで収容出来ない、svg.filter.js(v2.0.2)のFilterデモなどを表示しています。解説などは少なめですので、コードをみて直感的に理解ください。このページではjquery-1.9.1を使用しています。SVG colorMatrix は結構判り難いのでシミュレーション形式にして、有る程度一律に設定変更を出来る様にしてみました。少しは判るようなきがします。
2016/10/01 新規


DEMO

 

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


 

colorMatrix シミュレーション


1. 使用者のローカルデスク上の画像を選定できるので、実際の画像で設定変更の状況確認ができる。
2. 関連する要素を同時に動かせますので、colorMatrixを理解し易い。(と思う)
[モノクロ] [セピア] [不透明] [彩度] [明度] 等スライドさせて、どの要素(成分のリスト)が動くのか状況を確認ください。
3. 透明度、a30 a31 a32を動かした場合、a33を1以下にしないと透過はしません。
(画像全体を透過させる場合は「a33」を調整します、初期値は1、不透明です)
4. a34は特殊です。0以上は黒背が濃くなります。(-1-0-1)、画像スケールを小さくすると判ります。
(黒背景と組み合わせた場合に最もメリハリ効果が上がります)
5. a04 a14 a24同時に動かせば明度が変わります。個別では全体が赤、緑、青に変わります。隣のa03 a13 a23も同様です。
(赤+緑+青=白の理屈になります、何処か強ければその色が強調されます)
6. KEEPボタンでRGB設定のみ現在の設定を一時保存出来ます。SETで再現します。
[RESET]で全ての設定を初期値に戻します。
7. 常にmatrixの文字列が出力表示されます。
8. RGBは光の三原色なので、絵の具の混合と違いますから、頭を白黒反転して考えてください。
9. 画像(作業エリア)は640x300の大きさですが、画像スケールの変更が可能です。


colorMatrix計算説明図、www.h2.dion.ne.jpの記事: 「svg要素の基本的な使い方まとめ、画像効果」 より引用しました

matrix

 

 

// 写真を選択してください //


 


 

 

ドラッグが困難な場合、下記文字列をドラッグください。


 

SVG.jsでの使用方法


var image=draw.image()...
.filter(function(add) {
	//matrix
	add.colorMatrix('matrix','マトリックス文字列')
})

マトリックス文字列記載方法


出力例
'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'

こちらの書き方でもOKです
'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0'
[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]

使用背景色は次の通りです。


colorlist=['#DC143C','#FF4500','#FFA500','#BC8F8F','#20B2AA','#48D1CC','#00BFFF','#6496ED','#6A5ACD','#C71585','#778899','#B0C4DE','#000000','#FFFFFF']

 

 

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

 

 

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