Je ne pense pas que ce soit parce que c'est du SVG, c'est juste parce que vous l'avez mis à l'échelle. La mise à l'échelle dans WebGL est bicubique par défaut et linéaire dans canvas. Ce qui signifie que ce sera flou. Vous devez dimensionner l'image de manière appropriée, puis la rendre.

Pixi.js est un moteur de rendu bitmap, pas un moteur de rendu vectoriel, ce qui signifie que le rendu SVG ne vous donne pas vraiment d'avantage par rapport à png/jpg, par exemple.

Salut les gars,

@englercj a raison. Pixi rastérise le SVG lorsque vous le chargez. Il n'a pas de support réel pour svg pour le moment. C'est quelque chose que nous prévoyons d'étudier plus tard si la demande est suffisante.

Merci!

Rouvrir cela car les gens le veulent évidemment, mais ne pas encore le mettre sur une étape importante.

Si quelqu'un veut écrire un plugin v3 pour cela, je serais heureux de l'aider. Nous avons d'autres plugins géniaux que nous allons créer en premier, donc cela peut prendre un certain temps, à moins que la communauté ne se charge de le faire !

Changez l'échelle à 1, comme dans spriteSVG.scale.set(1);. Modifiez la première balise du fichier SVG... doublez la taille de la fenêtre comme suit :

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

Peut-être que quelqu'un peut écrire une routine pour le faire, puis créer une texture à partir du résultat.

J'aurais posté un jsfiddle modifié, mais je ne parviens pas à surmonter le problème de partage des ressources d'origine croisée.

J'ai travaillé sur une conversion SVG en PIXI.Graphics au cours des dernières heures et cela fonctionne plutôt bien :

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

Vous pouvez voir une démo ici :
http://filshmedia.net/lab/pixi-svg/
(Le PIXI.Container est mis à l'échelle jusqu'à 10x (le SVG original est comme 80x80), et il est toujours croustillant)

Ce n'est pas encore complètement implémenté, mais je l'ai essayé avec quelques fichiers SVG et je pense que c'est un bon début. Malheureusement, la géométrie complexe ne fonctionne pas pour le moment, mais j'y réfléchirai dans les prochains jours.

Si quelqu'un veut aider, n'hésitez pas à contribuer. :)

+1

beaucoup d'actifs dans les jeux ne correspondent pas vraiment, alors la notion de tout est un raster

Mon projet PIXI-SVG-Graphics prend désormais en charge les chemins complexes, ce qui le rend utilisable. Aussi, je l'ai publié sous forme de module sur npm : https://www.npmjs.com/package/pixi-svg-graphics

Je préférerais une solution qui exploite le moteur de rendu SVG du navigateur au lieu d'implémenter un nouveau moteur de rendu.

Mon idée serait de créer une sous-classe de Sprite (et/ou BaseTexture) "SVGSprite". Si le moteur de rendu webGL est utilisé, le svg doit être rendu en une texture dans la taille affichée afin qu'il ne soit pas flou.

L'idée:

• créer un canevas 2D dans la taille exacte qui est nécessaire pour le rendu webgl
• utilisez .drawImage(svg_file,0, 0); sur la toile 2d
• utiliser le canevas 2D comme texture pour le moteur de rendu webGL

La taille doit être déterminée à l'aide de la matrice de transformation globale afin que l'échelle soit calculée correctement même lorsque le SVGSprite est inséré dans un conteneur mis à l'échelle. Le SVGSprite doit avoir une fonction de mise à jour afin que le calcul et le canevas source soient refaits.

De cette façon, toutes les fonctionnalités SVG prises en charge par le navigateur fonctionnent dans pixi et le résultat n'est pas flou.

@FlorianLudwig donc quelque chose comme https://gist.github.com/biovisualize/8187844 utilisé avec PIXI.Texture.fromCanvas avec un moyen de mettre à jour la version canevas de l'image si un attribut du SVG changeait comme mySVG.setAttribute("transform", "scale(50 50)"); ?

@saschagehlich

Mon projet PIXI-SVG-Graphics prend désormais en charge les chemins complexes, ce qui le rend utilisable.

il semble que des choses de base manquent encore ?

Ce genre de 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)));

