Ich glaube nicht, dass das daran liegt, dass es sich um SVG handelt, sondern nur, weil Sie es skaliert haben. Die Skalierung in WebGL ist standardmäßig bikubisch und in Canvas linear. Was bedeutet, dass es verschwommen sein wird. Sie sollten das Bild entsprechend dimensionieren und dann rendern.

Pixi.js ist ein Bitmap-Renderer, kein Vektor-Renderer, was bedeutet, dass das Rendern von SVG Ihnen gegenüber beispielsweise png/jpg keinen Vorteil bietet.

Hallo Leute,

@englercj ist richtig. Pixi rastert das SVG, wenn Sie es laden. Es hat derzeit keine wirkliche Unterstützung für SVG. Dies ist etwas, was wir später in Betracht ziehen sollten, falls genügend Nachfrage vorhanden ist.

Vielen Dank!

Dies wieder zu öffnen, da die Leute es offensichtlich wollen, aber noch keinen Meilenstein setzen.

Wenn jemand ein v3-Plugin dafür schreiben möchte, würde ich gerne dabei helfen. Wir haben einige andere großartige Plugins, die wir zuerst machen werden, also kann dies eine Weile dauern, es sei denn, die Community nimmt es auf!

Ändern Sie die Skala auf 1, wie in spriteSVG.scale.set(1);. Bearbeiten Sie das erste Tag in der SVG-Datei... verdoppeln Sie die Größe des Ansichtsfensters wie folgt:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 200 200">

Vielleicht kann jemand dafür eine Routine schreiben und dann aus dem Ergebnis eine Textur erstellen.

Ich hätte eine modifizierte jsfiddle gepostet, kann aber das Problem mit der ursprungsübergreifenden Ressourcenfreigabe nicht überwinden.

Ich habe in den letzten Stunden an einem Konvertierungsding von SVG zu PIXI.Graphics gearbeitet und es funktioniert ziemlich gut:

https://github.com/saschagehlich/pixi-svg-graphics

Eine Demo können Sie hier sehen:
http://filshmedia.net/lab/pixi-svg/
(Der PIXI.Container ist auf 10x skaliert (Original-SVG ist wie 80x80) und ist immer noch knusprig)

Es ist noch nicht vollständig implementiert, aber ich habe es mit ein paar SVG-Dateien ausprobiert und denke, dass dies ein guter Anfang ist. Leider funktioniert die komplexe Geometrie im Moment nicht, aber ich werde mich in den nächsten Tagen damit befassen.

Wenn jemand helfen möchte - kann sich gerne einbringen. :)

+1

Viele Assets in Spielen passen nicht wirklich, dann ist die Vorstellung von allem ein Raster

Mein PIXI-SVG-Graphics-Projekt unterstützt nun auch komplexe Pfade und macht es damit nutzbar. Außerdem habe ich es als Modul auf npm veröffentlicht: https://www.npmjs.com/package/pixi-svg-graphics

Ich würde eine Lösung bevorzugen, die die SVG-Render-Engine des Browsers nutzt, anstatt eine neue Render-Engine zu implementieren.

Meine Idee wäre, eine Unterklasse von Sprite (und/oder BaseTexture) "SVGSprite" zu erstellen. Wenn der webGL-Renderer verwendet wird, muss das SVG auf eine Textur in der angezeigten Größe gerendert werden, damit es nicht unscharf wird.

Die Idee:

• Erstellen Sie eine 2D-Leinwand in der genauen Größe, die für den Webgl-Renderer benötigt wird
• Verwenden Sie .drawImage(svg_file,0, 0); auf der 2D-Leinwand
• Verwenden Sie die 2D-Leinwand als Textur für den webGL-Renderer

Die Größe muss mit der globalen Transformationsmatrix bestimmt werden, damit die Skalierung auch dann korrekt berechnet wird, wenn das SVGSprite ein skalierter Container ist. Das SVGSprite muss über eine Update-Funktion verfügen, damit die Berechnungs- und Quelltextfläche neu erstellt wird.

Auf diese Weise arbeiten alle SVG-Funktionen, die der Browser unterstützt, in pixi und das Ergebnis ist nicht verschwommen.

@FlorianLudwig also so etwas wie https://gist.github.com/biovisualize/8187844 verwendet mit PIXI.Texture.fromCanvas mit einer Möglichkeit, die Canvas-Version des Bildes zu aktualisieren, wenn sich ein Attribut des SVG wie mySVG.setAttribute("transform", "scale(50 50)"); geändert hat

@saschagehlich

Mein PIXI-SVG-Graphics-Projekt unterstützt nun auch komplexe Pfade und macht es damit nutzbar.

es sieht so aus, als ob noch grundlegende Dinge fehlen ?

Diese Art von Code

    var canvas = document.createElement ('canvas');
    canvas.width = ...; canvas.height = ...;
    canvas.getContext ('2d').drawImage (svgImage, 0, 0, canvas.width, canvas.height);

    var sprite = new PIXI.Sprite (new PIXI.Texture (new PIXI.BaseTexture (canvas)));

ermöglicht es, das Sprite mit der erforderlichen Auflösung zu erstellen, ohne svg zu ändern (außer wenn Sie es dehnen möchten, müssen Sie preserveAspectRatio="none" zum SVG-Tag hinzufügen).

