马黑黑 发表于 2024-11-15 19:40

镁铝肿么啦

本帖最后由 马黑黑 于 2024-11-15 21:44 编辑 <br /><br /><svg id="msvg" width="760" height="450"></svg>
<p>
        <br>
        <input id="erode" name="feMor" type="radio" value="erode" checked />
        <label for="erode">erode（腐蚀）</label>
        <input id="dilate" name="feMor" type="radio" value="dilate" />
        <label for="dilate">dilate（扩张）</label>
        <input id="rngVal" type="range" min="0" max="10" value="0" />
        <output id="outMsg">0</output>
</p>

<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr=_dr(msvg);

dr.filter('f1', `
        <feMorphology operator="erode" radius="0" in="SourceGraphic" />
`);
dr.image('https://638183.freep.cn/638183/small/girl20.jpg').filterTo('f1');
dr.text('HELLO',500,100).style('font-size: 60px; letter-spacing: 10px;').id('img1').filterTo('f1');

var radios = , curOperator = 'erode';

radios.forEach((r,k) => {
        r.onclick = () => {
                curOperator =r.value;
                setRes(fe, curOperator, rngVal.value);
        }
});

var fe = f1.querySelector('feMorphology');

rngVal.oninput = () => {
        //fe.setAttribute('radius', rngVal.value);
        setRes(fe, curOperator, rngVal.value);
        outMsg.value = rngVal.value;
}

var setRes = (element, operator, radius) => {
        element.setAttribute('operator', operator);
        element.setAttribute('radius', radius);
};
</script>

马黑黑 发表于 2024-11-15 19:43

本帖最后由 马黑黑 于 2024-11-15 21:44 编辑

svg代码：


<svg id="msvg" width="800" height="400" xmlns="http://www.w3.org/2000/svg">
      <filter id="f1">
                <feMorphology operator="dilate" radius="1" in="SourceGraphic"></feMorphology>
      </filter>
      <image href="https://tse1-mm.cn.bing.net/th/id/OIP-C.11przxGxcHIKgfNax3ju1AAAAA?rs=1&amp;pid=ImgDetMain" filter="url(#f1)"></image>
      <text x="500" y="100" style="font-size: 60px; letter-spacing: 10;" filter="url(#f1)">HELLO</text>
</svg>

马黑黑 发表于 2024-11-15 19:49

feMorphology 滤镜被称为生态学滤镜，它实际上是改变目标对象的形态：通过 operator 属性（值为 erode 或 dilate）实现对目标对象进行腐蚀或扩张修饰，radius 属性则是腐蚀或扩张的程度，值在 0 ~ N 之间。

本例，该滤镜作用于目标图像（in="SourceGraphic"），单选按钮选择修饰形态（operator），滑杆改变修饰程度值。

马黑黑 发表于 2024-11-15 19:56

超粗文本可以考虑使用这个 feMorphology 滤镜：先选择较粗的字体、将字体设为粗体，字间距设置为大一些，然后再通过滤镜的 operator="dilate" 修饰文本，radius 设为2

马黑黑 发表于 2024-11-15 19:58

文本笔画超细：operator="erode" radius="2"

朵拉 发表于 2024-11-15 20:02

这是照哈哈镜么{:4_173:}

红影 发表于 2024-11-15 20:47

这个有意思，拉动滑杆，美女变化好大啊。这个生态学滤镜能让美女变野兽{:4_173:}

红影 发表于 2024-11-15 20:48

黑黑旁边设置了文本，还以为是为了对比，原来还能设置文本的超粗和超细呢{:4_199:}

红影 发表于 2024-11-15 20:48

这个生态学滤镜想不起以前讲过没有，反正觉得挺新的。
感谢黑黑的好教程{:4_187:}

马黑黑 发表于 2024-11-15 22:48

红影 发表于 2024-11-15 20:48
这个生态学滤镜想不起以前讲过没有，反正觉得挺新的。
感谢黑黑的好教程

提到过，也用过

梦江南 发表于 2024-11-16 09:05

美女代码的滤镜与文字的滤镜正好相反。太厉害了！

泡沫 发表于 2024-11-16 12:17

马黑黑 发表于 2024-11-15 19:49
feMorphology 滤镜被称为生态学滤镜，它实际上是改变目标对象的形态：通过 operator 属性（值为 erode 或 d ...

这个小程序使得图片从清晰到腐蚀的过程一目了然，
居然还有这样的滤镜。。。也是够生态的。。{:4_173:}

泡沫 发表于 2024-11-16 12:24

radius 属性则是腐蚀或扩张的程度，值在 0 ~ N 之间，
数据大一些，颜色彻底晕染，啥也分不清了。
更大就全黑{:4_173:}好玩。

马黑黑 发表于 2024-11-16 12:42

泡沫 发表于 2024-11-16 12:24
radius 属性则是腐蚀或扩张的程度，值在 0 ~ N 之间，
数据大一些，颜色彻底晕染，啥也分不清了。
更大就 ...

所以要适可而止

马黑黑 发表于 2024-11-16 12:43

泡沫 发表于 2024-11-16 12:17
这个小程序使得图片从清晰到腐蚀的过程一目了然，
居然还有这样的滤镜。。。也是够生态的。。

这个生态学滤镜主要是用来改变图像的形态

红影 发表于 2024-11-16 17:59

马黑黑 发表于 2024-11-15 22:48
提到过，也用过

这个用美女演示挺吓人，无论多美的人，随着时间的流逝，最后也都是一副枯骨{:4_173:}

马黑黑 发表于 2024-11-16 18:28

红影 发表于 2024-11-16 17:59
这个用美女演示挺吓人，无论多美的人，随着时间的流逝，最后也都是一副枯骨

{:4_173:}

泡沫 发表于 2024-11-16 20:43

马黑黑 发表于 2024-11-16 12:42
所以要适可而止

{:4_173:}可以通过这种方法整出一个晕染大背景。。或者纯黑背景
对美人儿的腐蚀必须适可而止，下手得轻

泡沫 发表于 2024-11-16 20:43

马黑黑 发表于 2024-11-16 12:43
这个生态学滤镜主要是用来改变图像的形态

看出来了，跟自然界物品感觉一样一样的。。时间长了都会变化

马黑黑 发表于 2024-11-16 20:45

泡沫 发表于 2024-11-16 20:43
看出来了，跟自然界物品感觉一样一样的。。时间长了都会变化

对的
页: [1] 2
查看完整版本: 镁铝肿么啦