No creo que esto se deba a que sea SVG, solo a que lo escalaste. La escala en WebGL es bicúbica de forma predeterminada y lineal en el lienzo. Lo que significa que estará borroso. Debe dimensionar la imagen de manera adecuada y luego renderizarla.

Pixi.js es un renderizador de mapa de bits, no un renderizador de vectores, lo que significa que renderizar SVG realmente no le brinda ningún beneficio sobre, digamos, png / jpg.

Hola chicos,

@englercj es correcto. Pixi rasteriza el SVG cuando lo carga. No tiene soporte real para svg en este momento. Esto es algo que planeamos analizar más adelante en caso de que haya suficiente demanda.

¡Gracias!

Reabrir esto ya que la gente obviamente lo quiere, pero aún no lo pone en un hito.

Si alguien quiere escribir un complemento v3 para esto, me complacerá ayudarlo. Tenemos algunos otros complementos increíbles que crearemos primero, por lo que esto puede tardar un tiempo, a menos que la comunidad se encargue de hacerlo.

Cambie la escala a 1, como en spriteSVG.scale.set (1) ;. Edite la primera etiqueta en el archivo SVG ... duplique el tamaño de la ventana gráfica como se muestra a continuación:

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

Quizás alguien pueda escribir una rutina para hacer esto y luego hacer una textura a partir del resultado.

Habría publicado un jsfiddle modificado, pero no puedo superar el problema de intercambio de recursos de origen cruzado.

He estado trabajando en una conversión de SVG a PIXI. Gráficos durante las últimas horas y funciona bastante bien:

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

Puedes ver una demostración aquí:
http://filshmedia.net/lab/pixi-svg/
(El contenedor PIXI.Container se escala hasta 10x (el SVG original es como 80x80) y sigue siendo crujiente)

Aún no está completamente implementado, pero lo probé con un par de archivos SVG y creo que es un buen comienzo. Desafortunadamente, la geometría compleja no funciona en este momento, pero lo analizaré en los próximos días.

Si alguien quiere ayudar, no dude en contribuir. :)

+1

muchos activos en los juegos no encajan realmente, entonces la noción de todo es un ráster

Mi proyecto PIXI-SVG-Graphics ahora admite rutas complejas, lo que lo hace utilizable. Además, lo publiqué como un módulo en npm: https://www.npmjs.com/package/pixi-svg-graphics

Preferiría una solución que aproveche el motor de renderizado SVG de los navegadores en lugar de implementar un nuevo motor de renderizado.

Mi idea sería crear una subclase de Sprite (y / o BaseTexture) "SVGSprite". Si se usa el renderizador webGL, el svg debe renderizarse con una textura del tamaño mostrado para que no se vuelva borroso.

La idea:

• crear un lienzo 2d en el tamaño exacto que se necesita para el renderizador webgl
• use .drawImage (svg_file, 0, 0); en el lienzo 2d
• use el lienzo 2d como textura para el renderizador webGL

El tamaño debe determinarse utilizando la matriz de transformación global para que la escala se calcule correctamente incluso cuando el SVGSprite se inserta en un contenedor escalado. El SVGSprite debe tener una función de actualización para que se rehaga el cálculo y el lienzo de origen.

De esta manera, todas las funciones SVG que el navegador admite funcionan en pixi y el resultado no es borroso.

@FlorianLudwig, así que algo como https://gist.github.com/biovisualize/8187844 se usa con PIXI.Texture.fromCanvas con alguna forma de actualizar la versión de lienzo de la imagen si un atributo del SVG cambia como mySVG.setAttribute("transform", "scale(50 50)"); ?

@saschagehlich

Mi proyecto PIXI-SVG-Graphics ahora admite rutas complejas, lo que lo hace utilizable.

parece que todavía faltan cosas básicas ?

Este tipo de código

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

permite crear el sprite con la resolución requerida sin alterar svg (excepto si desea estirarlo, debe agregar preserveAspectRatio="none" a la etiqueta svg).

