मुझे नहीं लगता कि ऐसा इसलिए है क्योंकि यह एसवीजी है, यह सिर्फ इसलिए है क्योंकि आपने इसे बढ़ाया है। WebGL में स्केलिंग डिफ़ॉल्ट रूप से बाइबिक है और कैनवास में रैखिक है। यानी यह धुंधला हो जाएगा। आपको छवि को उचित आकार देना चाहिए और फिर उसे प्रस्तुत करना चाहिए।

Pixi.js एक बिटमैप रेंडरर है, वेक्टर रेंडरर नहीं है, जिसका अर्थ है कि SVG को रेंडर करना वास्तव में आपको png/jpg कहने पर कोई लाभ नहीं देता है।

हे लोगों,

@englercj सही है। जब आप इसे लोड करते हैं तो पिक्सी एसवीजी को रास्टराइज करता है। इस समय एसवीजी के लिए इसका कोई वास्तविक समर्थन नहीं है। यह कुछ ऐसा है जिसे हम आगे और नीचे देखने की योजना बना रहे हैं, पर्याप्त मांग होनी चाहिए।

धन्यवाद!

इसे फिर से खोलना क्योंकि लोग स्पष्ट रूप से इसे चाहते हैं, लेकिन इसे अभी तक एक मील के पत्थर पर नहीं रखा है।

अगर कोई इसके लिए 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 पोस्ट किया होगा, लेकिन मैं क्रॉस-ओरिजिनल रिसोर्स शेयरिंग समस्या को दूर करने में असमर्थ हूं।

मैं पिछले कुछ घंटों से SVG से PIXI.Graphics रूपांतरण चीज़ पर काम कर रहा हूं और यह बहुत अच्छी तरह से काम करता है:

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

आप यहां एक डेमो देख सकते हैं:
http://filshmedia.net/lab/pixi-svg/
(PIXI.Container को 10x तक बढ़ाया गया है (मूल SVG 80x80 जैसा है), और यह अभी भी क्रिस्पी है)

यह अभी तक पूरी तरह से लागू नहीं हुआ है, लेकिन मैंने इसे कुछ एसवीजी फाइलों के साथ आजमाया और मुझे लगता है कि यह एक अच्छी शुरुआत है। दुर्भाग्य से जटिल ज्यामिति अभी काम नहीं करती है, लेकिन मैं इसे अगले कुछ दिनों में देखूंगा।

अगर कोई मदद करना चाहता है - योगदान करने के लिए स्वतंत्र महसूस करें। :)

+1

खेलों में संपत्ति का भार वास्तव में फिट नहीं होता है तो हर चीज की धारणा एक रेखापुंज है

मेरा PIXI-SVG-ग्राफिक्स प्रोजेक्ट अब जटिल पथों का समर्थन करता है, जिससे यह प्रयोग करने योग्य हो जाता है। साथ ही, मैंने इसे npm पर एक मॉड्यूल के रूप में प्रकाशित किया: https://www.npmjs.com/package/pixi-svg-graphics

मैं एक ऐसे समाधान को प्राथमिकता दूंगा जो एक नया रेंडर इंजन लागू करने के बजाय ब्राउज़र एसवीजी रेंडर इंजन का लाभ उठाए।

मेरा विचार स्प्राइट (और/या बेसटेक्चर) "एसवीजीस्प्राइट" का उप-वर्ग बनाना होगा। यदि वेबजीएल रेंडरर का उपयोग किया जाता है, तो एसवीजी को प्रदर्शित आकार में एक बनावट में प्रस्तुत किया जाना चाहिए ताकि यह धुंधला न हो।

विचार:

• webgl रेंडरर के लिए आवश्यक सटीक आकार में एक 2d कैनवास बनाएं
• ड्रॉइमेज (svg_file, 0, 0) का उपयोग करें; 2d कैनवास पर
• webGL रेंडरर के लिए बनावट के रूप में 2d कैनवास का उपयोग करें

आकार को वैश्विक परिवर्तन मैट्रिक्स का उपयोग करके निर्धारित किया जाना चाहिए ताकि पैमाने की गणना सही हो, तब भी जब SVGSprite को एक स्केल कंटेनर में डाला जाता है। SVGSprite में एक अद्यतन फ़ंक्शन होना चाहिए ताकि गणना और स्रोत कैनवास फिर से किया जा सके।

इस तरह सभी SVG फीचर ब्राउज़र को पिक्सी में काम करने का समर्थन करते हैं और परिणाम गैर-धुंधला होता है।

@FlorianLudwig तो कुछ ऐसा https://gist.github.com/biovisualize/8187844 के साथ PIXI.Texture.fromCanvas साथ प्रयोग किया जाता है, छवि के कैनवास संस्करण को अपडेट करने के किसी तरीके के साथ यदि एसवीजी की एक विशेषता mySVG.setAttribute("transform", "scale(50 50)"); तरह बदल जाती है

@saschagehlich

