pixi中的像素化SVG渲染-React，pixi.js和leaflet-pixi-overlay

如何解决pixi中的像素化SVG渲染-React，pixi.js和leaflet-pixi-overlay

我正在使用leaflet-pixi-overlay在传单地图中显示标记。该软件包基于PIXI.js，并提供对pixi API的访问。

我正在导入一些svg文件来创建地图标记，然后在显示之前将其渲染为纹理。我以比我所显示的分辨率更高的分辨率渲染这些svg，希望为PIXI提供“干净”地缩小纹理的机会。但是结果是非常令人失望的，似乎没有任何抗锯齿（捕获的图像不能真正正确地显示出差异，“实时”渲染有很大不同）：

在PIXI之外，其他地方的浏览器呈现的svg看起来不错：

我只是想知道我的渲染步骤是否正常。我结合了不同的svg来创建标记（这里是针脚，白色圆圈和黑色绘图，颜色可变等。），因此，我所要做的步骤比简单的svg所需的步骤更多，但是步骤却简化了是：

• 以更高的分辨率加载纹理

    texture = await PIXI.Texture.fromURL(
      url,{
        resourceOptions: {
          width: 200,},);

• 创建分辨率为200px的中间精灵：

const markerSprite = new PIXI.Sprite(texture);
const renderTexture = PIXI.RenderTexture.create({ 
    width: markerSprite.width,height: markerSprite.height,});

• 渲染

renderer.render(markerSprite,renderTexture,true);

• 我们现在有了一个宽度为200px的纹理。这些被缓存，只计算一次。
• 创建所需大小的精灵（捕获示例中为45px）：

const displaySprite = new PIXI.sprite(renderTexture);
displaySprite.scale.set(/* scale based on desired size */);

我做错什么了吗？当将200px的精灵缩小到45px的像素时，PIXI是否应该给出更好的结果？我的svg绘图没有背景（不透明度为0），这是问题所在（PIXI不知道抗锯齿要做什么）吗？谢谢！

---

编辑09/24

我今天发现，如果将浏览器的显示缩放到200％，刷新，然后再放大到正常的100％，则标记显示就很好了。将页面重新加载到相同的（100％）缩放级别，我的精灵再次被像素化... pixi.JS / react-leaflet / leaflet-pixi-overlay链中的某些内容使这些精灵最初呈现为错误的分辨率。只是不知道发生在哪里：-（