Não acho que seja porque é SVG, apenas porque você o dimensionou. O dimensionamento no WebGL é bicúbico por padrão e linear na tela. O que significa que ficará embaçado. Você deve dimensionar a imagem apropriadamente e então renderizá-la.

Pixi.js é um renderizador de bitmap, não um renderizador vetorial, o que significa que renderizar SVG não oferece nenhum benefício em comparação a, digamos, png / jpg.

Ei pessoal,

@englercj está correto. Pixi rasteriza o SVG quando você o carrega. Ele não tem suporte real para SVG no momento. Isso é algo que planejamos examinar mais adiante, caso haja demanda suficiente.

Obrigado!

Reabrir isso, já que as pessoas obviamente querem, mas ainda não estão colocando-o em um marco.

Se alguém quiser escrever um plugin v3 para isso, ficarei feliz em ajudá-lo. Temos alguns outros plug-ins incríveis que faremos primeiro, então pode demorar um pouco, a menos que a comunidade se comprometa a fazê-lo!

Mude a escala para 1, como em spriteSVG.scale.set (1) ;. Edite a primeira tag no arquivo SVG ... duplique o tamanho da janela de visualização, como a seguir:

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

Talvez alguém possa escrever uma rotina para fazer isso e fazer uma textura a partir do resultado.

Eu teria postado um jsfiddle modificado, mas não consigo superar o problema de compartilhamento de recursos entre origens.

Tenho trabalhado em um SVG para PIXI. Conversão de gráficos nas últimas horas e funciona muito bem:

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

Você pode ver uma demonstração aqui:
http://filshmedia.net/lab/pixi-svg/
(O PIXI.Container é dimensionado em até 10x (o SVG original é como 80x80) e ainda é crocante)

Ainda não está totalmente implementado, mas tentei com alguns arquivos SVG e acho que é um bom começo. Infelizmente, a geometria complexa não funciona agora, mas examinarei isso nos próximos dias.

Se alguém quiser ajudar - fique à vontade para contribuir. :)

+1

muitos recursos em jogos realmente não se encaixam, então a noção de tudo é um raster

Meu projeto PIXI-SVG-Graphics agora suporta caminhos complexos, tornando-o utilizável. Além disso, publiquei como um módulo no npm: https://www.npmjs.com/package/pixi-svg-graphics

Eu preferiria uma solução que aproveitasse o mecanismo de renderização SVG do navegador em vez de implementar um novo mecanismo de renderização.

Minha ideia seria criar uma subclasse de Sprite (e / ou BaseTexture) "SVGSprite". Se o renderizador webGL for usado, o svg deve ser renderizado em uma textura no tamanho exibido para que não fique borrado.

A ideia:

• crie uma tela 2d no tamanho exato que é necessário para o renderizador webgl
• use .drawImage (svg_file, 0, 0); na tela 2d
• use a tela 2d como textura para o renderizador webGL

O tamanho deve ser determinado usando a matriz de transformação global para que a escala seja calculada corretamente, mesmo quando o SVGSprite é inserido em um contêiner dimensionado. O SVGSprite deve ter uma função de atualização para que o cálculo e a tela de origem sejam refeitos.

Desta forma, todos os recursos SVG suportados pelo navegador funcionam em pixi e o resultado não é borrado.

@FlorianLudwig então algo como https://gist.github.com/biovisualize/8187844 usado com PIXI.Texture.fromCanvas com alguma forma de atualizar a versão da imagem da tela se um atributo do SVG mudou como mySVG.setAttribute("transform", "scale(50 50)"); ?

@saschagehlich

Meu projeto PIXI-SVG-Graphics agora suporta caminhos complexos, tornando-o utilizável.

parece que ainda faltam coisas 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 criar o sprite com a resolução necessária sem alterar o svg (exceto se você quiser esticá-lo, então você deve adicionar preserveAspectRatio="none" à tag svg).

