pixijs 中的模糊 SVG

Question

我正在尝试使用 PIXIJs 库来显示 SVG 图像，但在智能手机上 SVG 看起来很模糊。

这是示例代码

    var $ = window.jQuery;
    var PIXI = window.PIXI;

    $(document).ready(onReady);


    var devicePixelRatio;
    var width =800;
    var height=600;

    var scale = 5;
    var renderer;
    var stage;

    var canvas;

    function onReady() {
        devicePixelRatio = $(window).devicePixelRatio;


        canvas = window.document.createElement("canvas");
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";

        var container = document.getElementById("container");
        container.appendChild(canvas);

        var svgimgtag = document.getElementById("svgimgtag");

        svgimgtag.style.top = 160 + "px";
        svgimgtag.style.left = 500 + "px";
        svgimgtag.style.width = 64 * scale + "px";
        svgimgtag.style.height = 64 * scale + "px";
        svgimgtag.src = 'https://rawgit.com/dentez/848fe2b6a8da7b3a78bacded90bd4f61/raw/89bb179753df9ee3e8b62d8c7a0c7620b6db144e/bee.svg';


        renderer = PIXI.autoDetectRenderer(width , height , {
            backgroundColor: 0xFFFFFF,
            view: canvas,
            resolution: devicePixelRatio
        });

        stage = new PIXI.Stage(0xFFFFFF);

        document.body.appendChild(renderer.view);
        renderer.view.style.position = 'absolute';

        requestAnimationFrame(update);

        beeTexture = new PIXI.Texture.fromImage('https://rawgit.com/dentez/848fe2b6a8da7b3a78bacded90bd4f61/raw/89bb179753df9ee3e8b62d8c7a0c7620b6db144e/bee.svg', undefined, undefined, scale);

        var bee = new PIXI.Sprite(beeTexture);


        bee.anchor.x = 0.5;
        bee.anchor.y = 1;
        bee.position.x = 400;
        bee.position.y = 300;
        //bunny.scale.set(1);
        stage.addChild(bee);
        renderer.resize(width, height);
    }


    function update() {

        renderer.render(stage);
        requestAnimationFrame(update);
    }

在桌面浏览器上似乎没问题，但是当我在智能手机或 Android 模拟器上尝试时，SVG 呈现如下：

（左边的图像是 PIXI-SVG；右边的图像是 html img 标签）。

也许这是 devicePixelRatio 的问题，浏览器似乎会“放大”以适应屏幕 - 因为在桌面上，如果我放大，我可以模拟相同的行为。 我做错了什么？显示/缩放 SVG 的正确方法是怎样的？

Answer 1

这是因为 PIXI 根据此行中 SVG 图像的大小 (64x64) 将 SVG 光栅化为纹理：

beeTexture = new PIXI.Texture.fromImage

然后对其进行缩放，不出所料，它看起来很模糊。

您可以向 fromImage 提供 sourceScale 参数以对其进行更大比例的栅格化。或者尝试 PIXI 的第三方库之一将 SVG 渲染为矢量。谷歌返回了这个，但它看起来维护得并不积极： https://github.com/bigtimebuddy/pixi-svg

请参阅此处的讨论以获取更多信息： https://github.com/pixijs/pixi.js/issues/936

Answer 2

在 SVG 中，我将 viewBox 的宽度和高度相乘（对于 Safari 和视网膜）：

<svg width="68px" height="68px" viewBox="0 0 34 34">

并创建了创建 Sprite 的函数：

export async function getIcon(path: string) {
    const img = await getAsset(path, 'svg');
    const sprite = Sprite.from(img);
    sprite.anchor.set(0.5);
    const size = sprite.bounds.maxX * 2;
    sprite.width = size / 2;
    sprite.height = size / 2;

    return sprite;
}