之前寫了一篇 CSS 的濾鏡 [CSS 的 filter](https://yhtpnotes.blogspot.com/2020/06/css-filter.html) ，裡頭有一些設定，例如飽合度(saturate) 和色相旋轉(hue-rotate) 等，在 SVG 的濾鏡中也可以做到，而且還有一個更強大的 Matrix 轉換
  
參考資料：[這裡](https://drafts.fxtf.org/filter-effects/#feColorMatrixElement) 還有 [這裡](https://webplatform.github.io/docs/svg/elements/feColorMatrix/)
  
首先先說明一下 feColorMatrix 的參數
  
```
  type     matrix , saturate , hueRotate , luminanceToAlpha
  values   設定的值  
```

# matrix  
先從最複雜的 matrix 說明
  
<p>
matrix 的定義如下，從 `a_00` 到 `a_34` 就是 values 要填的值
</p>  
  
<div style="transform: scale(0.8) translate(-40px,0);">
<p>
`[[R_(out)],[G_(out)],[B_(out)],[A_(out)],[1]] = 
[[a_00,a_01,a_02,a_03,a_04]
,[a_10,a_11,a_12,a_13,a_14]
,[a_20,a_21,a_22,a_23,a_24]
,[a_30,a_31,a_32,a_33,a_34]
,[0   ,0   ,0   ,0   ,1   ]] * 
[[R],[G],[B],[A],[1]]`
</p>
</div>
  
先來一個簡單的範例, 這個範例中把 R,G,B 的值都乘以2，可以增加亮度

```
$mmcode(r1)  
```  
<div class="mmresult r1">  
<svg width="300" height="400">
<defs>
<filter id="a121721_f1">
  <feColorMatrix in="SourceGraphic" type="matrix" values=
   "2 0 0 0 0
    0 2 0 0 0 
    0 0 2 0 0
    0 0 0 1 0"/>
</filter>
</defs>
<text x=80 y=20>原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/>
<text x=80 y=220>濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f1)"/>
</svg>
</div>
  
經由這個矩陣，把 r,g,b 都乘以2，即可增加亮度

# saturate

要增加飽合度的話，只要 type 設為 saturate , 然後修改 values 即可, 如果想手動設定陣列來達到效果，公式如下：

```
$mmcode(r2)
```
<div class="mmresult r2">
<svg width="300" height="400">
<defs>
<filter id="a121721_f2">
  <feColorMatrix in="SourceGraphic" type="saturate" values="2"/>
</filter>
</defs>
<text x=80 y=20>原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/>
<text x=80 y=220>濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f2)"/>
</svg>
</div>
  
# hueRotate

hueRotate 公式

```
$mmcode(r3)
```
<div class="mmresult r3">
<svg width="300" height="400">
<defs>
<filter id="a121721_f3">
  <feColorMatrix in="SourceGraphic" type="hueRotate" values="180"/>
</filter>
</defs>
<text x=80 y=20>原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/>
<text x=80 y=220>濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f3)"/>
</svg>
</div>
  
# luminanceToAlpha

luminanceToAlpha 公式
  
<p>
`[[0     ,0     ,0     ,0   ,0   ]
, [0     ,0     ,0     ,0   ,0   ]
, [0     ,0     ,0     ,0   ,0   ]
, [0.2126,0.7152,0.0722,0   ,0   ]
, [0     ,0     ,0     ,0   ,1   ]]`
</p>

```
$mmcode(r4)
```
<div class="mmresult r4">
<svg width="300" height="400">
<defs>
<filter id="a121721_f4">
  <feColorMatrix in="SourceGraphic" type="luminanceToAlpha"/>
</filter>
</defs>
<text x=80 y=20>原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/>
<text x=80 y=220>濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f4)"/>
</svg>
</div>
  
<hr>
  
最後寫了一個自己設定矩陣參數的程式，做為這一篇的結束。

