SVG이기 때문이 아니라 크기를 조정했기 때문이라고 생각합니다. WebGL의 크기 조정은 기본적으로 쌍입방이며 캔버스에서는 선형입니다. 흐릿해질 것이라는 의미입니다. 이미지의 크기를 적절하게 조정한 다음 렌더링해야 합니다.

Pixi.js는 벡터 렌더러가 아니라 비트맵 렌더러입니다. 즉, SVG를 렌더링해도 png/jpg에 비해 이점이 없습니다.

얘들 아,

@englercj 가 맞습니다. Pixi는 SVG를 로드할 때 래스터화합니다. 현재로서는 svg를 실제로 지원하지 않습니다. 이는 수요가 충분하다면 더 자세히 조사할 계획입니다.

감사 해요!

사람들이 분명히 원하지만 아직 이정표에 올리지 않았기 때문에 이것을 다시 엽니다.

누군가 이를 위한 v3 플러그인을 작성하고 싶다면 기꺼이 도와드리겠습니다. 우리는 먼저 만들 다른 멋진 플러그인을 가지고 있으므로 커뮤니티가 그것을 하도록 승인하지 않는 한 시간이 걸릴 수 있습니다!

spriteSVG.scale.set(1);에서와 같이 스케일을 1로 변경합니다. SVG 파일의 첫 번째 태그를 편집합니다... 다음과 같이 뷰포트 크기의 두 배입니다.

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

누군가가 이를 수행하는 루틴을 작성한 다음 결과에서 텍스처를 만들 수 있습니다.

수정된 jsfiddle을 게시했지만 교차 출처 리소스 공유 문제를 해결할 수 없습니다.

나는 지난 몇 시간 동안 SVG에서 PIXI.Graphics로의 변환 작업을 했으며 꽤 잘 작동합니다.

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

여기에서 데모를 볼 수 있습니다.
http://filshmedia.net/lab/pixi-svg/
(PIXI.Container는 최대 10배까지 확장됩니다(원래 SVG는 80x80과 같습니다). 여전히 바삭합니다.)

아직 완전히 구현되지는 않았지만 몇 개의 SVG 파일로 시도했는데 좋은 시작이라고 생각합니다. 불행히도 복잡한 지오메트리는 지금은 작동하지 않지만 앞으로 며칠 안에 살펴보겠습니다.

누군가 돕고 싶다면 - 부담 없이 기여하십시오. :)

+1

게임의 많은 자산이 실제로 맞지 않으면 모든 개념이 래스터입니다.

내 PIXI-SVG-Graphics 프로젝트는 이제 복잡한 경로를 지원하므로 사용할 수 있습니다. 또한 npm에 모듈로 게시했습니다. https://www.npmjs.com/package/pixi-svg-graphics

새로운 렌더 엔진을 구현하는 대신 브라우저 SVG 렌더 엔진을 활용하는 솔루션을 선호합니다.

내 아이디어는 Sprite(및/또는 BaseTexture) "SVGSprite"의 하위 클래스를 만드는 것입니다. webGL 렌더러를 사용하는 경우 svg가 흐릿해지지 않도록 표시된 크기의 텍스처로 렌더링되어야 합니다.

아이디어:

• webgl 렌더러에 필요한 정확한 크기로 2d 캔버스를 만듭니다.
• .drawImage(svg_file,0, 0) 사용; 2D 캔버스에
• webGL 렌더러의 텍스처로 2D 캔버스 사용

크기는 SVGSprite가 크기가 조정된 컨테이너에 포함된 경우에도 크기가 올바르게 계산되도록 전역 변환 행렬을 사용하여 결정해야 합니다. SVGSprite에는 계산 및 소스 캔버스가 다시 실행되도록 업데이트 기능이 있어야 합니다.

이렇게 하면 브라우저가 지원하는 모든 SVG 기능이 pixi에서 작동하고 결과가 흐릿하지 않습니다.

@FlorianLudwig 그래서 SVG의 속성이 mySVG.setAttribute("transform", "scale(50 50)"); 처럼 변경된 경우 이미지의 캔버스 버전을 업데이트하는 몇 가지 방법과 함께 PIXI.Texture.fromCanvas 와 함께 https://gist.github.com/biovisualize/8187844 와 같은 것을 사용합니다. 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를 변경하지 않고 필요한 해상도로 스프라이트를 만들 수 있습니다(확장하려는 경우 제외하고 svg 태그에 preserveAspectRatio="none" 를 추가해야 함).

이 문제를 "+1"하려면 GitHub 반응을 사용하여 원본 게시물을 +1하세요. 이 스레드에서 "+1" 메시지는 소음일 뿐이며 여기에서 대화를 읽을 수 없도록 하므로 삭제하겠습니다.

이를 지원하기 위해 텍스처 코드를 수정했습니다. 네 번째 매개변수는 다음과 같이 svg의 크기를 사용합니다.

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

나는 bunnymark를 포크했고 여기에서 JS에서 라인 66을 변경하여 스케일을 가지고 놀 수 있습니다.
http://codepen.io/anon/pen/pyXMzR.

@englercj , 괜찮으면 PR을 생성할 수 있습니다. https://github.com/RanzQ/pixi.js/commit/07522e6dddcdb4741e196ad5f20bb8e534fbb59e

이런 식으로 창 크기 조정 시 텍스처를 조정하고 다시 래스터화하여 장면이 응답하고 pixi가 제공하는 고성능을 계속 유지할 수 있습니다.

홍보: 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)); 

이 문제를 해결하는 방법은 무엇입니까?

아, 좋은 OL' SecurityError. Edge에서는 수정되었지만 IE11에서는 수정되지 않은 IE11의 버그입니다.

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

SVG를 PNG로 변환하는 것 외에는 할 수 있는 일이 없습니다.

알아 둘만 한. 힌트를 주셔서 감사합니다.

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

아, 좋은 OL' 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
.

위에서 설명한 것처럼 SVG 이미지를 표시하기 위해 PIXI.Texture.fromImage를 사용하려고 하는데 스마트폰에서는 SVG가 흐릿하게 보입니다.

여기 샘플 코드 https://codepen.io/anon/pen/QaxqvP
데스크탑 브라우저에서는 괜찮아 보이지만 스마트폰이나 안드로이드 에뮬레이터에서 이것을 시도하면 SVG가 다음과 같이 렌더링됩니다.
https://imgur.com/VbXlypP (왼쪽 이미지는 PIXI-SVG, 오른쪽은 html img 태그).

아마도 devicePixelRatio와 관련된 것일 수 있습니다. 브라우저가 화면에 맞게 "확대"하는 것 같습니다. 데스크탑에서 확대하면 동일한 동작을 에뮬레이트할 수 있기 때문입니다.
픽셀 비율이 1보다 큰 장치에서 SVG를 표시/크기 조정하는 올바른 방법은 무엇입니까?

흐릿하게 보이지 않습니다. 스크린샷은 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" ...> . 치수가 "mm"로 지정되면 PIXI에서 오류가 발생합니다. "mm"를 제거하고 모든 것이 잘 작동합니다.

@maximedupre 는 브라우저 제한으로 인해 px 값만 작동합니다. 그렇기 때문에 오류가 발생하여 svgs를 수정해야 함을 알 수 있습니다.

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를 여십시오.