草庐IT

feDisplacementMap

全部标签

feDisplacementMap滤镜实现水波纹效果,计算动态值。

参考资料https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/该文章已经讲的特别细致了,该篇仅以此记录动效过程中各点的计算。feDisplacementMapfeDisplacementMap实际上是一个位置替换滤镜,就是改变元素和图形的像素位置的。遍历原图形的所有像素点,使用feDisplacementMap重新映射替换一个新的位置,形成一个新的图形。feDisplacementMap滤镜在业界的主流应用是对图形进行形变,扭曲,液化。P'(x,y)←P(x+scale*(XC(

feDisplacementMap滤镜实现水波纹效果,计算动态值。

参考资料https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/该文章已经讲的特别细致了,该篇仅以此记录动效过程中各点的计算。feDisplacementMapfeDisplacementMap实际上是一个位置替换滤镜,就是改变元素和图形的像素位置的。遍历原图形的所有像素点,使用feDisplacementMap重新映射替换一个新的位置,形成一个新的图形。feDisplacementMap滤镜在业界的主流应用是对图形进行形变,扭曲,液化。P'(x,y)←P(x+scale*(XC(