permet de créer le sprite avec la résolution requise sans altérer svg (sauf si vous voulez l'étirer, alors vous devez ajouter preserveAspectRatio="none" à la balise svg).

Si vous souhaitez "+1" pour ce problème, veuillez utiliser GitHub Reactions pour donner +1 au message d'origine. Je supprimerai tous les messages "+1" dans ce fil car il ne s'agit que de bruit et rend impossible la lecture de la conversation ici.

J'ai modifié le code Texture pour prendre en charge cela, le 4ème paramètre prend une échelle pour le svg, comme ceci :

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

J'ai forké le bunnymark et vous pouvez jouer avec la gamme en changeant la ligne 66 de JS ici :
http://codepen.io/anon/pen/pyXMzR.

@englercj , je peux créer un PR si cela semble correct : https://github.com/RanzQ/pixi.js/commit/07522e6dddcdb4741e196ad5f20bb8e534fbb59e

De cette façon, on peut mettre à l'échelle et re-pixelliser les textures lors du redimensionnement de la fenêtre afin que la scène soit réactive et ait toujours les hautes performances fournies par pixi.

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

PR fusionné, fermant ça !

Cela fonctionne bien dans Chrome et FF, mais ne fonctionne pas dans IE11. J'ai SecurityError avec cette ligne de code

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

Comment régler ceci?

Ah le bon vieux SecurityError. C'est un bogue dans IE11 qui a été corrigé dans Edge, mais pas dans IE11 :

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

Vous ne pouvez rien faire, à part convertir votre SVG en PNG

Bon à savoir. Merci pour l'astuce.

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

Ah le bon vieux SecurityError. C'est un bogue dans IE11 qui a été corrigé dans
Edge, mais pas dans IE11 :

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

Vous ne pouvez rien faire, à part convertir votre SVG en PNG

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/pixijs/pixi.js/issues/936#issuecomment-351627238 , ou muet
le fil
https://github.com/notifications/unsubscribe-auth/AAu1ZuPEIl_MUskNn1grboYcBl6Vxdxlks5tAMnfgaJpZM4CaLFV
.

J'essaie d'utiliser PIXI.Texture.fromImage pour afficher une image SVG comme vous l'avez expliqué ci-dessus, mais sur un smartphone, le SVG semble flou.

Voici un exemple de code https://codepen.io/anon/pen/QaxqvP
Sur le navigateur de bureau, cela semble correct, mais lorsque j'essaie cela sur mon smartphone ou mon émulateur Android, le rendu SVG ressemble à ceci :
https://imgur.com/VbXlypP (l'image à gauche est PIXI-SVG ; à droite, est une balise img html).

Peut-être que c'est quelque chose avec devicePixelRatio, il semble que le navigateur "zoome" pour s'adapter à l'écran - car sur le bureau, si je zoome, je peux émuler le même comportement.
Comment afficher/mettre à l'échelle le SVG sur un appareil avec un rapport de pixels supérieur à 1 ?

Cela ne me semble pas flou. La capture d'écran provient d'un iPhone X.

Zoomez sur votre capture d'écran, vous le verrez. Le tien est moins flou que le mien mais il est flou.

J'essaie l'exemple ci-dessus, mais pour une raison quelconque,

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

jette

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

Si je charge d'abord l'image avec

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

L'erreur n'est pas renvoyée, mais le sprite rendu qui contient la texture de new PIXI.Texture.fromImage est entièrement pixelisé, ce qui me fait croire que le SVG n'est pas rendu correctement. De plus, changer le sourceScale semble n'avoir aucun effet.

MODIFIER 1

Je viens donc de voir que sourceScale n'a aucun effet lorsqu'une texture est chargée avec le loader (https://github.com/pixijs/pixi.js/issues/4543). Je vais continuer mes recherches sur les raisons pour lesquelles une erreur est générée.

MODIFIER 2

La largeur et la hauteur de mon svg étaient définies comme suit : <svg width="38.148697mm" height="32.77169mm" ...> . Il s'avère que PIXI génère une erreur lorsque les dimensions sont spécifiées en "mm". Suppression du "mm" et tout fonctionne bien.

@maximedupre en raison des limitations du navigateur, seules les valeurs px fonctionnent. C'est pourquoi l'erreur est renvoyée afin que vous sachiez que vous devez modifier vos svgs.

Ce fil a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau problème pour les bogues liés.