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

  发布时间:2022-04-24 15:32:38   作者:泼墨作山水   我要评论
这篇文章主要使用feDisplacementMap滤镜实现水波纹效果(计算动态值),水波特效,是通过<feImage>标签 x,y,width,height四个属性和<feDisplacementMap>标签scale动态变化实现,主要记录动效过程中各点的计算,需要的朋友可以参考下

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

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实现水波特效

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

<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)

在扩散过程中,中心坐标不变,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滤镜实现水波纹效果(计算动态值)的文章就介绍到这了,更多相关feDisplacementMap滤镜水波纹内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

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

    这篇文章主要使用feDisplacementMap滤镜实现水波纹效果(计算动态值),水波特效,是通过<feImage>标签 x,y,width,height四个属性和<feDisplacementMap>标签scale
    2022-04-24
  • HTML5基础学习之文本标签控制

    这篇文章主要介绍了 HTML5基础学习之文本标签控制 ,文本与图片在网站上的运用是最广泛的,一个内容充实的网站必然会用大量的文本和图片,然后把超级链接应用到文本和图片
    2022-03-24
  • 使用Canvas绘制一个游戏人物属性图

    Canvas六边形属性图在很多游戏中都可以用到,本文主要介绍了使用Canvas绘制一个游戏人物属性图,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可
    2022-03-23
  • 面试中canvas绘制图片模糊图片问题处理

    这篇文章主要为大家介绍了canvas绘制图片,图片变模糊问题的几种处理解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2022-03-09
  • canvas实现贪食蛇的实践

    本文主要介绍了canvas实现贪食蛇的实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-14
  • bootstrapv4轮播图去除两侧阴影及线框的方法

    这篇文章主要介绍了bootstrapv4轮播图去除两侧阴影及线框的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-14
  • html5调用摄像头截图功能

    根据需求我们可以把图片数据转换为流或二进制,我这里转换为base64,拿到了数据就可以发挥想象了,tensorflow,机器学习,模式识别,大把的应用场景。下面给大家介绍下html
    2021-12-28
  • Html5获取用户当前位置的几种方式

    本文详细的介绍了Html5获取用户当前位置的几种方式,主要包括html5自带,微信API和百度地图,具有一定的参考价值,感兴趣的可以 了解一下
    2021-12-27
  • 前端监听websocket消息并实时弹出(实例代码)

    这篇文章主要介绍了前端监听websocket消息并实时弹出,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-23
  • HTML5 新增内容和 API详解

    这篇文章主要介绍了HTML5 新增内容和 API详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-17

最新评论