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有关，似乎浏览器＆＃34;放大＆＃34;适合屏幕 - 因为在桌面上，如果我放大，我可以模仿相同的行为。我究竟做错了什么？如何显示/缩放SVG的正确方法？

Answer 1

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

beeTexture = new PIXI.Texture.fromImage

然后它被缩放，并且很可能，这看起来很模糊。

您可以为fromImage提供sourceScale参数，以更大比例对其进行栅格化。或者尝试使用PIXI的第三方库之一将SVG渲染为向量。 Google会返回此内容，但看起来并非如此积极维护： https://github.com/bigtimebuddy/pixi-svg

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

pixijs中的模糊SVG

1 个答案: