使用feDisplacementMap+feImage滤镜实现水波纹效果(计算动态值)

零零齊

该文章已经讲的特别细致了，该篇仅以此记录动效过程中各点的计算。
1.feDisplacementMap

1. feDisplacementMap

复制代码

实际上是一个位置替换滤镜，就是改变元素和图形的像素位置的。遍历原图形的所有像素点，使用

1. feDisplacementMap

复制代码

重新映射替换一个新的位置，形成一个新的图形。

1. feDisplacementMap

复制代码

滤镜在业界的主流应用是对图形进行形变，扭曲，液化。

1. P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

复制代码

·

1. P'(x,y)

复制代码

指的是转换之后的

1. x, y

复制代码

坐标。
·

1. x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5)

复制代码

指的是具体的转换规则。
·

1. XC(x,y)

复制代码

表示当前x,y坐标像素点其X轴方向上设置的对应通道的计算值，范围是0~1。
·

1. YC(x,y)

复制代码

表示当前x,y坐标像素点其Y轴方向上设置的对应通道的计算值，范围是0~1。
· -0.5是偏移值，因此

1. XC(x,y) - 0.5

复制代码

范围是

1. -0.5~0.5

复制代码

，

1. YC(x,y) - 0.5

复制代码

范围也是

1. -0.5~0.5

复制代码

。
·

1. scale

复制代码

表示计算后的偏移值相乘的比例，

1. scale

复制代码

越大，则偏移越大。
再用一句话解释就是，根据设定的通道颜色对原图的

1. 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            元素的result属性值            同in            用来映射的图形        2.通过feDisplacementMap和feImage实现水波特效

实现水波效果通常使用下图

1. <svg id='svg' width="400" height="400" xmlns="http://www.w3.org/2000/svg">
   
2.     <defs>
   
3.         <filter id="filter-ripple" primitiveUnits='objectBoundingBox'>
   
4.             <feImage id='feImage' result="pict2" xlink:href="上述图片地址"  x="0" y="0" width="100%" height="100%"></feImage>
   
5.             <feDisplacementMap id='displacement-map' result='ok' scale="0" xChannelSelector="R" yChannelSelector="G" in2="pict2" in="SourceGraphic" color-interpolation-filters="sRGB"></feDisplacementMap>
   
6.             <feComposite operator="in" in2="pict2"></feComposite>
   
7.             <feComposite in2="SourceGraphic"></feComposite> //这个的目的是因为添加滤镜的元素可见区域和feImage元素的大小一致。融合原有元素保证整个元素都可见
   
8.         </filter>
   
9.     </defs>
   
10. </svg>

复制代码

水波特效，是通过

1. <feImage>

复制代码

标签

1. x

复制代码

,

1. y

复制代码

,

1. width

复制代码

,

1. height

复制代码

四个属性和

1. <feDisplacementMap>

复制代码

标签

1. scale

复制代码

动态变化实现。
就像涟漪，以石子掉落处为中心，范围由小扩大，起伏由强减弱。 转为代码，也就是

1. width

复制代码

,

1. height

复制代码

由小变大，

1. scale

复制代码

由大变小
根据点击事件，可以计算出中心坐标

1. （pointX，pointY）

复制代码

在扩散过程中，中心坐标不变，x，y为图片的起始坐标

1. pointX = width/2 + x ;pointY = height/2 + y

复制代码

=>

1. x = pointX - width/2;  y = pointY - height/2

复制代码

width，height，scale的最大值就可以根据需求来设置啦~

参考资料

https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/
到此这篇关于使用feDisplacementMap+feImage滤镜实现水波纹效果(计算动态值)的文章就介绍到这了,更多相关feDisplacementMap滤镜水波纹内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/html5/823576.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！