pixi-React、pixi.js和传单pixi叠加中的像素化svg渲染

我使用传单像素叠加在传单地图中显示标记。该包基于PIXI.js并提供对PIXI API的访问

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

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

我只是想知道我的渲染步骤是否正常。我将不同的svg组合起来创建一个标记（这里是pindrop、白色圆圈和黑色绘图，颜色可变等等），因此我有比简单的svg需要更多的步骤，但所采取步骤的简化版本是：

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

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

• 渲染它

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

我真的做错什么了吗？当我把200px的精灵缩小到45px的时候，PIXI会有更好的效果吗？我的svg图形没有背景（不透明度为0），这是问题所在（PIXI不知道反别名是什么）？谢谢

---

编辑09/24

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

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

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

renderer.render(markerSprite, renderTexture, true);

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