svgdr教程·滤镜

马黑黑 · 发表于 2024-11-16 09:42

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-11-16 20:44 编辑

滤镜

一、滤镜指令 filter

指令：filter()

参数：(fId, fecode)

语法：filter(fId, fecode) 或简写成 f(fId, fecode)

参数解释：

① fId - 必须，所创建滤镜 filter 元素的id标识符，字符型
② fecode - 必须，字符型，具体滤镜 HTML代码，例如：<feOffset in="SourceGraphic" dx="5" dy="5" />
* 具体滤镜代码建议使用反引号``包裹，这样代码可以分行书写、代码内的小角引号可以正常使用，详见后面的示例代码

二、使用滤镜指令 filterTo

指令：filterTo()

参数：id

语法：filterTo(fId) 或简写为 f2(fId)

参数解释：

fId 参数为事先使用 filter() 或 f() 指令创建的 filter 元素的id，必须，字符型
* filterTo() 或 f2() 意为为当前所创建的实体元素（例如rect、circle）等添加前面所创建的 id="fId" 的 filter 滤镜

下面举例说明：代码示例中，先创建 id="f1" 的 filter 滤镜，具体滤镜是 feColorMatrix，接着绘制两张图片来源一致的图片，第一张图片原始输出，第二张图片使用 f1 滤镜修饰，代码和效果如下——

//f('f1', `...`); //简写也可以
dr.filter('f1', `
	<feColorMatrix type="hueRotate" values="180" in="SourceGraphic" />
`);
dr.image('https://638183.freep.cn/638183/small/sunbirds.jpg')
dr.image('https://638183.freep.cn/638183/small/sunbirds.jpg', 160).filterTo('f1');

svgdr绘制指令生成的SVG代码：

feColorMatrix 滤镜使用矩阵原理对目标对象进行颜色转换，type 属性为转换类型，示例使用了业已存在的矩阵封装 hueRotate 即色相转换，可选值还有诸多个封装好的类型，另有一个自由度极高的 matrix 类型交由用户自己封装 4*5 的矩阵转换机制；values 属性指转换类型的值，示例中设为180，即将图像颜色体系每一个像素的色相通过矩阵运算都加上180度；in 属性是滤镜的作用对象，一般而言，常用到的值是 SourceGraphic（图像）或 SourceAlpha（alpha通道），示例使用前者，表示直接作用于目标图像即后面用 image() 指令绘制的第二张图片。更多的 feColorMatrix 滤镜知识可自行查阅。

svg滤镜数量并不太多，可用的滤镜加起来也就是二、三十个，常用的十来个。不过svg滤镜有一定的学习难度，掌握他们需要较多的学习成本，感兴趣的朋友可以量体裁衣，通过简单教程·svg滤镜或其他资源逐一了解学习。以下是较为常见的20个svg滤镜：

feBlend - 混合滤镜
feColorMatrix - 色彩矩阵变换滤镜
feComponentTransfer 颜色通道转换函数滤镜？
feComposite - 图像像素智能组合滤镜
feConvolveMatrix - 矩阵卷积滤镜
feDiffuseLighting - 光滤镜：漫反射滤镜
feDisplacementMap - 映射置换滤镜
feDropShadow - 投影滤镜
feFlood - 纯色填充滤镜
feGaussianBlur - 高斯模糊滤镜
feImage - 图像滤镜（获取外部图像作为滤镜源）
feMerge - 叠加滤镜（将多个滤镜进行叠加）
feMorphology - 生态学滤镜
feOffset - 偏移滤镜
feSpecularLighting 光滤镜：镜面反射滤镜
feTile - 填充矩形滤镜（类似于pattern）
feTurbulence - 湍流滤镜
feDistantLight - 光源滤镜：距离光源
fePointLight 光源滤镜：点滤镜
feSpotLight - 光源滤镜：聚光灯光源

svgdr 没有封装创建具体滤镜 fe* 的指令，但可以使用 draw() 指令先创建 filter，再创建 fe* 滤镜并添加到 filter 中。下面以创建文本阴影为例加以说明：/p>

dr.draw('filter', {id: 'f2'}); //创建 id="f2" 的filter标签
//创建 feDropShadow 滤镜
dr.draw('feDropShadow', {
	dx: 2,
	dy: 2,
	stdDeviation: 4,
	'flood-color': '#000',
	'flood-opacity': .75
}).addTo('f2');
//绘制文本并应用 id="f2" 的滤镜
dr.text('Hello', 50, 120, 'red').style('font: bold 100px Arial, sans-serif').f2('f2');

效果如下：

上述效果的SVG代码：

返回目录

泡沫 · 发表于 2024-11-16 11:47

先创建 id="f1" 的 filter 滤镜，再filterTo('f1')添加到相应实体元素。。这个结构先理解再说。。

泡沫 · 发表于 2024-11-16 11:50

至于滤镜二、三十个常用滤镜样式，看单词结尾部分，能想起个大概。。
比如阴影，模糊，亮度对比度，颜色等，好象每一部分里又有更多种小项，需要慢慢熟悉。

这个滤镜看着篇幅不大，内容很不少

泡沫 · 发表于 2024-11-16 11:55

文本添加阴影滤镜跟图片添加滤镜绘制代码有点区别。。SVG代码结构无二。

泡沫 · 发表于 2024-11-16 12:15

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feDropShadow
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

认出来几个，多数不认得，
刚看到老师昨天的美女贴，里面介绍 ” feMorphology 滤镜被称为生态学滤镜“
小白申请中文对应翻译。。