मेरा PIXI-SVG-ग्राफिक्स प्रोजेक्ट अब जटिल पथों का समर्थन करता है, जिससे यह प्रयोग करने योग्य हो जाता है।

ऐसा लगता है कि बुनियादी चीजें अभी भी गायब हैं ?

इस तरह का कोड

    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" करना चाहते हैं, तो कृपया मूल पोस्ट को +1 करने के लिए गिटहब प्रतिक्रियाओं का उपयोग करें। मैं इस थ्रेड में किसी भी "+1" संदेशों को हटा दूंगा क्योंकि यह सिर्फ शोर है और यहां बातचीत को पढ़ना असंभव बना देता है।

मैंने इसका समर्थन करने के लिए बनावट कोड को संशोधित किया, चौथा पैरामीटर svg के लिए एक स्केल लेता है, जैसे:

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

मैंने बनीमार्क को फोर्क किया और आप यहां जेएस से लाइन 66 को बदलकर स्केल के साथ खेल सकते हैं:
http://codepen.io/anon/pen/pyXMzR।

@englercj , अगर यह ठीक लगे तो मैं एक पीआर बना सकता हूं: https://github.com/RanzQ/pixi.js/commit/07522e6dddcdb4741e196ad5f20bb8e534fbb59e

इस तरह कोई विंडो आकार बदलने पर बनावट को स्केल और री-रास्टराइज कर सकता है ताकि दृश्य उत्तरदायी हो और अभी भी उच्च प्रदर्शन हो जो पिक्सी प्रदान करता है।

पीआर: https://github.com/pixijs/pixi.js/pull/2614

पीआर विलय, इसे बंद!

यह क्रोम अंड एफएफ में अच्छा काम करता है, लेकिन आईई 11 में काम नहीं करता है। मुझे कोड की इस पंक्ति के साथ सुरक्षा त्रुटि मिली है

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

इसे कैसे ठीक करें?

आह अच्छा राजभाषा 'सुरक्षा त्रुटि। यह IE11 में एक बग है जिसे एज में ठीक किया गया है, लेकिन IE11 में नहीं:

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

आप अपने SVG को PNG में बदलने के अलावा और कुछ नहीं कर सकते हैं

जानकर अच्छा लगा। संकेत के लिए धन्यवाद।

AM 14.12.2017 08:10 schrieb "साशा गेहलिच" नोटिफिकेशन @github.com:

आह अच्छा राजभाषा 'सुरक्षा त्रुटि। यह IE11 में एक बग है जिसे में ठीक किया गया है
एज, लेकिन 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 का उपयोग करने की कोशिश कर रहा हूं जैसा आपने ऊपर बताया है, लेकिन स्मार्टफोन पर एसवीजी धुंधला लगता है।

यहाँ एक नमूना कोड https://codepen.io/anon/pen/QaxqvP
डेस्कटॉप ब्राउज़र पर यह ठीक लगता है, लेकिन जब मैं इसे अपने स्मार्टफोन या एंड्रॉइड एमुलेटर पर आज़माता हूं तो एसवीजी इस तरह प्रस्तुत करता है:
https://imgur.com/VbXlypP (बाईं ओर की छवि PIXI-SVG है; दाईं ओर, एक html img टैग है)।

शायद यह डिवाइस पिक्सेल अनुपात के साथ कुछ है, ऐसा लगता है कि ब्राउज़र "ज़ूम-इन" स्क्रीन को फिट करने के लिए - डेस्कटॉप पर अगर मैं ज़ूम-इन करता हूं तो मैं उसी व्यवहार का अनुकरण कर सकता हूं।
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 से बनावट शामिल है, सभी पिक्सेलयुक्त हैं, जो मुझे विश्वास दिलाता है कि एसवीजी सही ढंग से प्रस्तुत नहीं किया गया है। इसके अलावा, sourceScale को बदलने से कोई प्रभाव नहीं पड़ता है।

संपादित करें 1

इसलिए मैंने अभी देखा कि लोडर के साथ बनावट लोड होने पर sourceScale का कोई प्रभाव नहीं पड़ता है (https://github.com/pixijs/pixi.js/issues/4543)। मैं अपना शोध जारी रखूंगा कि त्रुटि क्यों फेंकी गई है।

संपादित करें 2

मेरे svg की चौड़ाई और ऊंचाई को इस प्रकार परिभाषित किया गया था: <svg width="38.148697mm" height="32.77169mm" ...> । पता चलता है कि जब आयाम "मिमी" में निर्दिष्ट होते हैं तो PIXI एक त्रुटि फेंकता है। "मिमी" हटा दिया और सब कुछ ठीक काम करता है।

ब्राउज़र सीमाओं के कारण @maximedupre , केवल px मान काम करते हैं। यही कारण है कि त्रुटि फेंक दी गई है ताकि आप जान सकें कि आपको अपने svgs को संशोधित करने की आवश्यकता है।

इस थ्रेड को स्वचालित रूप से लॉक कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।