參考資料 https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/
該文章已經講的特別細致了，該篇僅以此記錄動效程序中各點的計算，
feDisplacementMap
feDisplacementMap 實際上是一個位置替換濾鏡，就是改變元素和圖形的像素位置的，遍歷原圖形的所有像素點，使用feDisplacementMap重新映射替換一個新的位置，形成一個新的圖形，feDisplacementMap濾鏡在業界的主流應用是對圖形進行形變，扭曲，液化，
P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
· P'(x,y)指的是轉換之后的x, y坐標，
· x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5)指的是具體的轉換規則，
· XC(x,y)表示當前x,y坐標像素點其X軸方向上設定的對應通道的計算值，范圍是0~1，
· YC(x,y)表示當前x,y坐標像素點其Y軸方向上設定的對應通道的計算值，范圍是0~1，
· -0.5是偏移值，因此XC(x,y) - 0.5范圍是-0.5~0.5，YC(x,y) - 0.5范圍也是-0.5~0.5，
· scale表示計算后的偏移值相乘的比例，scale越大，則偏移越大，
再用一句話解釋就是，根據設定的通道顏色對原圖的x, y坐標進行偏移，
| 值 | 默認值 | 取值 | 說明 |
|---|---|---|---|
| xChannelSelector | A | A or R or G or B | 對應XC(x,y),表示X軸坐標使用的是哪個顏色通道進行位置偏移 |
| yChannelSelector | A | A or R or G or B | 對應YC(x,y),表示Y軸坐標使用的是哪個顏色通道進行位置偏移 |
| color-interpolation-filters | linearRGB | linearRGB or sRGB | 濾鏡對顏色進行計算時候采用的顏色模式型別 |
| scale | 0 | 可正可負 | 縮放比例 通常使用正數值處理，值越大，偏移越大， |
| in | SourceGraphic | SourceGraphic，SourceAlpha，BackgroundImage, BackgroundAlpha，FillPaint，StrokePaint，以及自定義的濾鏡的原始參考 | 原始圖形 |
| in2 | 同in | 用來映射的圖形 |
通過feDisplacementMap和feImage實作水波特效
實作水波效果通常使用下圖
<svg id='svg' height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filter-ripple" primitiveUnits='objectBoundingBox'>
<feImage id='feImage' result="pict2" xlink:href="https://www.cnblogs.com/wwwxxxyyy/archive/2022/04/22/上述圖片地址" x="0" y="0" height="100%"></feImage>
<feDisplacementMap id='displacement-map' result='ok' scale="0" xChannelSelector="R" yChannelSelector="G" in2="pict2" in="SourceGraphic" color-interpolation-filters="sRGB"></feDisplacementMap>
<feComposite operator="in" in2="pict2"></feComposite>
<feComposite in2="SourceGraphic"></feComposite> //這個的目的是因為添加濾鏡的元素可見區域和feImage元素的大小一致，融合原有元素保證整個元素都可見
</filter>
</defs>
</svg>
水波特效，是通過<feImage>標簽 x,y,width,height四個屬性和<feDisplacementMap>標簽scale動態變化實作，
就像漣漪，以石子掉落處為中心，范圍由小擴大，起伏由強減弱， 轉為代碼，也就是width,height由小變大，scale由大變小
根據點擊事件，可以計算出中心坐標（pointX，pointY）
在擴散程序中，中心坐標不變，x，y為圖片的起始坐標
pointX = width/2 + x ;pointY = height/2 + y => x = pointX - width/2; y = pointY - height/2
width，height，scale的最大值就可以根據需求來設定啦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/461883.html
標籤：其他
上一篇：使用iframe/object/embed引入svg 使用getSVGDocument()為null（可能是兩個問題）