Wenn Sie diesem Problem "+1" geben möchten, verwenden Sie bitte GitHub Reactions, um dem ursprünglichen Beitrag +1 zu geben. Ich werde alle "+1"-Nachrichten in diesem Thread löschen, da es nur Rauschen ist und es unmöglich macht, die Konversation hier zu lesen.

Ich habe den Texture-Code geändert, um dies zu unterstützen, der vierte Parameter nimmt eine Skalierung für das SVG an, wie folgt:

new PIXI.Texture.fromImage('bunny.svg', undefined, undefined, 2.0);

Ich habe das Häschenzeichen gegabelt und Sie können mit der Skala spielen, indem Sie die Zeile 66 von JS hier ändern:
http://codepen.io/anon/pen/pyXMzR.

@englercj , ich kann eine PR erstellen, wenn das ok aussieht: https://github.com/RanzQ/pixi.js/commit/07522e6dddcdb4741e196ad5f20bb8e534fbb59e

Auf diese Weise kann man die Texturen bei der Fenstergrößenänderung skalieren und neu rastern, damit die Szene reaktionsschnell ist und immer noch die hohe Leistung hat, die pixi bietet.

PR: https://github.com/pixijs/pixi.js/pull/2614

PR fusioniert, schließt dies!

Das funktioniert in Chrome und FF gut, aber nicht im IE11. Ich habe SecurityError mit dieser Codezeile erhalten

let tiger = new Sprite(new PIXI.Texture.fromImage('images/tiger.svg', true, PIXI.SCALE_MODES.LINEAR, 8.0)); 

Wie kann man das beheben?

Ah der gute alte SecurityError. Das ist ein Fehler in IE11, der in Edge behoben wurde, aber nicht in IE11:

https://github.com/pixijs/pixi.js/issues/2928

Sie können nichts tun, außer Ihr SVG in PNG umzuwandeln

Gut zu wissen. Danke für Hinweis.

Am 14.12.2017 08:10 schrieb "Sascha Gehlich" [email protected] :

Ah der gute alte SecurityError. Das ist ein Fehler in IE11, der behoben wurde in
Edge, aber nicht in IE11:

2928 https://github.com/pixijs/pixi.js/issues/2928

Sie können nichts tun, außer Ihr SVG in PNG umzuwandeln

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/pixijs/pixi.js/issues/936#issuecomment-351627238 oder stumm
der Faden
https://github.com/notifications/unsubscribe-auth/AAu1ZuPEIl_MUskNn1grboYcBl6Vxdxlks5tAMnfgaJpZM4CaLFV
.

Ich versuche, PIXI.Texture.fromImage zu verwenden, um ein SVG-Bild wie oben beschrieben anzuzeigen, aber auf einem Smartphone erscheint das SVG verschwommen.

Hier ein Beispielcode https://codepen.io/anon/pen/QaxqvP
Im Desktop-Browser scheint es in Ordnung zu sein, aber wenn ich dies auf meinem Smartphone- oder Android-Emulator versuche, wird das SVG wie folgt gerendert:
https://imgur.com/VbXlypP (Bild links ist PIXI-SVG; rechts ist ein HTML-Img-Tag).

Vielleicht ist es etwas mit devicePixelRatio, es scheint, dass der Browser "vergrößert" auf den Bildschirm passt - da ich auf dem Desktop beim Vergrößern das gleiche Verhalten emulieren kann.
Wie wird SVG auf einem Gerät mit einem Pixelverhältnis von mehr als 1 richtig angezeigt/skaliert?

Sieht für mich nicht verschwommen aus. Screenshot ist von einem iPhone X.

Zoomen Sie in Ihren Screenshot, Sie werden ihn sehen. Ihre ist weniger verschwommen als meine, aber sie ist verschwommen.

Ich versuche das obige Beispiel, aber aus irgendeinem Grund

let texture = new PIXI.Texture.fromImage('../assets/heart.svg', false, undefined, 2);

wirft

ERROR Error: The SVG image must have width and height defined (in pixels), canvas API needs them.

Wenn ich das Bild zuerst mit lade

PIXI.loader.add("../assets/heart.svg").load(...)

Der Fehler wird nicht ausgegeben, aber das gerenderte Sprite, das die Textur von new PIXI.Texture.fromImage ist komplett verpixelt, was mich glauben lässt, dass das SVG nicht richtig gerendert wird. Außerdem scheint das Ändern von sourceScale keine Auswirkung zu haben.

BEARBEITEN 1

Ich habe gerade gesehen, dass sourceScale keine Auswirkungen hat, wenn eine Textur mit dem Loader geladen wird (https://github.com/pixijs/pixi.js/issues/4543). Ich werde meine Nachforschungen fortsetzen, warum ein Fehler geworfen wird.

BEARBEITEN 2

Die Breite und Höhe meiner SVG wurde wie folgt definiert: <svg width="38.148697mm" height="32.77169mm" ...> . Es stellt sich heraus, dass PIXI einen Fehler ausgibt, wenn die Abmessungen in "mm" angegeben werden. "mm" entfernt und alles funktioniert gut.

@maximedupre Aufgrund von

Dieser Thread wurde automatisch gesperrt, da nach dem Schließen in letzter Zeit keine Aktivität stattgefunden hat. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.