javascript - 如何从 PNG 创建 SDF-Icon(在 Mapbox 中使用)？

Question

我的任务是更改 Mapbox 中图标图像的图标颜色。 mapbox 允许这样做的唯一方法是使用 sdf-icons(https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color)。
通过一小时的搜索，我找不到实现这一目标的最简单方法。我发现有一个 npm 模块是 https://www.npmjs.com/package/image-sdf但是在 png 上使用它的命令将其转换为 sdf 然后在 map 上渲染并没有给我最好的结果。
我正在使用的命令

image-sdf cycle-initial.png --spread 5 --downscale 1 --color black > cycle.png

cycle-initial.png(INPUT) 如下:

cycle.png(OUTPUT) 如下:

但是，虽然使用 cycle.png 作为 Image src 并没有给出最好的结果。

代码片段:

const img = new Image();
img.addEventListener('load', () => {
            this.mapInstance.addImage('circle-icon', img, { sdf: true });
        }, false);
img.src = cycle;

我请求是否有人，如果我在这里做错了什么，或者是否有任何正确的方法来创建 sdf-icon 以正确呈现，请帮助我。

Answer 1

经过几天的研究，我想我找到了解决方案。另外，我想总结一下 SDF 图标的创建步骤。
首先，什么是自卫队 简单来说:
SDF 是一种光栅格式，针对显示调整大小、重新着色和旋转的光栅图像进行了优化。它们是单色的。
用法:
这是我在 MAPBOX 中与 SDF 的第一次互动。
原因是我们无法更改符号层中图标的颜色(如果是 svg 或普通光栅 png)，您必须提供 SDF(专用 png)格式才能实现它。(https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color)
如何创作？

npm 模块:https://www.npmjs.com/package/image-sdf
命令:

image-sdf input.png --spread 10 --downscale 1 --color black > output.png

Imagemagick:https://imagemagick.org/script/download.php . ImageMagick 允许您使用一个命令来执行此操作:

convert in.png -filter Jinc -resize 400% -threshold 30% \( +clone -negate -morphology Distance Euclidean -level 50%,-50% \) -morphology Distance Euclidean -compose Plus -composite -level 45%,55% -resize 25% out.png

更新

还有第三种方法可以使用较旧的 tag Maki图书馆的，只有一个JS文件sdf-render.js可以将您的源 svg 转换为 sdf 图标。
但请注意，此标签(v0.5.0)使用的是旧版本的 JSDOM，现在不支持，要执行此文件，您必须使用 svgdom 和 @svgdotjs/svg.js 模块转换此文件的代码。

更多细节:
Box is appearing around Icons in Mapbox on sdf = true
我做错了什么？
答:在 png 上执行 image-sdf 命令之前(请注意:它必须是黑白光栅路径)。将其大小调整(增加)到 40-50% 左右。
就像我的情况一样，我调整了普通光栅 png 的大小，结果非常棒。看一看。
(请注意:我没有更改代码中的一个字并使用了相同的 image-sdf 命令)