لا أعتقد أن هذا بسبب 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 معدلة ، لكنني غير قادر على تجاوز مشكلة مشاركة الموارد عبر الأصل.

لقد كنت أعمل على تحويل 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 إلى مادة بالحجم المعروض حتى لا تصبح ضبابية.

الفكرة:

• قم بإنشاء لوحة قماشية ثنائية الأبعاد بالحجم الدقيق المطلوب لعارض webgl
• استخدم .drawImage (svg_file، 0، 0) ؛ على القماش ثنائي الأبعاد
• استخدام قماش ثنائي الأبعاد كملمس لعارض webGL

يجب تحديد الحجم باستخدام مصفوفة التحويل العامة بحيث يتم حساب المقياس بشكل صحيح حتى عندما يكون SVGSprite داخل حاوية ذات مقياس. يجب أن يحتوي SVGSprite على وظيفة تحديث حتى يتم إعادة بناء الحساب ولوحة المصدر.

وبهذه الطريقة ، فإن جميع ميزات SVG التي يدعمها المتصفح تعمل بتنسيق pixi وتكون النتيجة غير ضبابية.

FlorianLudwig لذلك شيء مثل https://gist.github.com/biovisualize/8187844 مستخدم مع PIXI.Texture.fromCanvas مع طريقة ما لتحديث نسخة Canvas للصورة إذا تغيرت سمة من سمات SVG مثل mySVG.setAttribute("transform", "scale(50 50)"); ؟

تضمين التغريدة

يدعم مشروع 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 لإجراء +1 للمشاركة الأصلية. سأحذف أي رسائل "+1" في هذا الموضوع لأنها مجرد ضوضاء وتجعل قراءة المحادثة هنا مستحيلة.

لقد قمت بتعديل رمز Texture لدعم هذا ، تأخذ المعلمة الرابعة مقياسًا لـ svg ، مثل هذا:

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

لقد شورت bunnymark ويمكنك اللعب بالميزان بتغيير السطر 66 من JS هنا:
http://codepen.io/anon/pen/pyXMzR.

englercj ، يمكنني إنشاء جيدًا : https://github.com/RanzQ/pixi.js/commit/07522e6dddcdb4741e196ad5f20bb8e534fbb59e

وبهذه الطريقة ، يمكن للمرء تغيير حجم الأنسجة وإعادة تنقيطها في تغيير حجم النافذة بحيث يكون المشهد مستجيبًا ولا يزال يتمتع بالأداء العالي الذي توفره pixi.

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

اندمجت العلاقات العامة ، وأغلق هذا!

هذا يعمل بشكل جيد في Chrome und FF ، لكنه لا يعمل في IE11. حصلت على SecurityError مع هذا السطر من التعليمات البرمجية

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

كيف يمكن اصلاح هذا؟

آه ، خطأ الأمن الجيد. هذا خطأ في IE11 تم إصلاحه في Edge ، ولكن ليس في IE11:

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

لا يوجد شيء يمكنك القيام به ، باستثناء تحويل SVG إلى PNG

جيد ان تعلم. شكرا على التلميح.

صباح 14.12.2017 08:10 schrieb "Sascha Gehlich" [email protected] :

آه ، خطأ الأمن الجيد. هذا خطأ في 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 لعرض صورة SVG كما هو موضح أعلاه ، ولكن يبدو SVG ضبابيًا على الهاتف الذكي.

هنا نموذج كود https://codepen.io/anon/pen/QaxqvP
يبدو الأمر جيدًا على متصفح سطح المكتب ، ولكن عندما أجرب ذلك على هاتفي الذكي أو محاكي android ، فإن SVG يعرض مثل هذا:
https://imgur.com/VbXlypP (الصورة على اليسار هي PIXI-SVG ؛ على اليمين ، هي علامة html img).

ربما يتعلق الأمر بشيء مع devicePixelRatio ، يبدو أن المتصفح "Zooms-in" يناسب الشاشة - لأنه على سطح المكتب إذا قمت بالتكبير يمكنني محاكاة نفس السلوك.
كيف هي الطريقة الصحيحة لإظهار / قياس 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.

تم قفل سلسلة الرسائل هذه تلقائيًا نظرًا لعدم وجود أي نشاط حديث بعد إغلاقه. الرجاء فتح قضية جديدة للأخطاء ذات الصلة.