Я не думаю, что это потому, что это SVG, это просто потому, что вы его масштабировали. Масштабирование в WebGL по умолчанию является бикубическим и линейным по холсту. Значит, будет размыто. Вы должны соответствующим образом изменить размер изображения, а затем отрендерить его.

Pixi.js - это средство рендеринга растровых изображений, а не средство рендеринга векторных изображений, а это означает, что рендеринг SVG на самом деле не дает вам никаких преимуществ по сравнению, скажем, с png / jpg.

Эй, ребята,

@englercj правильный. Pixi растрирует SVG, когда вы его загружаете. На данный момент у него нет реальной поддержки svg. Это то, что мы планируем изучить в дальнейшем, если будет достаточный спрос.

Спасибо!

Повторное открытие, поскольку люди, очевидно, этого хотят, но пока не ставят перед собой важную веху.

Если кто-то захочет написать для этого плагин v3, я буду рад помочь с этим. У нас есть еще несколько замечательных плагинов, которые мы сделаем в первую очередь, так что это может занять некоторое время, если сообщество не возьмется за это!

Измените масштаб на 1, как в spriteSVG.scale.set (1) ;. Отредактируйте первый тег в файле SVG ... удвойте размер области просмотра, как показано ниже:

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

Возможно, кто-нибудь сможет написать для этого процедуру, а затем создать текстуру из результата.

Я бы опубликовал измененный jsfiddle, но я не могу решить проблему совместного использования ресурсов Cross-Origin.

Я работал над преобразованием SVG в PIXI.Graphics последние пару часов, и он работает довольно хорошо:

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

Вы можете увидеть демо здесь:
http://filshmedia.net/lab/pixi-svg/
(PIXI.Container масштабируется до 10x (исходный SVG имеет размер 80x80), и он все еще хрустящий)

Он еще не реализован полностью, но я попробовал это с парой файлов SVG, и я думаю, что это хорошее начало. К сожалению, сложная геометрия сейчас не работает, но я займусь этим в ближайшие пару дней.

Если кто-то хочет помочь - не стесняйтесь вносить свой вклад. :)

+1

множество ресурсов в играх не совсем подходят, тогда представление обо всем - растр

Мой проект PIXI-SVG-Graphics теперь поддерживает сложные пути, что делает его пригодным для использования. Также я опубликовал его как модуль на npm: https://www.npmjs.com/package/pixi-svg-graphics

Я бы предпочел решение, которое использует движок рендеринга SVG браузеров вместо реализации нового движка рендеринга.

Моя идея состояла в том, чтобы создать подкласс Sprite (и / или BaseTexture) «SVGSprite». Если используется средство визуализации webGL, svg необходимо преобразовать в текстуру в отображаемом размере, чтобы он не получился размытым.

Идея:

• создать 2d-холст точного размера, который необходим для рендерера webgl
• используйте .drawImage (svg_file, 0, 0); на 2-м холсте
• использовать 2d холст как текстуру для рендерера webGL

Размер должен быть определен с использованием матрицы глобального преобразования, чтобы масштаб был правильно вычислен, даже когда SVGSprite встроен в масштабированный контейнер. SVGSprite должен иметь функцию обновления, чтобы можно было заново выполнить расчет и исходный холст.

Таким образом, все функции SVG, поддерживаемые браузером, работают в pixi, и результат не размывается.

@FlorianLudwig, так что что-то вроде https://gist.github.com/biovisualize/8187844 используется с PIXI.Texture.fromCanvas с некоторым способом обновления холст-версии изображения, если атрибут SVG изменился как mySVG.setAttribute("transform", "scale(50 50)"); ?

@saschagehlich

Мой проект PIXI-SVG-Graphics теперь поддерживает сложные пути, что делает его пригодным для использования.

похоже, элементарных вещей все еще не хватает ?

Такой код

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

позволяет создать спрайт с требуемым разрешением без изменения svg (кроме случаев, когда вы хотите его растянуть, вы должны добавить preserveAspectRatio="none" в тег svg).

