javascript - pixijs 中的模糊 SVG

Question

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

Here is a sample code

    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);
    }

在桌面浏览器上它似乎没问题，但是当我在我的智能手机或安卓模拟器上尝试这个时，SVG 呈现如下:

(左边的图片是 PIXI-SVG；右边的是 html img 标签)。

也许这与 devicePixelRatio 有关，浏览器似乎“放大”以适合屏幕 - 因为在桌面上如果我放大我可以模拟相同的行为。 我究竟做错了什么？如何正确显示/缩放 SVG？

Answer 1

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

beeTexture = new PIXI.Texture.fromImage

然后它被缩放，不出所料，这看起来很模糊。

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

有关详细信息，请参阅此处的讨论: https://github.com/pixijs/pixi.js/issues/936