<div id="a121721_s5">
<style>
#a121721_set input
{
  width:3.5em;
}
#a121721_s5 button
{
  font-size:1em;
}
#a121721_bb button
{
  width:3em;
}
#a121721_bb div
{
  display:inline-block;
  width:6em;
}
</style>
<svg width="260" height="200">
<defs>
<filter id="a121721_f5">
  <feColorMatrix id="a121721_m5" in="SourceGraphic" type="matrix" values=
   "2 0 0 0 0
    0 2 0 0 0 
    0 0 2 0 0
    0 0 0 1 0"/>
</filter>
</defs>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=260 height=200 filter="url(#a121721_f5)"/>
</svg>
<br>
<div id="a121721_set" style="width:30em;">
<input type="text"/>
</div>
<br>
<div>
<button id="a121721_ini">init</button>
<button id="a121721_ini_contrast">contrast</button>
<button id="a121721_ini_grey">grey</button>
<button id="a121721_ini_sepia">sepia</button>
<button id="a121721_ini_invert">invert</button>
</div><br>
<div>
<div id="a121721_bb">
<div>brightness</div>
<button id="a121721_badd">+</button>
<button id="a121721_bsub">-</button><br>
<div>m</div>
<button id="a121721_madd">+</button>
<button id="a121721_msub">-</button><br>
<div>n</div>
<button id="a121721_nadd">+</button>
<button id="a121721_nsub">-</button><br>
</div>
</div>
</div>
  
<script>
$(()=>
{
  let ii='<input type="text"/>';
  let i;
  let hh="";
  let init=[1,0,0,0,0,
            0,1,0,0,0,
            0,0,1,0,0,
            0,0,0,1,0];
  let contrast=[2.0 ,0   ,0   ,0   ,-0.2,
                0   ,2.0 ,0   ,0   ,-0.2,
                0   ,0   ,2.0 ,0   ,-0.2,
                0   ,0   ,0   ,1   ,0   ];
  let grey    =[.33 ,.33 ,.33 ,0   ,0,
                .33 ,.33 ,.33 ,0   ,0,
                .33 ,.33 ,.33 ,0   ,0,
                0   ,0   ,0   ,1   ,0   ];
  let sepia   =[.35 ,.35 ,.35 ,0   ,0,
                .25 ,.25 ,.25 ,0   ,0,
                .15 ,.15 ,.15 ,0   ,0,
                0   ,0   ,0   ,1   ,0   ];
  let invert  =[-1  ,0   ,0   ,0   ,.5,
                0   ,-1  ,0   ,0   ,.5,
                0   ,0   ,-1  ,0   ,.5,
                0   ,0   ,0   ,1   ,0   ];
  for (i=0;i<20;i++)
  {
    hh+=ii;
    if((i+1)%5==0) hh+="<br>";
  }
  function putv(m)
  {
    let s=$("#a121721_set input");
    for (i=0;i<s.length;i++)
    {
      s[i].value=m[i].toFixed(3);
    }
  }
  function getv()
  {
    let s=$("#a121721_set input");
    let r=[];
    for (i=0;i<s.length;i++)
    {
      let j=parseFloat(s[i].value);
      j=((j)?(j):(0));
      r.push(j);
    }
    return r;
  }
  function run()
  {
    let s=$("#a121721_set input");
    hh="";
    for (i=0;i<s.length;i++)
    {
      let j=parseFloat(s[i].value);
      hh+=((j)?(j):(0))+" ";
    }
    $("#a121721_m5").attr("values",hh);
  }
  $("#a121721_set").html(hh);
  putv(init);
  run();
  $("#a121721_set input").on("input",run);
  $("#a121721_ini").on("click",function()
  {
    putv(init);
    run();
  })
  $("#a121721_ini_contrast").on("click",function()
  {
    putv(contrast);
    run();
  })
  $("#a121721_ini_grey").on("click",function()
  {
    putv(grey);
    run();
  })
  $("#a121721_ini_sepia").on("click",function()
  {
    putv(sepia);
    run();
  })
  $("#a121721_ini_invert").on("click",function()
  {
    putv(invert);
    run();
  })
  $("#a121721_badd").on("click",function()
  {
    let m=getv();
    m[0]+=0.2;
    m[6]+=0.2;
    m[12]+=0.2;
    putv(m);
    run();
  })
  $("#a121721_bsub").on("click",function()
  {
    let m=getv();
    m[0]-=0.2;
    m[6]-=0.2;
    m[12]-=0.2;
    putv(m);
    run();
  })
  $("#a121721_madd").on("click",function()
  {
    let m=getv();
    m[4]+=0.1;
    m[9]+=0.1;
    m[14]+=0.1;
    putv(m);
    run();
  })
  $("#a121721_msub").on("click",function()
  {
    let m=getv();
    m[4]-=0.1;
    m[9]-=0.1;
    m[14]-=0.1;
    putv(m);
    run();
  })
  $("#a121721_nadd").on("click",function()
  {
    let m=getv();
    let n=[1,2,5,7,10,11];
    for (i in n)
    {
      m[n[i]]+=0.1;
    }
    putv(m);
    run();
  })
  $("#a121721_nsub").on("click",function()
  {
    let m=getv();
    let n=[1,2,5,7,10,11];
    for (i in n)
    {
      m[n[i]]-=0.1;
    }
    putv(m);
    run();
  })
  MathJax.typeset();
});
</script>