Если вы хотите поставить +1 к этой проблеме, используйте GitHub Reactions, чтобы поставить +1 к исходному сообщению. Я удалю все сообщения «+1» в этой ветке, так как это просто шум и невозможно читать здесь беседу.

Я изменил код текстуры для поддержки этого, 4-й параметр принимает масштаб для svg, например:

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

Я раздвоил bunnymark, и вы можете поиграть со шкалой, изменив строку 66 из JS здесь:
http://codepen.io/anon/pen/pyXMzR.

@englercj , я могу создать PR, если это будет выглядеть нормально: https://github.com/RanzQ/pixi.js/commit/07522e6dddcdb4741e196ad5f20bb8e534fbb59e

Таким образом, можно масштабировать и повторно растрировать текстуры при изменении размера окна, чтобы сцена была отзывчивой и по-прежнему имела высокую производительность, которую обеспечивает pixi.

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

PR слили, закрывая это!

Это хорошо работает в Chrome и FF, но не работает в IE11. Я получил SecurityError с этой строкой кода

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

Как это исправить?

Ах, старый добрый SecurityError. Это ошибка IE11, которая была исправлена ​​в Edge, но не в IE11:

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

Вы ничего не можете сделать, кроме преобразования SVG в PNG.

Хорошо знать. Спасибо за подсказку.

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

Ах, старый добрый SecurityError. Это ошибка IE11, которая была исправлена ​​в
Edge, но не в IE11:

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

Вы ничего не можете сделать, кроме преобразования SVG в PNG.

-
Вы получили это, потому что прокомментировали.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/pixijs/pixi.js/issues/936#issuecomment-351627238 или отключить звук
нить
https://github.com/notifications/unsubscribe-auth/AAu1ZuPEIl_MUskNn1grboYcBl6Vxdxlks5tAMnfgaJpZM4CaLFV
.

Я пытаюсь использовать PIXI.Texture.fromImage для отображения изображения SVG, как вы объяснили выше, но на смартфоне SVG кажется размытым.

Вот пример кода https://codepen.io/anon/pen/QaxqvP
В браузере для настольных компьютеров это нормально, но когда я пробую это на своем смартфоне или эмуляторе Android, SVG отображается следующим образом:
https://imgur.com/VbXlypP (изображение слева - PIXI-SVG; справа - тег HTML img).

Может быть, это что-то с devicePixelRatio, кажется, что браузер «увеличивает масштаб», чтобы соответствовать экрану - поскольку на рабочем столе, если я увеличиваю масштаб, я могу имитировать то же поведение.
Как правильно отображать / масштабировать SVG на устройстве с соотношением пикселей больше 1?

Мне не кажется расплывчатым. Скриншот взят с iPhone X.

Увеличьте свой снимок экрана, вы его увидите. Ваш менее расплывчатый, чем мой, но расплывчатый.

Я пробую приведенный выше пример, но по какой-то причине

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

бросает

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

Если я сначала загружу изображение с помощью

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

Ошибка не возникает, но визуализированный спрайт, содержащий текстуру из new PIXI.Texture.fromImage , весь пикселизирован, что заставляет меня думать, что SVG отображается некорректно. Кроме того, изменение sourceScale похоже, не имеет никакого эффекта.

ИЗМЕНИТЬ 1

Итак, я только что увидел, что sourceScale не действует, когда текстура загружается с помощью загрузчика (https://github.com/pixijs/pixi.js/issues/4543). Я продолжу свое исследование, почему возникает ошибка.

РЕДАКТИРОВАТЬ 2

Ширина и высота моего svg были определены следующим образом: <svg width="38.148697mm" height="32.77169mm" ...> . Оказывается, PIXI выдает ошибку, если размеры указаны в «мм». Убрал "мм" и все работает нормально.

@maximedupre из-за ограничений браузера работают только значения px. Вот почему возникает ошибка, чтобы вы знали, что вам нужно изменить свой svgs.

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.