Si desea hacer "+1" en este problema, utilice las reacciones de GitHub para hacer +1 en la publicación original. Eliminaré cualquier mensaje "+1" en este hilo, ya que es solo ruido y hace que sea imposible leer la conversación aquí.

Modifiqué el código de Textura para admitir esto, el cuarto parámetro toma una escala para el svg, así:

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

Bifurqué el bunnymark y puedes jugar con la escala cambiando la línea 66 de JS aquí:
http://codepen.io/anon/pen/pyXMzR.

@englercj , puedo crear un PR si se ve bien: https://github.com/RanzQ/pixi.js/commit/07522e6dddcdb4741e196ad5f20bb8e534fbb59e

De esta manera, uno puede escalar y volver a rasterizar las texturas al cambiar el tamaño de la ventana para que la escena responda y aún tenga el alto rendimiento que proporciona pixi.

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

PR se fusionó, cerrando esto!

Eso funciona bien en Chrome y FF, pero no funciona en IE11. Obtuve SecurityError con esta línea de código

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

¿Cómo arreglar esto?

Ah, el buen SecurityError. Ese es un error en IE11 que se ha corregido en Edge, pero no en IE11:

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

No hay nada que pueda hacer, excepto convertir su SVG a PNG

Bueno saber. Gracias por la pista.

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

Ah, el buen SecurityError. Ese es un error en IE11 que se ha corregido en
Edge, pero no en IE11:

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

No hay nada que pueda hacer, excepto convertir su SVG a PNG

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/pixijs/pixi.js/issues/936#issuecomment-351627238 , o silenciar
la amenaza
https://github.com/notifications/unsubscribe-auth/AAu1ZuPEIl_MUskNn1grboYcBl6Vxdxlks5tAMnfgaJpZM4CaLFV
.

Estoy tratando de usar PIXI.Texture.fromImage para mostrar una imagen SVG como explicó anteriormente, pero en un teléfono inteligente el SVG parece borroso.

Aquí un código de muestra https://codepen.io/anon/pen/QaxqvP
En el navegador de escritorio, parece estar bien, pero cuando pruebo esto en mi teléfono inteligente o emulador de Android, el SVG se renderiza así:
https://imgur.com/VbXlypP (la imagen de la izquierda es PIXI-SVG; a la derecha, es una etiqueta img html).

Tal vez sea algo con devicePixelRatio, parece que el navegador "Zoom-in" para ajustarse a la pantalla - ya que en el escritorio si hago zoom puedo emular el mismo comportamiento.
¿Cómo es la forma correcta de mostrar / escalar SVG en un dispositivo con una proporción de píxeles mayor que 1?

No me parece borroso. La captura de pantalla es de un iPhone X.

Amplíe su captura de pantalla, la verá. Tu está menos borrosa que la mía pero está borrosa.

Estoy probando el ejemplo anterior, pero por alguna razón,

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

lanza

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

Si cargo la imagen primero con

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

El error no aparece, pero el sprite renderizado que contiene la textura de new PIXI.Texture.fromImage está todo pixelado, lo que me hace creer que el SVG no se renderiza correctamente. Además, cambiar sourceScale parece no tener ningún efecto.

EDITAR 1

Así que acabo de ver que sourceScale no tiene ningún efecto cuando se carga una textura con el cargador (https://github.com/pixijs/pixi.js/issues/4543). Continuaré investigando por qué se produce un error.

EDITAR 2

El ancho y alto de mi svg se definieron de la siguiente manera: <svg width="38.148697mm" height="32.77169mm" ...> . Resulta que PIXI arroja un error cuando las dimensiones se especifican en "mm". Eliminado el "mm" y todo funciona bien.

@maximedupre debido a las limitaciones del navegador, solo funcionan los valores de px. Es por eso que se lanza el error para que sepa que necesita modificar su svgs.

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de que se cerró. Abra un nuevo problema para errores relacionados.