Se você deseja marcar este problema com +1, use as Reações do GitHub para marcar a postagem original com +1. Vou deletar qualquer mensagem "+1" neste tópico, pois é apenas ruído e torna impossível ler a conversa aqui.

Modifiquei o código da textura para suportar isso, o 4º parâmetro leva uma escala para o svg, assim:

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

Eu bifurquei a marca de coelho e você pode brincar com a escala mudando a linha 66 de JS aqui:
http://codepen.io/anon/pen/pyXMzR.

@englercj , posso criar um PR se estiver certo: https://github.com/RanzQ/pixi.js/commit/07522e6dddcdb4741e196ad5f20bb8e534fbb59e

Desta forma, é possível dimensionar e rasterizar as texturas no redimensionamento da janela para que a cena seja responsiva e ainda tenha o alto desempenho que o pixi oferece.

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

PR mesclado, fechando isso!

Isso funciona bem no Chrome e no FF, mas não funciona no IE11. Eu tenho SecurityError com esta linha de código

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

Como consertar isto?

Ah, o bom e velho SecurityError. Esse é um bug no IE11 que foi corrigido no Edge, mas não no IE11:

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

Não há nada que você possa fazer, exceto converter seu SVG para PNG

Bom saber. Obrigado pela dica.

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

Ah, o bom e velho SecurityError. Esse é um bug no IE11 que foi corrigido no
Edge, mas não no IE11:

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

Não há nada que você possa fazer, exceto converter seu SVG para PNG

-
Você está recebendo isto porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/pixijs/pixi.js/issues/936#issuecomment-351627238 ou mudo
o segmento
https://github.com/notifications/unsubscribe-auth/AAu1ZuPEIl_MUskNn1grboYcBl6Vxdxlks5tAMnfgaJpZM4CaLFV
.

Estou tentando usar PIXI.Texture.fromImage para exibir uma imagem SVG como você explicou acima, mas em um smartphone o SVG parece borrado.

Aqui está um exemplo de código https://codepen.io/anon/pen/QaxqvP
No navegador de desktop parece ok, mas quando tento fazer isso no meu smartphone ou emulador de Android, o SVG é renderizado assim:
https://imgur.com/VbXlypP (a imagem à esquerda é PIXI-SVG; à direita, é uma tag html img).

Talvez seja algo com devicePixelRatio, parece que o navegador "aumenta o zoom" para caber na tela - já que no desktop se eu aumentar o zoom consigo emular o mesmo comportamento.
Qual é a maneira correta de mostrar / dimensionar SVG em um dispositivo com proporção de pixels maior que 1?

Não parece embaçado para mim. A captura de tela é de um iPhone X.

Amplie sua imagem, você verá. O seu está menos desfocado do que o meu, mas está desfocado.

Estou tentando o exemplo acima, mas por algum motivo,

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

arremessa

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

Se eu carregar a imagem primeiro com

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

O erro não é gerado, mas o sprite renderizado que contém a textura de new PIXI.Texture.fromImage está todo pixelado, o que me faz acreditar que o SVG não foi renderizado corretamente. Além disso, alterar sourceScale parece não ter efeito.

EDITAR 1

Acabei de ver que sourceScale não tem efeito quando uma textura é carregada com o carregador (https://github.com/pixijs/pixi.js/issues/4543). Vou continuar minha pesquisa sobre por que um erro é lançado.

EDITAR 2

A largura e a altura do meu svg foram definidas da seguinte maneira: <svg width="38.148697mm" height="32.77169mm" ...> . Acontece que PIXI gera um erro quando as dimensões são especificadas em "mm". Removido o "mm" e tudo funciona bem.

@maximedupre devido às limitações do navegador, apenas funcionam os valores de px. É por isso que o erro é lançado para que você saiba que precisa modificar seus SVGs.

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que ele foi fechado. Abra um novo problema para bugs relacionados.