之前寫了一篇 CSS 的濾鏡 CSS 的 filter ，裡頭有一些設定，例如飽合度(saturate) 和色相旋轉(hue-rotate) 等，在 SVG 的濾鏡中也可以做到，而且還有一個更強大的 Matrix 轉換

參考資料：這裡還有這裡

首先先說明一下 feColorMatrix 的參數

  type     matrix , saturate , hueRotate , luminanceToAlpha
  values   設定的值

matrix

先從最複雜的 matrix 說明

matrix 的定義如下，從到就是 values 要填的值

先來一個簡單的範例, 這個範例中把 R,G,B 的值都乘以2，可以增加亮度


<svg width="300" height="400">
<defs>
<filter id="a121721_f1">
  <feColorMatrix in="SourceGraphic" type="matrix" values="2 0 0 0 0
    0 2 0 0 0 
    0 0 2 0 0
    0 0 0 1 0"></feColorMatrix>
</filter>
</defs>
<text x="80" y="20">原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="0" width="200" height="200"></image>
<text x="80" y="220">濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="200" width="200" height="200" filter="url(#a121721_f1)"></image>
</svg>

經由這個矩陣，把 r,g,b 都乘以2，即可增加亮度

saturate

要增加飽合度的話，只要 type 設為 saturate , 然後修改 values 即可, 如果想手動設定陣列來達到效果，公式如下：


<svg width="300" height="400">
<defs>
<filter id="a121721_f2">
  <feColorMatrix in="SourceGraphic" type="saturate" values="2"></feColorMatrix>
</filter>
</defs>
<text x="80" y="20">原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="0" width="200" height="200"></image>
<text x="80" y="220">濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="200" width="200" height="200" filter="url(#a121721_f2)"></image>
</svg>

hueRotate

hueRotate 公式


<svg width="300" height="400">
<defs>
<filter id="a121721_f3">
  <feColorMatrix in="SourceGraphic" type="hueRotate" values="180"></feColorMatrix>
</filter>
</defs>
<text x="80" y="20">原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="0" width="200" height="200"></image>
<text x="80" y="220">濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="200" width="200" height="200" filter="url(#a121721_f3)"></image>
</svg>

luminanceToAlpha

luminanceToAlpha 公式


<svg width="300" height="400">
<defs>
<filter id="a121721_f4">
  <feColorMatrix in="SourceGraphic" type="luminanceToAlpha"></feColorMatrix>
</filter>
</defs>
<text x="80" y="20">原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="0" width="200" height="200"></image>
<text x="80" y="220">濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="200" width="200" height="200" filter="url(#a121721_f4)"></image>
</svg>

最後寫了一個自己設定矩陣參數的程式，做為這一篇的結束。

brightness

TP Notes

Translate

2020年12月17日星期四

有趣的 SVG filter - feColorMatrix

matrix

saturate

hueRotate

luminanceToAlpha

沒有留言:

張貼留言

Translate

2020年12月17日 星期四

有趣的 SVG filter - feColorMatrix

matrix

saturate

hueRotate

luminanceToAlpha

沒有留言:

張貼留言

2020年12月17日星期四