滤镜高斯模糊的边界或边框问题的解决和优化
来源:互联网 发布:tomcat 多域名设置 编辑:程序博客网 时间:2024/05/03 14:29
1. 所谓 “高斯模糊的边界问题” 介绍
相信有很多刚刚接触SVG滤镜模糊的新人们都可能遇到过这种问题:
1. 当模糊偏量很小的时候:
<svg width="100%" height="100%" viewBox="0 0 150 360" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="filter1"> <!--stdDeviation为 1 --> <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="Gau1"/> </filter> <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)"></circle></svg>
这是我们期望的并且没有什么问题:
- 当偏量略大时(对于半径为10时,2偏量的模糊已经出现了问题):
<svg width="100%" height="100%" viewBox="0 0 150 360" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="filter1"> <!--stdDeviation为 2 --> <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="Gau1"/> </filter> <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)"></circle></svg>
高斯模糊的偏量为2时已经出现问题了:
<svg width="100%" height="100%" viewBox="0 0 150 360" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="filter1"> <!--stdDeviation为 3 --> <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="Gau1"/> </filter> <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)"></circle></svg>
高斯模糊偏量为3问题更明显
2. 问题的初步解决方案
关键标签:< feComposite> 一个神奇的标签,可以将两张图源通过像素点颜色的算术运算而产生不同效果(效果展示可以看我之前的《SVG_filter滤镜标签详解2》)。我们以[stdDeviation=”3”]的边界问题例子开始。
1.步骤一:
<svg width="100%" height="100%" viewBox="0 0 150 360" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="filter1"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="Gau1"/> <!--添加<feComposite标签,输入1和输入2都为高斯滤镜,操作类型为“in”>--> <feComposite in="Gau1" in2="Gau1" result="Com1" operator="in"/> </filter> <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)"></circle></svg>
当前效果图如下:
可见虽然边界被优化了,但仍然不够,所以我们再来一次:
<svg width="100%" height="100%" viewBox="0 0 150 360" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="filter1"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="Gau1"/> <feComposite in="Gau1" in2="Gau1" result="Com1" operator="in"/> <!--继续引用feComposite标签,两个输入一个为上一个feComposite的滤镜源,另一个为高斯滤镜源--> <feComposite in="Com1" in2="Gau1" operator="in"/> </filter> <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)"></circle></svg>
此时的边界问题已经完全看不出来了
通过同时增大< circle>的半径和高斯模糊的偏量,可以在可视圆半径相同的情况下,增加模糊程度,新人们可以试一下哦=0=。
0 0
- 滤镜高斯模糊的边界或边框问题的解决和优化
- 对Photoshop高斯模糊滤镜的算法总结
- 对Photoshop高斯模糊滤镜的算法总结
- 对Photoshop高斯模糊滤镜的算法总结
- 对Photoshop高斯模糊滤镜的算法总结
- Photoshop脚本 > 高斯模糊滤镜的使用
- 对Photoshop高斯模糊滤镜的算法总结
- 高斯模糊算法的实现和优化
- 高斯模糊算法的实现和优化
- 高斯模糊算法的实现和优化
- 高斯模糊算法的实现和优化
- Swift - 实现图片的模糊效果(高斯模糊滤镜)
- 高斯模糊的一种优化思路
- 边框、边界、和中心的关系
- 解决【高清屏幕显示模糊】的问题
- PS高斯模糊后变清晰(智能滤镜、蒙版)的使用
- Android 实时滤镜 高斯模糊
- ffmpeg滤镜专题2-高斯模糊
- 多线程面试
- LEETCODE 137.Singel Number ii
- 如何用JAVA代码签发数字证书
- spring相关包搜索
- FFmpeg学习4:音频格式转换
- 滤镜高斯模糊的边界或边框问题的解决和优化
- left join on 和where条件的放置
- 人工智能之机器学习路线图
- leetcode——Two Sum II - Input array is sorted
- ssm框架返回json .do 406 (Not Acceptable)错误
- How to judge whether an array is empty?
- 165.Merge Two Sorted Lists-合并两个排序链表(容易题)
- 关于设置float的补充
- C#开发B/S方式ActiveX控件