SVG过滤器feColorMatrix矩阵变换效果用法详解
来源:互联网 发布:做产品目录的软件 编辑:程序博客网 时间:2024/05/10 03:20
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。
我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);
那么就可以应用矩阵相乘的方法来对其进行变换操作。
SVG标准中的feColorMatrix,当类型取值为matrix时,就是利用这个方法来实现的图像过滤效果。
变换矩阵的定义和说明
feColorMatrix的matrix是一个4*5的矩阵。前面4列是颜色通道的比例系数,最后一列是常量偏移。
上面公式中的rr表示red to red系数,以此类推。c1~c4表示常量偏移。
第一个4*5矩阵为变换矩阵,第二个单列矩阵为待变换对象的像素值。右侧单列矩阵为矩阵1和2的点积结果。
这个变换矩阵看起来比较复杂,在实践上常使用一个简化的对角矩阵,即除了rr/gg/bb/aa取值非零外,其余行列取值为0,这就退化成了简单的各颜色通道的独立调整。
feColorMatrix的语法
<filter id="f1" x="0%" y="0%" width="100%" height="100%"> <feColorMatrix result="original" id="c1" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /></filter>上述feColorMatrix过滤器的类型值为matrix,除此之外,还有saturate(饱和度)和hueRotate(色相旋转),取值比较简单,这里不做说明。
显然当变换矩阵为单位对角矩阵时,变换结果和原值相等。
我们可以尝试调整比例系数,比如把rr的值设置为0,即去除图像中的red颜色通道含量:
代码如下:
<filter id="colorMatrix"> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <g filter=""> <circle cx="30" cy="30" r="20" fill="red" fill-opacity="0.5" /> </g> <g filter="url(#colorMatrix)"> <circle cx="80" cy="30" r="20" fill="red" fill-opacity="0.5" /> </g>
你可以自己在线试试。注意Filter Effects Module Level 1的状态还是Working Draft,所以使用前注意测试浏览器支持情况。
如果是学习,请使用Chrome。
by iefreer
1 0
- SVG过滤器feColorMatrix矩阵变换效果用法详解
- SVG滤镜:feColorMatrix
- svg中transform的矩阵变换原理
- svg中transform的矩阵变换原理
- 【OpenGL】OpenGL矩阵变换详解
- DirectX视口变换矩阵详解
- DirectX视口变换矩阵详解
- SVG - 坐标与变换
- SVG transform坐标变换
- SVG中以任意直线为对称轴的镜像变换及其矩阵
- Opengl 关于矩阵变换操作效果理解-1
- 矩阵变换
- 变换矩阵
- 矩阵变换
- 矩阵变换
- 法线变换详解 和 3D 变换中法向量变换矩阵的推导
- PHP Yii框架过滤器用法详解
- PHP Yii框架过滤器用法详解
- 14.RDD 深度解密
- 思-辨
- 数据结构与算法--链表C++实现
- 笔试题32. LeetCode OJ (19)
- 【GDOI 2016模拟4.21】位运算
- SVG过滤器feColorMatrix矩阵变换效果用法详解
- Bzoj1857:[Scoi2010]传送带:三分
- 模板:DINIC(多路增广)+当前弧优化
- Python map()-reduce() 把字符串转换成浮点数
- 数据结构与算法--二叉树(一)
- PostgreSQL + Hive + Metastore
- rabbitmq配置集群和镜像队列
- acm 2 1010 Catch him
- poj2778.DNA Sequence (Trie图 && 矩阵乘)