如何从PNG创建SDF-Icon(在Mapbox中使用)? [英] How can I create SDF-Icon's (used in Mapbox) from PNG?

问题描述

我的任务是更改Mapbox中图标图像的图标颜色.mapbox允许执行此操作的唯一方法是使用sdf-icons(

cycle.png(输出)如下:

但是在将cycle.png用作Image src时，效果并不理想.

代码段:

  const img = new Image();img.addEventListener('load'，()=> {this.mapInstance.addImage('circle-icon'，img，{sdf:true});}， 错误的);img.src =周期； 

我要求任何人，如果我在这里做错了任何事情，或者有没有正确的方法来创建sdf-icon以便正确呈现，请帮助我.

解决方案

经过几天的研究，我认为我找到了解决方案.另外，我想总结一下SDF图标的创建步骤.

首先，首先要说的是 SDF :SDF是一种栅格格式，已针对显示调整大小，重新着色和旋转的栅格图像进行了优化.它们是单色.

用法:这是我第一次与MAPBOX中的SDF互动.

原因是我们无法更改符号层中图标的颜色(如果是svg或普通光栅png)，则必须提供SDF(特殊png)格式才能实现.(

My task is to change the icon-color of an icon-image in Mapbox. The only way mapbox allow to do this is by using sdf-icons(https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color).

By Hour's of searching i couldn't found the easiest way to achieve this. There is an npm module I found is https://www.npmjs.com/package/image-sdf but after using its command on a png to convert it into sdf and then rendering on a map is not giving me finest results.

The command I am using

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

cycle-initial.png(INPUT) is below:

cycle.png(OUTPUT) is below:

But while using the cycle.png as an Image src is not giving the finest results.

Code snippet:

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

I request if anyone, please help me if I am doing anything wrong here, or is there any correct way to create sdf-icon to render correctly.

解决方案

After days of research, I think i found the solution. Also, I want to sum-up creation steps of SDF icon's.

First, thing first what is SDF in simple words: SDF is a raster format that is optimised for displaying resized, recoloured, and rotated raster images. They are single color.

Usage: This is my first interaction with SDF in MAPBOX.

Reason is we cannot change the color of icon(if svg or normal raster png) in symbol layer, you have to provide SDF(specialised png) format in order to achieve it.(https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color)

How to create?

1. Npm module: https://www.npmjs.com/package/image-sdf Command:

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

2. Imagemagick: https://imagemagick.org/script/download.php . ImageMagick allows you to do this with one command:

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

UPDATE

3. There is also third way of achieving this by using older tag of Maki Library, Where there is only one JS file sdf-render.js can convert your source svg to sdf icon. But please note that this Tag(v0.5.0) is using Older version of JSDOM which is not supported now, To execute this file you have to convert the code of this file using svgdom and @svgdotjs/svg.js modules.

More Detail's: Box is appearing around Icons in Mapbox on sdf = true

What i was doing wrong?

Answer: Before executing the image-sdf command on a png(Please note: it has to be black & white raster path). Resize(Increase) it to around 40-50%.

Like in my case, I resized the normal raster png and the result's were amazing. Have a look. (Please note: I didn't change a word in code and used the same image-sdf command)

这篇关于如何从PNG创建SDF-Icon(在Mapbox中使用)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！