svg ：光滤镜（三）
本帖最后由 马黑黑 于 2023-10-22 11:36 编辑 <br /><br /><style>.ma p { margin: 8px 0; }
.rred { color: red; }
.zs { color: green; font-size: 14px; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
.mypic { filter: url(#f1); }
</style>
<div class="ma">
<p>本节主要内容：① 扩展介绍镜面滤镜 feSpecularLighting 的属性；② 聚光灯光源滤镜 feSpotLight。</p>
<p>镜面反射滤镜中有两个重要属性需要补充：一是 specularExponent 属性，它是镜面反射指数，该属性控制光源的焦点，值越大光亮越强；二是specularContant 属性，是镜面反射指数，该属性控制镜面反射照明的反射比率。它表示冯(Phong)照明模型中的 ks 值。值越大，反射越强。本节的示例将用到这两个属性。</p>
<p>下面重点介绍聚光灯光源滤镜。作为光源滤镜，我们可以将之想象成手电筒光源。它的光发自手电筒的发光体，用 x、y、z 表示光源的坐标点，这和点光源 fePointLight 是一致的。既然是聚光灯，就需要定义光射出去的方向，用 pointsAtX、pointsAtY、pointsAtZ 表示聚光灯朝向的坐标点，聚光灯的光柱宽度用角度限制，即圆锥形角度，属性名为 limitingConeAngle，角度越大光柱越大。x、y、z、pointsAtX、pointsAtY、pointsAtZ 和 limitingConeAngle 各属性，以及父滤镜的相关属性、合成滤镜的设定等等，它们是共同作用的，任何一个参数值的改变，都不同程度会改变光柱的渲染形态。</p>
<p>以下示例，f1 滤镜组使用的是镜面反射滤镜，光源来自聚光灯滤镜，它们直接作用于200*200的矩形，在其上产生聚光灯效果：</p>
<svg width="200" height="200" style="border: 1px solid gray;">
<filter id="f1">
<feSpecularLighting in="SourceGraphic" specularExponent="1" specularConstant="10" lighting-color="blue">
<feSpotLight
x="0"
y="0"
z="5"
pointsAtX="200"
pointsAtY="150"
pointsAtZ="0"
limitingConeAngle="10"></feSpotLight>
</feSpecularLighting>
</filter>
<rect x="0" y="0" width="100%" height="100%" filter="url(#f1)"></rect>
</svg>
<p>代码：</p>
<pre>
<svg width="200" height="200" style="border: 1px solid gray;">
<span class="zs"><!-- f1滤镜 --!></span>
<filter id="f1">
<span class="zs"><!-- 反射滤镜 : 镜面反射 feSpecularLighting --></span>
<feSpecularLighting in="SourceGraphic" specularExponent="1" specularConstant="10" lighting-color="blue">
<span class="zs"><!-- 光源 : 聚光灯 feSpotLight --></span>
<feSpotLight
x="0"
y="0"
z="5"
pointsAtX="200"
pointsAtY="150"
pointsAtZ="0"
limitingConeAngle="10"></feSpotLight>
</feSpecularLighting>
</filter>
<span class="zs"><!-- 尺寸为完整svg画布的矩形绑定 f1 滤镜 --></span>
<rect x="0" y="0" width="100%" height="100%" filter="url(#f1)"></rect>
</svg>
</pre>
<p>因为没有使用合成滤镜，光滤镜组直接作用于矩形，矩形的默认 fill 颜色的黑色没有了，rect矩形的表现形态由光滤镜组替代。</p>
</div>
聚光灯啊，需要设置的数值还是挺多的{:4_187:} 红影 发表于 2023-10-22 13:22
聚光灯啊，需要设置的数值还是挺多的
其实都好懂 马黑黑 发表于 2023-10-22 22:42
其实都好懂
嗯嗯，这个好，还让光有了方向{:4_187:} 红影 发表于 2023-10-22 23:48
嗯嗯，这个好，还让光有了方向
光都有方向。点光源的光，向四周发射，就像太阳；聚光灯光源就像手电筒，通过灯头装置（pointsAtX/Y/Z）让它朝一个方向行进。 马黑黑 发表于 2023-10-23 08:30
光都有方向。点光源的光，向四周发射，就像太阳；聚光灯光源就像手电筒，通过灯头装置（pointsAtX/Y/Z） ...
原来代码里把光也按自然方式做了区分啊。 红影 发表于 2023-10-23 09:52
原来代码里把光也按自然方式做了区分啊。
一般都尽量这么做 红影 发表于 2023-10-22 23:48
嗯嗯，这个好，还让光有了方向
说过的，光都有方向 马黑黑 发表于 2023-10-23 11:16
一般都尽量这么做
limitingConeAngle 角度是按这条线中心往两边散开的角度吧？
从光源点出发到无穷远？ 马黑黑 发表于 2023-10-23 11:18
说过的，光都有方向
“用 x、y、z 表示光源的坐标点”，我看x y都取的0，为什么光源点不是在0位置上？
为什么z="5"，pointsAtZ="0" 这个有什么说道么？圆锥形角度只是平面散开？和z有关系么？ 又仔细看了看，发现越看，十万个为什么就越多{:4_173:} 红影 发表于 2023-10-23 14:46
又仔细看了看，发现越看，十万个为什么就越多
这是正常的。全网，都没有一篇文章能完整地介绍滤镜的全部参数，官网绝大多数滤镜都是简介。 红影 发表于 2023-10-23 14:45
“用 x、y、z 表示光源的坐标点”，我看x y都取的0，为什么光源点不是在0位置上？
为什么z="5"，pointsA ...
这很正常。就像手电筒一样，射出来的光，在一定距离里，看到的是与光源不衔接的光柱，射灯也存在这样的现象。 红影 发表于 2023-10-23 14:42
limitingConeAngle 角度是按这条线中心往两边散开的角度吧？
从光源点出发到无穷远？
是的 马黑黑 发表于 2023-10-23 23:08
这是正常的。全网，都没有一篇文章能完整地介绍滤镜的全部参数，官网绝大多数滤镜都是简介。
估计这个太复杂，讲清楚太难了吧。 马黑黑 发表于 2023-10-23 23:09
这很正常。就像手电筒一样，射出来的光，在一定距离里，看到的是与光源不衔接的光柱，射灯也存在这样的现 ...
哦哦，知道了。只是不知道那个点离开左上角距离是多少。 马黑黑 发表于 2023-10-23 23:09
是的
一开始我以为是这条线开始顺时针转，后来发现我弄错了，是用这条线为中心两边散的。 红影 发表于 2023-10-24 13:55
一开始我以为是这条线开始顺时针转，后来发现我弄错了，是用这条线为中心两边散的。
慢慢体会 红影 发表于 2023-10-24 13:54
哦哦，知道了。只是不知道那个点离开左上角距离是多少。
慢慢体会 红影 发表于 2023-10-24 13:53
估计这个太复杂，讲清楚太难了吧。
设计的人和写文档的人估计不是一个人