通过feDisplacementMap和feImage实现水波特效


Posted in HTML / CSS onApril 24, 2022

1.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.5YC(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 元素的result属性值 同in 用来映射的图形

2.通过feDisplacementMap和feImage实现水波特效

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

通过feDisplacementMap和feImage实现水波特效

<svg id='svg' width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="filter-ripple" primitiveUnits='objectBoundingBox'>
            <feImage id='feImage' result="pict2" xlink:href="上述图片地址"  x="0" y="0" width="100%" 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)

通过feDisplacementMap和feImage实现水波特效

在扩散过程中,中心坐标不变,x,y为图片的起始坐标
pointX = width/2 + x ;pointY = height/2 + y => x = pointX - width/2; y = pointY - height/2
width,height,scale的最大值就可以根据需求来设置啦~

参考资料

https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/

到此这篇关于使用feDisplacementMap+feImage滤镜实现水波纹效果(计算动态值)的文章就介绍到这了!


Tags in this post...

HTML / CSS 相关文章推荐
超酷炫 CSS3垂直手风琴菜单
Jun 28 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
什么是css原子化,有什么用?
Apr 24 #HTML / CSS
css3 文字断裂效果
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 #HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 #HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 #HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 #HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 #HTML / CSS
You might like
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP加密解密函数详解
2015/10/28 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
PHP xpath()函数讲解
2019/02/11 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
python3注册全局热键的实现
2020/03/22 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
本科毕业生应聘自荐信范文
2014/06/26 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
扬州个园导游词
2015/02/06 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python