أفكار عشوائية أخرى (ليست كلها لي):

• نريد حقًا تجنب دعم تنسيق حيث يوجد توقع سابق لتنفيذ ميزات لن تكون فعالة. على سبيل المثال ، سيؤدي تطبيق SVG إلى توقع الناس دعم SVG الكامل بما في ذلك البرمجة النصية و HTML و SMIL وما إلى ذلك.
• يجب أن نصمم تنسيقنا بشكل واضح ومتوافق بشكل وثيق للغاية مع ميزات الأداء في Skia ، على سبيل المثال drawAtlas.

يبدو دعم المتجهات أمرًا ضروريًا لإطار عمل التطبيق الذي يدعم مختلف أحجام وكثافات الشاشات. وإلا ستنتهي برموز تبدو كالتالي:

بدلا من هذا:

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

ذكر كريس هذا أيضًا: يمكننا إجراء بعض معالجة SVG المحدودة في وقت الإنشاء. على سبيل المثال ، قد نقوم بإنشاء عناصر واجهة تعامل رمز MD بناءً على أوصاف SVG. إذا تم ذلك بعناية فقد يوفر ذلك مساحة ويزيد من دقة التصميمات الأصلية.

بالنسبة إلى أيقونات تصميم المواد على وجه التحديد ، يجب علينا التحقق من استخدام خط رمز تصميم المواد.

appsforartists لما يستحق ، لا يستخدم Cocoa ولا android.view تنسيقات متجهة للأيقونات.

abarth لا يفاجئني بشأن iOS - يبدو أنهم بدأوا بشاشة مقاس 3.5 بوصات وحاولوا جاهدًا الحفاظ على هذا النموذج العقلي / بساطة الدقة المدعومة منذ ذلك الحين (انظر: عرض كل iPhone هو نفسه ، أو iPad و iPad mini الأصليان لهما نفس الدقة). لا أعرف الكثير عن تطوير الأجهزة المحمولة ، لكن هذا مثير للدهشة قليلاً لأن Android لا يعتمد على المتجهات.

في أي حال ، يجب ألا تبدو الرموز باسم مستعار كما هو الحال في لقطة الشاشة أعلاه ، وتعتبر المتجهات حلاً جيدًا لاستقلالية الدقة. كيف تختار يا رفاق التنفيذ لحل الرموز الجميلة أمر متروك لك. : مبتسم:

كيف تختار يا رفاق التنفيذ لحل الرموز الجميلة أمر متروك لك.

هل ستكون على استعداد لتقديم مشكلة منفصلة حول مشكلة الحل التي كنت تراها مع الرموز؟ نفذ krisgiesing محلل أصول مدرك للقرار يتعامل مع العديد من الحالات. سيكون من المفيد التعرف على الحالات التي لا يتعامل معها.

إنني أتطلع إلى إضافة بعض الاختبارات لدعم الوعي بالقرار الحالي ، لذا سيكون الآن وقتًا رائعًا لفهم ما إذا كان هناك شيء لا يعمل بشكل صحيح.

يبدو أن 3x بها نسبة بكسل للجهاز 2.6 ، والتي ربما لا نملك أصلًا لها.

أنا أبحث في هذه الحالة المحددة الآن. نسبة البكسل للجهاز 2.625 ؛ نختار الأصل 3.0x ، وهو أمر متوقع. ومع ذلك ، يبدو أن شيئًا ما يحدث أثناء العرض يتسبب في نوع من عناصر التعرج الإضافية. لذلك على الرغم من أن abarth قد أصلح حالة أيقونات التصميم متعدد الأبعاد عن طريق التبديل إلى خط ما ، ما زلت أتحرى نيابة عن أنواع أخرى من أصول الصور التي تحتاج إلى قياس يعتمد على الدقة.

سأفتح خطأ آخر لتتبع هذا لأنه من العرضي لدعم تنسيق متجه.

انظر # 2337

يدعم Android تنسيق "VectorDrawable" الذي يعد مجرد مجموعة فرعية جيدة الأداء من SVG. آمل أن تفكر في استخدام نفس التنسيق ، نظرًا لأنه يحتوي بالفعل على بعض الدعم المجتمعي وأن فريق Android قد اعتبر أداءه مناسبًا على ما يبدو.

تتأثر VectorDrawable بالتأكيد بـ SVG ولكنها ليست مجموعة فرعية. كما أنه يستخدم XML ، والذي يضمن إلى حد كبير أنه لن يكون أكثر تنسيق متجه أداءً يمكن للمرء أن يأتي به. :-)

كان من الخطأ وصف VectorDrawable كمجموعة فرعية صارمة ، ولكن لا يزال يبدو أنه حل وسط متوازن بين ضمان أداء جيد للعرض وسهولة الاستخدام. ترجع مواصفات VectorDrawable بشكل متكرر إلى مواصفات SVG للمناطق الرئيسية مثل بناء جملة بيانات المسار ، مما يسهل كثيرًا تحويل أصول SVG التي يستخدمها العديد من المطورين بالفعل ويشاركونها في VectorDrawables التي تحتويها تطبيقات Android الحالية بالفعل.

لا أستطيع أن أتخيل أن XML هو مانع أداء مهم لأنه يؤثر فقط على التحليل. يبدو لي أن أداء _render_ - نوع الأداء الذي يؤثر على هدف Flutter لتطبيقات 60 إطارًا في الثانية - يعتمد بشكل أكبر على مجموعة عمليات المتجه التي سيتعين على Skia رسمها ، وليس خطوة تحليل يمكن إجراؤها مرة واحدة وتخزينها مؤقتًا.

لا أريد أن أتطرق إلى هذه النقطة ولكن لا يسعني إلا الشعور بأن العمل الخاص بهذا قد تم بالفعل ، وبالتالي لا يلزم تعليقه في مرحلة "ما بعد الإصدار 2.0".

انتهى بنا الأمر باستخدام خط تصميم المواد لأيقونات تصميم المواد. لست على علم بأي عقبات تمنع شخصًا ما من بناء هذا فوق Flutter اليوم باستخدام مكالمات مباشرة dart:ui أو أداة CustomPaint: https://docs.flutter.io/flutter/widgets/CustomPaint-class. لغة البرمجة. ليس لدينا خطط فورية لبناء مثل هذا في الوقت الحالي.

.02 دولار - حتى المتصفحات المبتذلة ( وإطار العمل المنافس React Native ، بغض النظر عن الحل الذي تقدمه هو قرصنة) يمكنها عرض SVG. يتطلب خيار تصدير الصور إنشاء ما لا يقل عن 3 ملفات لكل رمز أو أصل فني لفريقي. هذه ممارسة سيئة مقارنة بملف SVG يمكن عرضه بأي دقة.

للتعليق أعلاه من قبل Hixie ، يجب ألا تمنع التوقعات الموجودة مسبقًا تنفيذ ميزة جديرة بالاهتمام. أفضل أن أكون قادرًا على الحصول على دعم أساسي لشاشة SVG (التي تحل العديد من المشكلات بالنسبة لي ولفريقي) واكتشف أن الخيارات الموسعة غير متوفرة بدلاً من الاعتماد على عدد متزايد باستمرار من ملفات PNG لاستيعاب الزيادة المستمرة عدد درجات دقة الشاشة.

أعود إلى إنشاء خط لفريقي ولكن هذا ليس جيدًا مثل دعم SVG الأصلي لأن تنسيق الخط يضيف تنسيقًا إضافيًا لارتفاع الخط وتباعد الأحرف الذي يجب تعديله في التطبيق. أيضًا ، تريد الخطوط أن يتم عرضها بدقة ثابتة (12 بكسل ، 16 بكسل ، 20 بكسل ، 36 بكسل ...) وهو أيضًا مقيد.

شكرا لك على إطار عمل Flutter الرائع. :)

أود أن أشجع أي شخص يريد دعم SVG لتنفيذ دعم SVG كحزمة Dart لـ Flutter.

للمهتمين ، أود أن أشير إلى https://docs.flutter.io/flutter/dart-ui/dart-ui-library.html وهي مكتبة منخفضة المستوى للرسم.

من الفريق: مكتبة Dart ليست حلاً جيدًا بدرجة كافية. مجرد تمريرها.

يمكنك وضع على ذلك؟ كل إطار عمل Flutter عبارة عن مكتبة Dart. أي شيء ننفذه هنا سيكون على الأرجح مكتبة Dart. ما هي متطلبات "جيد بما فيه الكفاية"؟

مثال على ذلك ، لقد قمت بتطبيق محلل SVG (بسيط ، غير شامل) في Pure-Dart منذ فترة:

https://github.com/matanlurey/svg

قد يكون من التافه إلى حد ما إما:

أ. أنشئ وقت تشغيل SVG -> SvgRenderElement ، والذي يستخدم dart:ui تحت الغطاء.
ب. قم بإنشاء خطوة ترجمة في وقت الإنشاء تقوم بتحويل SVG إلى شيء مثل:

// compiled from star.svg
void drawStarSvg(canvas, width, height) { ... }

@ deborah-ufw ، إذا كنت مهتمًا ، فنحن نحب الدردشة لمعرفة المزيد. هل يمكنك مراسلتي بالبريد الإلكتروني؟

مرحبًا Seth و matanlurey و Hixie - شكرًا جزيلاً على الرد. ربما لست الشخص المناسب للتحدث إليه بعمق ، حيث كان مهندسونا الرئيسيون هم من رفضوا حل Dart الإضافي (مما أدى إلى إنشاء مكتبة ضخمة من ملفات png لتطبيقنا ، مما يجعل معظمنا يتأرجح أيضًا).

أرغب في تمرير الرابط الخاص بمشكلة Github إليهم وأطلب منهم المساهمة بأسباب فنية لتعليقهم (والذي تم تقديمه بشكل ملون أكثر مما مررت به) - سأفعل ذلك بمجرد أن أنتهي من الكتابة.

يمكنهم أيضًا الدردشة مع مهندسينا مباشرةً عبر http://gitter.im/flutter/flutter بالإضافة إلى طرق الاتصال الأخرى المدرجة https://flutter.io/support/ إذا لزم الأمر. :)

سأضيف ذلك في. شكرا لك! :د

هناك طريقة أخرى تتمثل في دمج شيء مثل http://svgpp.org/ على المستوى الأصلي واستخدام نظام المكون الإضافي Flutter للتواصل معه. من المحتمل أن يمنحك هذا أفضل خصائص الحجم / الأداء لدعم SVG الكامل ، ولكن على حساب الحفاظ على التبعية.

ماذا عن البحث عن دعم SVG على مستوى المحرك؟ لا أعتقد أنه من المعقول أو المرغوب فيه توقع الدعم الكامل للمعيار ، ولكن جزءًا من الاستئناف هو دعم الفرق متعددة الوظائف والأدوات الحالية.

لدي انطباع بأن Skia تقدم بعض دعم SVG الأساسي. ألا توجد طريقة لإتاحة هذا لـ Flutter؟

مما يمكنني قوله ، لقد كان تجريبيًا وجزئيًا فقط. هناك مشكلة مفتوحة هنا https://bugs.chromium.org/p/skia/issues/detail؟id=5596 بت مضى عليها أكثر من عام. إنهم يدرجونها أيضًا في خريطة الطريق الخاصة بهم ولكنهم مرة أخرى ليسوا واضحين ما هي الأولوية.

لن يكون من المنطقي دعم SVG على مستوى المحرك لأن ذلك لن يعرض نموذج مستند SVG ، والذي يعد جزءًا أساسيًا من دعم SVG.

إذا كان Flutter يدعم SVG ، فسيكون مع الهدف النهائي المتمثل في دعم SVG الحقيقي حقًا. إنه ضد فلسفة Flutter أن يكون لديك تطبيقات فاترة للميزات.

لا أرى عرض نموذج مستند SVG كجزء أساسي من دعم SVG. سيكون هذا أمرًا رائعًا ولكن ليس ضروريًا لحالات الاستخدام التي أفكر فيها.

نعم ، سيمكن دعم مستوى المكتبة المزيد من الميزات - ولكن إذا كان المحرك نفسه قادرًا على عرض (مجموعة فرعية مهمة من) بيانات SVG ، فمن المفترض أن يكون ذلك كافيًا للسماح بعرض أصول الصور المتجهة التي تم تحديدها بواسطة تلك المجموعة الفرعية من SVG.

من الواضح أن هذه المشكلة أكبر من ذلك ، ولكن سأكون سعيدًا بأخذ أصول SVG الحالية وعرضها بشكل صحيح بدرجات دقة مختلفة دون تحويلها جميعًا إلى صور نقطية ضخمة.

نعم ، سيكون استيراد ملف أصول SVG أمرًا رائعًا حقًا ، لكن مواصفات SVG تزيد عن 800 صفحة. بعد قولي هذا لمجرد استيراد الملفات الثابتة لعرضها على Skia (وهي مكتبة رسومات متجهية) لا ينبغي أن يكون مشكلة. لذلك أنا آخذها. كما هو الحال دائمًا ، لا يمكنني العمل إلا بدوام جزئي في عطلات نهاية الأسبوع ، لذا لن ترى الأشياء على الفور. لدي أيضًا عدد كبير من ملفات SVG لكنهم جميعًا يستخدمون نفس الأشياء (مجموعات الرموز من flaticon) لذلك سأقدر عينات من ملفات SVG من الأشخاص الذين يريدون هذه الميزة.

كارلوس.

لقد كنت أتعامل مع هذا قليلاً بمرور الوقت أيضًا. هذا ما توصلت إليه:

تنفيذ مستوى المحرك

يبدو هذا جذابًا للأسباب التالية:

1. يدعم نظريًا شيئًا مثل image: new AssetImage('graphics/background.svg') للحصول على تحليل كود C / C ++ وترجمة بيانات SVG إلى أوامر عرض Skia
2. مرشح جيد واحد على الأقل يجب أن يكون قادرًا على توصيل Skia بسهولة إلى حد ما (https://github.com/svgpp/svgpp) على مستوى المحرك
3. قد يكون منطق SVG الخاص بـ WebKit رائعًا ولكن يبدو أنه يحتوي على الكثير من التبعيات
4. لا أعتقد أن librsvg سيكون جيدًا جدًا (مقترن بإحكام بالقاهرة ، والانتقال إلى Rust كلغة أساسية - سيحتاج إلى إيجاد طريقة للوصول إلى Skia كخلفية على الأقل)

لكن لديها بعض الصعوبات على الأقل:

• معالجة النص بشكل صحيح
• التعامل بشكل صحيح مع CSS (إذا كان الأمر كذلك؟ ولكن إضافتها ليست مهمة بسيطة)
• يعد توسيع نطاق الدعم للميزات الإضافية (أو السماح للمستخدمين بإضافة دعم أكثر رشاقة للميزات) أمرًا صعبًا.
• يبدو أنه من الصعب جدًا التعامل مع الرسوم المتحركة

تنفيذ مستوى النبال

1. يقدم Flutter's dart:ui الكثير من العناصر الأولية من Skia التي يحتاجها SVG بالفعل
2. أظن أنه سيكون من السهل التعامل مع عرض النص على هذا المستوى مقارنة بمستوى المحرك
3. يجب أن يكون من الأسهل على المزيد من المجتمع صيانته / توسيعه
4. هل يجب أن تكون قادرًا على التعامل مع التفاعل المباشر مع منطق التحليل بتكلفة أقل (ربما للتعامل مع الاستثناءات و / أو الرسوم المتحركة؟)

لكن لديها بعض الصعوبات:

• قد لا يكون أفضل بكثير في دعم CSS
• قد لا تفعل الرسوم المتحركة الداعمة بشكل أفضل
• من المحتمل أن يكون أبطأ (ولكن ربما ليس بما يكفي ليكون مهمًا ، ويمكن تعويضه بواسطة AOT المترجمة SVG إلى رمز Dart)

بيانات الاختبار

بقدر ما تذهب نماذج SVGs ، فمن المحتمل أن يكون من المفيد للغاية تحديد SVGs المدعومة من مجموعة الاختبار 1.1 (أو ، إذا كانت مدعومة جزئيًا ، ماذا عنها مدعومة جزئيًا). يمكن العثور عليها هنا:
https://github.com/w3c/web-platform-tests/tree/master/svg/import

أو هنا مع بعض مقارنات PNG: https://www.w3.org/Graphics/SVG/Test/20110816/

cbazza ، بأي طريقة تفكر في تنفيذ هذا؟ في هذه المرحلة ، أميل أكثر نحو تنفيذ مستوى حزمة Dart.

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

أفكر في "تنفيذ مستوى Dart" فوق dart: ui.

2 حالات استخدام أساسية:

(1) قم بتحميل ملفات svg ذات الأيقونات الثابتة بشيء مثل الخاص بك
"image: new AssetImage ('graphics / background.svg')" ، حيث يكون ملف
يمكن أن يأتي الملف من نظام الملفات أو عبر الشبكة
ديناميكيًا.

(2) دعم svg المستند إلى عنصر واجهة المستخدم مع DSX (بناء مثل JSX)
الذي سيبدو مشابهًا جدًا لـ:
https://github.com/react-native-community/react-native-svg

بخصوص "بيانات الاختبار" أحتاج إلى ملفات حقيقية من الأشخاص الذين يحتاجون إليها
هذا وليس مجموعة اختبار w3. قد يعتمد دعم SVG
بناءً على ما يدعم dart: ui إذا كان ملف svg مقيم يحتوي على
الأشياء التي لا يمكن فعلها باستخدام dart: ui ، سأكون قادرًا على ذلك
اكتشف بسرعة.

كارلوس.

لا أعتقد أننا يجب أن نختار نموذج SVG الأصلي المتفاعل. أرغب في دعم حالات الحياة الواقعية ، أعتقد أن تغطية مجموعة W3 ستمنحنا خطًا أساسيًا أفضل لما ينجح وما لا ينجح ومدى صعوبة تنفيذه)

حسنًا ، يبدو أن هناك بعض سوء الفهم ...
عندما أقوم بذلك (1) ، سيستغرق الأمر ملفات SVG قياسية وسأحاول دعمها قدر الإمكان من خلال dart: ui (Skia).
عندما أفعل (2) ، وهو إنشاء عناصر واجهة تعامل للتعامل مع بنيات مثل SVG ، ستبدو مشابهة جدًا لمكتبة رد فعل - أصلية - svg. هذان شيئان مختلفان جدا.

cbazza ، حالة استخدام svgs في تطبيقنا مخصصة أساسًا لملفات svgs أحادية اللون التي نستخدمها كرموز. فيما يلي رابط لملف مضغوط على Dropbox مع مجموعة مختارة من svgs التي تمثيلية مؤخرًا. https://www.dropbox.com/s/dp38wxc22625cvc/icons.zip؟dl=0

شكرًا على الاهتمام بالمساعدة هنا ، سأكون سعيدًا برؤية المكون الإضافي SVG Flutter وهو ينبض بالحياة!

لقد كتبت أداة تقوم ببعض التحليل البسيط لسلسلة من ملفات SVG إلى حد ما وتفريغ ملفات Dart التي نستخدمها لاحقًا لإظهار الرسوم المتحركة للأيقونات: vitool .

لقد استخدمت هذه الأداة لإنشاء بيانات AnimatedIcons ، يمكنك التحقق من النتيجة عن طريق تشغيل تطبيق الاختبار اليدوي ( cd dev/manual_tests; flutter run -t lib/animated_icons.dart ).

إنه بعيد عن أن يكون مثاليًا أو كاملًا ، ولكنه يعمل مع المجموعة الحالية من الرموز المتحركة التي لدينا ، ويجب أن يشعر شخص ما بالقدرة على تفرعها / تمديدها.

@ deborah-ufw لهذه الرموز ذات اللون الواحد ، ما يمكنك القيام به هو إنشاء خط رموز ، وإظهار الرموز باستخدام عنصر واجهة المستخدم Icon .

amirh لا يبدو أنه من السهل إنشاء خطوط متجهة ملونة

amirh إذا قرأت الموضوع بالكامل أعلاه ، فإن إنشاء وتحديد الخط باستخدام الحروف الرسومية كرموز هو سلسلة إضافية من الخطوات التي يجب اتخاذها لأن SVG غير مدعوم. يعد دعم SVG أكثر فاعلية من الخط. أيضًا ، zoechi صحيح - أي فن متجه له ألوان متعددة يكاد يكون من المستحيل تحويله إلى خط.

عذرًا - نظرت إلى نماذج الرموز واعتقدت أنك تحتاج فقط إلى رموز ملونة واحدة.

@ deborah-ufw ، شكرًا لك على الملفات ، بالضبط ما كنت أبحث عنه ووجدت بالفعل أشياء لا تحتويها ملفاتي.

amirh ، نعم لقد رأيت عملك الرائع بالفعل ؛)

هل لدينا أخيرًا طريقة مباشرة لإدخال مصدر svg أو سهم متجه xml في الصورة من أجل الرفرفة

Hixie : من فضلك (إعادة) ضع في اعتبارك أنه بالنسبة للفرق المتنقلة المحلية متعددة المنصات ، فهذه نقطة ألم حقيقية ، ولكن هناك حاجة إلى دعم SVG الجزئي والبسيط نسبيًا لحل هذه المشكلة. بالنسبة إلى المشرفين على معايير SVG ، يمكن اعتبار هذا فاترًا ، لكن Flutter مخصص لمطوري الأجهزة المحمولة ، وليس لمؤلفي المعايير العامة. سوف يفوز Flutter بقلوب مطوري الهواتف المحمولة إذا كان يخفف آلامهم الحقيقية ، حتى ولو بطريقة عملية.

يرجى أيضًا مراعاة أنه على الرغم من هذه الحاجة القائمة منذ فترة طويلة ، فقد فشل نهج دعم المجتمع في إنتاج حلول عملية في منافس Flutter Xamarin (في خبرتي التي امتدت لخمس سنوات في Xamarin - لا تستطيع libs التعامل مع عمليات تصدير أدوات التصميم ، فهي محدودة جدًا وليست مستقرة ، مدفوعة و / أو مصدر مغلق).

لهذا السبب ، لست متفائلًا بأن مجتمع Flutter سينجح حيث فشل مجتمع Xamarin. أنا أقدر ذلك عمليًا. الدعم الجزئي لأيقونات SVG هو أمر يمكن لفريق Flutter تقديمه باستخدام بدائل Skia الحالية.

وهذا من شأنه أن يلائم هدف Flutter جيدًا: تمكين مطوري الأجهزة المحمولة من تقديم تجربة مستخدم رائعة وعالية الأداء في وقت قياسي . سيؤدي ذلك إلى تحسين الإنتاجية والقدرة على الأداء والأداء (يتم تحميل SVG بشكل أسرع بكثير من جميع ملفات PNG ؛ عادةً ما يكون لأيقونة SVG تكلفة حسابية متواضعة لأن شرط الوضوح المرئي يؤدي غالبًا إلى شكل من التعقيد المتواضع).

الحاجة الأساسية هي لسير عمل منتج من أدوات المصمم الإبداعي الشائعة الاستخدام (مثل Adobe) إلى أيقونات التطبيقات الأصلية القابلة للتطوير.

يعتبر نهج PNG الحالي مضيعة جدًا للإنتاجية وحجم التطبيق ؛ من البدائي جدًا إنشاء وشحن كل رمز في ما يصل إلى 9 صور نقطية ثابتة (6 Android و 3 iOS) والتي تتم معالجتها لاحقًا في وقت التشغيل. تزداد المشكلة بشكل مطرد مع زيادة الدقة في الحجم والاختلاف.
يبرز كإبهام مؤلم في تجربة مطور Flutter المبتكرة والمثمرة. أعتقد أن لدى Flutter فرصة حقيقية للفوز بقلوب وعقول المطورين هنا ،

dnfield أيضًا ، فإن ميزات SVG المذكورة أعلاه والتي تم ذكرها كعقبات للتنفيذ في Flutter هي في تجربتي إما غير ذات صلة أو نادرة بما يكفي بحيث يكون الرجوع إلى PNGs لأصول التصميم هذه إزعاجًا بسيطًا.
لا تهتم: CSS، HTML، SMIL، Document Model، scripting
الرسوم المتحركة والنصوص: نادرة بما يكفي للعودة إلى تقنيات أخرى لذلك

آمل أن يوضح طول هذا التعليق مقدار القيمة التي سيكون لها الحل. هث!

@ VincentH-Net أنا معك 100٪ لأنني أشعر بالألم أيضًا !!! من فضلك أرسل لي بعض ملفات SVG الخاصة بك. ربما كافح Xamarin لتقديم دعم SVG بسبب نقص محرك الرسومات المتجه الذي يمكنه التعامل معه ؛ هذا ليس هو الحال بالنسبة لـ Flutter with Skia ، لذلك أنا متفائل جدًا بأن الحل المجتمعي سيحدث.

FWIW ، Xamarin لديها أيضًا Skia متوفرة في SkiaSharp. يمكن أن يكون SVG خادعًا حتى مع الحد الأدنى من التنفيذ.

لكن cbazza سأكون مهتمًا جدًا بالتعاون معك في هذا الشأن

وعلى صعيد الرسوم المتحركة ، أعتقد أن تمكين Lottie من شأنه أن يرضي الكثير من حالات الاستخدام (وربما يفعل ذلك باستخدام أدوات أفضل للمصممين).

dnfield أعتقد أن رسوم Lottie المتحركة هذه يمكن إعادة بنائها بسهولة كأدوات Flutter

dnfield ، ممتاز ، يمكنك أن تكون الشخص المنخفض المستوى الذي يتعامل مع التغييرات في مستوى المحرك بينما أقوم بعمل المستوى العلوي على عنصر واجهة المستخدم (التحليل غير المتزامن svg ، بناء "الصورة" الذي يمكن تخزينه مؤقتًا وإرساله إلى قماش عند تقديم التحديثات ، إلخ).
نعم ، سيكون عمل Lottie رائعًا لسير عمل المصمم / المطور.
zoechi لماذا إعادة بناء شيء ما يدويًا باستخدام عناصر واجهة المستخدم بينما يمكنك ببساطة استيراد عنصر واجهة مستخدم Lottie يعمل يتعامل مع كل شيء نيابة عنك؟ بعد أن قلت إن هدفي السابق (2) أعلاه سيعمل بشكل رائع مع الرسوم المتحركة لعناصر واجهة المستخدم (ولهذا السبب أريد أن أفعل ذلك أيضًا).

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

وينطبق الشيء نفسه على SVG - نعم ، يمكن للمطور بالتأكيد تحويل بيانات SVG المتجهية إلى Dart ، ولكن من الناحية المثالية يمكنك فقط تضمين مورد رسم متجه (SVG أو لا) وعرضه في وقت التشغيل.

بعبارة أخرى ، أريد أن أكون قادرًا على إخبار المصمم الخاص بي بإنشاء أصل متجه مرة واحدة وأن أكون قادرًا على استخدامه في تطبيق Flutter الخاص بي مع الحد الأدنى من التعديل (وبدون أن يقوم المصمم بتصديره 5 مرات بتنسيقات نقطية مختلفة ستنتهي في النهاية غير صالح بمجرد إصدار Apple أو Samsung لهاتفهم التالي).

تنسيقات خطوط المسح المختلفة

نعم ، هذا يشبه العقد الماضي

قد يكون التحميل يستحق المشاهدة ، ويستخدم Skia لتقديم SVG لـ Xamarin

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

شكرًا ، هذا يبدو جيدًا حقًا ، الشيء الوحيد المفقود هو أنه غير متزامن ؛)

أنا أستخدم الرسوميات المتجهة فقط في تطبيق Android مؤخرًا ، ولا أرى أي عقوبة أداء ملحوظة. الأيقونات حادة وحجم التطبيق أصغر كثيرًا. كما أنه من الأسهل والأسرع اختبار الصور المختلفة. هذا الحل @ 2 ، @ 3 ، @ 4 ، @ 5 ، .... يبدو وكأنه خطوة كبيرة إلى الوراء في مثل هذا الإطار الحديث مثل Flutter.
لا أفهم سبب عدم قدرتك على الذهاب إلى الفريق المسؤول عن الرسوميات الموجهة التي تعمل بنظام android ، واستخدام أفكارهم أو تنفيذها (إن أمكن) لحل هذه المشكلة.

لقد كنت أتجول مع بعض صور SVG التي يتم رسمها على قماش هنا. من المحتمل أن تكون عناصر path هي الأصعب من حيث التنفيذ ، ولكن هناك واجهة برمجة تطبيقات Skia من شأنها أن تساعد حقًا في حالة الكشف عنها. لقد جربت تعريضها في المحرك وسأفتح صفحة علاقات عامة بمجرد أن يكون لدي المزيد من الوقت لتحسينها.

قد تكون الفكرة التقريبية شيئًا يسمح لنا بإنشاء dart:ui Path من سلسلة بيانات SVG ، باستخدام Skia API الموجودة بالفعل للقيام بذلك. الطريقة المقترحة هي static Path Path.parseFromSvgData(String svgData) -> Path

لا يزال هذا يترك بعض العمل حول تحليل التحويلات / السكتات الدماغية / التعبئة المختلفة التي يمكن تطبيقها. أعتقد أنه يمكننا استعارة قدر لا بأس به من ذلك من العمل الذي قام به amirh (لم أستعير كل منطق تحليل المسار الخاص به لأنه يبدو أنه قد يكون له قيود على SkParsePath ولا يجب أن يكون SkParsePath أكثر كفاءة لأنه سيتطلب فقط رحلة واحدة ذهابًا وإيابًا إلى الجانب الأصلي لرسم المسار بدلاً من الرحلات ذهابًا وإيابًا لكل أمر رسم). أنا أيضًا لم ينتهي بي الأمر باستخدام @ matanlurey لأسباب مماثلة.

راجع https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart ، https://github.com/dnfield/flutter_svg (القادر حاليًا على عرض SVGs مدرج في هذا المشروع إلى لوحة قماشية) ، و https://github.com/dnfield/engine/tree/path_svg (والذي يتضمن حاليًا أيضًا العمل المتعلق بـ PathMeasure / PathMetrics الخاص بي لـ Lottie).

مرحبًا dnfield ،

هذا هو رأيي في التنفيذ الأولي الخاص بك. اسمحوا لي فقط أن أقول إن كل ما سأقوله لا ينبغي أن يحدث فرقًا في حماسك وتقدمك في الترميز. كلما فعلت ذلك ، كان ذلك أفضل لأنه يمكننا دائمًا استخدامه لاحقًا.

المشكلة لدي هي معمارية وهذا هو السبب. من أجل أن تستجيب واجهة المستخدم بمعدل 60 إطارًا / ثانية ، يكون لكل إطار 16 مللي ثانية فقط للتشغيل قبل حظر واجهة المستخدم. لذلك لنفترض أن Flutter يستخدم النصف للقيام بهذا الشيء ، وهذا يترك 8 مللي ثانية لمحلل SVG ولا توجد طريقة لتحليل أي ملف SVG وإنشاء صورة في تلك الفترة بغض النظر عن مدى قوة الهاتف / الجهاز اللوحي لديك. لذا فإن أفضل ما يمكنك فعله هو استهداف الأجهزة البطيئة والحصول على رمز غير متزامن قادر على القيام بذلك باستخدام إطارات متعددة ولكن المفتاح هو أن كل إطار يمكن أن يعمل فقط حتى 8 مللي ثانية ومن ثم يجب أن يعود ويلتقط الإطار التالي.

لذلك لا يمكنك تحليل XML باستخدام dart: xml لأنه ليس غير متزامن ، فسيتم حظره حتى يتم تحليل الملف بالكامل. يجب أيضًا أن يكون إنشاء الصورة غير متزامن لأنه لا يمكنك فعل كل شيء في 8 مللي ثانية. لا فائدة من تحسين الكود قبل الأوان ، لذا اكتب أفضل كود يمكن قراءته. لدي خطة ستنجح ولكنها ستستغرق بعض الوقت لذا أريدك أن تستمر كما أنت لأنني أستطيع دائمًا أخذ عملك واستخدامه لاحقًا. يتم توصيل تصميمي بوظيفة تحميل الصور الحالية (AssetImage & NetworkImage) ويحتاج المستخدم فقط إلى تحديد ".svg" بدلاً من ".png".

كارلوس.

cbazza مجرد فكرة: يمكن إجراء الإعراب بشكل منفصل. أعتقد أنه كان هناك بعض العمل الذي تم إنجازه للتمكن من التواصل مع قنوات الرسائل من جهات أخرى غير معزولة عن واجهة المستخدم وتمرير البيانات بين العناصر المعزولة بالإشارة بدلاً من النسخ (لست متأكدًا من الحالة أو التقدم رغم ذلك)

cbazza - شكرا. لا أعتقد أن dart_xml هو الحل الأفضل لهذا ، لكنه يعمل ويسمح ببعض التقدم حول منطق الرسم (ولم أرغب في حظر ذلك تمامًا أثناء العمل على تنفيذ محلل XML غير متزامن). بدأت أيضًا في النظر في تنفيذ ImageProvider ، لكنني أعتقد أنه يمكن أن يكون أحد تفاصيل التنفيذ التي يمكننا حجبها عن المستخدمين.

أنا لست مضبوطًا بأي حال من الأحوال على أي من واجهة برمجة التطبيقات هذه. لكن يمكننا على الأقل البدء في رسم صور SVG ، وربما دعم تلك البسيطة على الهواتف المناسبة.

هل تنوي العمل على واجهة برمجة تطبيقات قراءة / تحليل XML / SVG؟

zoechi - لا يزال بإمكاننا تحقيق استخدام أفضل للذاكرة وربما تحليل الوقت بشكل أفضل باستخدام نموذج قارئ البث.

zoechi ، لقد نظرت إلى العزلات ولكن يمكنك فقط تمرير القيم الأولية (null ، و num ، و bool ، و double ، و String) والقوائم والخرائط ، وليس الكائنات و / أو أشجار الكائنات ، لذلك بدا المسار غير المتزامن أفضل. شيء آخر مثير للاهتمام حول اكتشاف التحليل غير المتزامن لـ xml هو أن المفاهيم ستنطبق على أي معالجة شجرة غير متزامنة ، مثل عنصر واجهة المستخدم أو شجرة العناصر على سبيل المثال. سيؤدي هذا إلى تمكين التسوية غير المتزامنة على سبيل المثال كما في React's Fiber :)

dnfield نعم أنا أعمل على محلل / معالج xml / svg غير متزامن.

أتساءل فقط ، هل يمكن أن يكون عرض SVG باستخدام عرض الويب خيارًا؟

ثقيل جدًا بالنسبة للأزرار البسيطة ولست متأكدًا من أن عرض الويب سيكون قادرًا على التعامل مع تغييرات 60 إطارًا / ثانية. أعني ، لنفترض أننا نقلنا الرمز أو قمنا بتوسيع نطاقه على سبيل المثال.

أنا لست مطور iOS ، لذلك أرى الآن أن iOS 11 يدعم أيضًا أصول المتجهات . إنه ليس SVG ، ولكنه PDF. هل من الأسهل دعم أصول ناقل PDF؟

لا. لدى كوارتز الكثير من الروابط التاريخية مع PDF لنظام العرض الداخلي الخاص بها ، مما يجعل من السهل القيام بذلك على جهاز iOS. Skia ليس عارض PDF ، وسيؤدي تنسيق الملف (IMO) إلى الكثير من الغموض حول ما هو مدعوم وما هو غير مدعوم (مع توفر أدوات غير جيدة لإصلاحه).

يعد PDF أكثر تعقيدًا من SVG ومجموعة PDF / X الفرعية (التي تُستخدم لأصول المتجهات) مصممة للطباعة. أرغب في رؤية ملف PDF يقدم الدعم على Flutter على الرغم من ذلك ، لكن بالنسبة لنا ، دعنا نتمسك بـ SVG.

سأكون سعيدًا بمجموعة فرعية من VectorDrawable من svg (نقطة ، خط ، منحنى ، تعبئة ، نقل). يسمح Flutter لـ RAD ويهدف إلى أن يكون متعدد المنصات حقًا (مع قدوم سطح المكتب) ولكن الآن لا يمكن ذلك. كلا النظامين الأساسيين Android و Apple موجودان على شاشات 60 بوصة + 4HD ، وهناك رسوم متجهة ضرورية.

ملاحظة: عفواً ، ولكن بدون VG ، سوف يتلاشى عملك (فريق الرفرفة) في أعقاب عمل Kotlin محليًا على العديد من الأنظمة الأساسية بما في ذلك iOS. من المؤكد أن موطن لغة Kotlin لا يزال في مرحلة تجريبية ولكن أيضًا Flutter. :(

ohir يرجى توضيح كيفية كتابة عرض عبر النظام الأساسي (رمز واحد) يعمل على كل من iOS و Android مع لغة Kotlin الأصلية. ما لم تكن تنوي عمل نسخة kotlin من رد فعل تجريد عنصر واجهة المستخدم الأصلي؟

دعونا لا نقلل مما سيفعله سكان كوتلن الأصليين لأن الاحتمالات لا حصر لها. حصلت على Flutter من تجاربي لإنشاء شيء مثل Flutter باستخدام Cocos2d-x. يمكنهم استخدام ذلك أيضًا و / أو React Native و / أو Flutter لأن كل شيء مفتوح المصدر ومتاح للتلقيح المتبادل :)

نعم أوافق تمامًا ، حب kotlin واعتماده من المطورين ضخم كما أن التجميع عبر الأنظمة الأساسية يجعل الاحتمالات لا حصر لها. لكن المقارنة بين Flutter beta و Kotlin التجريبي الأصلي لمنصة الهاتف المحمول اليوم لا طائل من ورائها.
على أي حال ، الانحراف عن الموضوع.

lukaspili حتى الآن هناك anko لنظام Android. يمكن أن تعمل تصميماته DSL بشكل سليم أيضًا مع apko و linko و winko * المضمنة في الشجرة الفرعية للنظام الأساسي المعني. ولكن هذا وقت إضافي لمشكلة Flutter VG. [* غير موجود بعد].

شكرا على كل المحادثة العاطفية! نود إبقاء هذه المشكلة مركزة على حالات الاستخدام ومتطلبات تنسيقات المتجهات وواجهات برمجة التطبيقات. شكرا مقدما للبقاء على الموضوع! :)

ما رأي الناس في تقسيم هذا إلى مشكلة لدعم SVG والاحتفاظ بهذه المشكلة لبعض تنسيقات ناقل الرفرفة TBD؟

ومن شأن ذلك أن يكون له معنى بالنسبة لي؛ تمت صياغة الإصدار الأصلي على أنه تنسيق متجه خاص بـ Flutter من نوع ما.

cbazza Hooray للحصول على دعم يشبه svg. لدي مجموعة من svgs غير الأيقونية التي أستخدمها لرسم واجهة المستخدم الكاملة للتطبيق بشكل أساسي. كيف أرسلها لك؟

أرغب في محاولة الانتقال إلى الرفرفة ولكن إنشاء zillion pngs سيؤدي إلى تضخيم حجم التطبيق بشكل خطير ويبدو قبيحًا.

نعم ، من فضلك أرسل لي عنوان URL لإلقاء نظرة على الملفات.

لذا في هذه المرحلة ، على هذه الجبهة ، أتبع نهجًا قائمًا على Flatbuffer. أنا أعمل على تحديد مخطط Flatbuffer الذي يمكنه التقاط أوامر الرسم المتجه - بطريقة أو بأخرى الطريقة التي تلتقط بها Skia المسارات.

يمكنني أن أرى أن هذا شبه قابل للتشغيل المتبادل مع SVG (على سبيل المثال ، لديك SVG -> أداة تحويل Flatbuffer ، أو Android Vector Drawable XML -> Flatbuffer ، والتي يمكن أن تغطي العديد من حالات استخدام SVG) ، وتجنب الكثير من نتائج الأداء التي قمنا بها واجه SVG (نقص في تحليل XML المتدفق ، والحاجة إلى تحليل بيانات مسار SVG ثم إرسالها إلى أصلي شيئًا فشيئًا). لقد تمكنت أيضًا من إنتاج ملفات ثنائية أصغر من تنسيق SVG (على الرغم من أنه يبقى أن نرى مدى جودة ذلك).

يجب أن يكون من الممكن أيضًا إعطاء مزيد من الوضوح مقدمًا في أدوات التحويل حول الميزات غير المدعومة في SVG معين (على سبيل المثال ، "ForeignElements غير مدعوم بواسطة هذا التنسيق").

يمكن إجراء بت تحليل Flatbuffer في Dart أو C ++ - الشيء الوحيد في لعبة dart هو أنه لا يزال من الجيد أن يكون لديك طريقة ما لتجميع الأوامر إلى Skia لبناء المسارات والرسم على Canvas.

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

sandrobilbeisi تقصد مثل https://github.com/amirh/flutter/commit/69de4bbf3177d9766a386c55b27a12619da43a05 ؟

هذا جدير بالملاحظة ... وهناك أيضًا فيتول https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart

لكنني كنت أفكر أكثر كخطوة بناء مثل تلك التي يستخدمها Xcode مع أصول SVG لتسليمات iOS

sandrobilbeisi هل تقصد إنشاء صورة نقطية من svgs أثناء وقت الترجمة؟

راجع للشغل ، تقوم حزمة Xamarin ffimageloading بتخزين الصور النقطية المقدمة مؤقتًا بحيث يتم عرضها مرة واحدة فقط. كما أنه يخزن صور الشبكة والصور التي تم تغيير حجمها مؤقتًا مما يجعلها سريعة حقًا

ليست صورة نقطية ، ولكن Skia التي هي في الأصل محرك رسومات متجه لـ < canvas >
https://skia.org/ (حصلت Google على ps قبل اثني عشر عامًا: http://www.satine.org/archives/2007/03/05/the-skia-source-code-dilemma/)

تقصد تحويل svg إلى تنسيق صورة skia؟

نعم

رابط cbazza لملفات اختبار SVG: https://github.com/slingshotapp/artwork

هل هناك طريقة لتشغيل vitool على مستوى المشروع؟ يمكنني إنشاء الملف الذي تم إنشاؤه ولكنه يحتاج إلى الوصول إلى الكثير من الفئات الخاصة التي تمنعني من إضافة .g.dart إلى مشروعي.

بالإشارة إلى الأداة على <flutter>/dev/tools/vitool : #dart bin/main.dart --asset-name=_$hello --output=here.g.dart ./test_assets/horizontal_bar_relative.svg

emilieroberts شكرًا ولكن هذه الملفات ليست بتنسيق SVG بل بتنسيق متجه android مخصص مشابه جدًا لـ SVG.

cbazza عفوًا ، في الواقع - معظم svgs موجودة هناك الآن :)

cbazza هل يمكنك توضيح ما تقصده باستخدام ناقل android المخصص؟ لديهم علامة <svg ، على عكس عناصر الرسوميات في android.

كل ما يتم عمله باستخدام vitool في الوقت الحالي هو أمر مذهل ، لكنني لم أتمكن من العثور على أي أثر للوثائق في أي مكان. يمكنني كتابته كمثال بـ AnimatedIcons.arrow_menu ، لكن أود أيضًا أن أعرف ما الذي يتطلبه الأمر للقيام بذلك من الأصول من خارج flutter SDK.

fmatosqg أنت على حق ، الكود المستخدم لتشغيل الرسوم المتحركة التي تم إنشاؤها بواسطة vitool خاص بالإطار. السبب هو أنه لا تزال هناك أسئلة مفتوحة حول ما يمكن أن يكون تنسيقًا متجهًا جيدًا لـ Flutter (كما هو متتبع في هذه المشكلة) ، وأردت تجنب واجهة برمجة تطبيقات عامة تدعم أي تنسيق محدد (حيث سيتم الالتزام بهذا التنسيق إذا لا نريد تغيير التغييرات في المستقبل).
يسمح لنا سطح API الحالي لـ AnimatedIcon باستخدام الملفات التي تم إنشاؤها بواسطة vitool داخليًا في إطار العمل ، ولا يزال بإمكاننا استبدال التنفيذ الأساسي وتنسيق المتجه دون كسر أي عميل.

إذا كنت ترغب في إنشاء ملفات باستخدام vitool واستخدامه في مشروعك ، فيمكنك القيام بذلك عن طريق نسخ الكود من packages/flutter/lib/src/material/animated_icons وإدراجه كجزء من مشروعك (وهذا يضمن أيضًا أن مشروعك لن ينكسر إذا نقوم بتغيير الآلات المستخدمة بواسطة AnimatedIcon).

نأسف للإزعاج ونأمل أن نحصل على حل أفضل قريبًا.

تعجبني هذه الفكرة ، خاصة إذا استمر https://github.com/flutter/flutter/issues/13834 . أعتقد أن مثل هذا الشيء لا ينبغي أن يكون جزءًا من SDK متجانسة ، ولكن ليس معنيًا بشكل خاص إذا كانت حزمة رسمية أو مجتمعية.

هناك تنسيق مضغوط لمجموعة فرعية من svg صاغها شخص ما في G. تمثيله الثنائي ويمكن أن يجلب حجم رمز مشغل Android الافتراضي أقل من 100 بايت. كما هو مذكور أعلاه في الخيط - و IMSO - يجب أن تكون نواقل الرسم من واجب Skia ، مع تمرير Flutter لتمثيل أصغر حجمًا متاحًا. من واجب الأدوات تجميع ملفات res/ svg للتنسيق الداخلي.
[ amirh Re: أسئلة مفتوحة حول ما يمكن أن يكون تنسيقًا متجهًا جيدًا ]

إذن FWIW ، في flutter_svg ، قمت بصياغة الكود بحيث يتم تنفيذ كل الرسم بالفعل بواسطة كائنات وسيطة. يعمل العمل المتعلق بـ SVG بشكل أساسي على تعيين SVG لتلك الكائنات. لا يزال هناك عمل يجب القيام به للحصول على هذا التنسيق الوسيط مستقرًا تمامًا (على سبيل المثال ، لقد بدأت في دعم النص ولكنه سيء ​​للغاية الآن).

لقد بدأت في نقل دعم Android Vector Drawables إلى الإطار (مطروحًا منه دعم مراجع الألوان والأنماط الخارجية وما إلى ذلك ، ولم أقم بدعم مسارات القصاصات أو ربما بعض الميزات الأخرى). يجب أن يكون من الممكن تمامًا دعم Shiny بهذه الطريقة أيضًا ، أو أي تنسيق آخر. أحب العمل من خلال SVG من أجله في هذه المرحلة لأنه يساعد في تغطية الكثير من الحالات الشيقة التي يجب دعمها ، لذلك هذا هو تركيزي الأساسي في الوقت الحالي.

بعد قراءة هذا الموضوع - وخيط طويل عن دعم JSX - لا يسعني إلا التفكير في وجود مشكلة تتعلق بالحوكمة. يخاطر فريق Flutter بأن يتم سحبه في آلاف الاتجاهات المختلفة مع مطالبة المطور بما يشعر بأنه مهم. ربما يجب أن يؤسس Flutter مشاريع "حاضنة" ، مثل Apache. يتم تنفيذ الميزات المطلوبة بواسطة المكونات الإضافية ، بطريقة مفتوحة المصدر ، ربما بمساهمات من فريق Flutter أنفسهم. إذا حققت المكونات الإضافية دعمًا وفعالية وشعبية كافية ، فإنها تصبح مرشحة للإدراج في إطار عمل Flutter الأساسي.

أشعر أن هذا سيسمح للمطورين الأكثر صوتًا بوضع "الكود الخاص بهم حيث يوجد الفم" بدلاً من اللجوء إلى الضرب على الصدر والحاجب المعروض هنا ، وسيترك فريق Flutter أكثر حرية في التركيز على الهندسة الأساسية.

أنا أعارض بكل احترام. إذا نظرت إلى المعالم مثل bucket5 ، فستعرف ما الذي يعمل عليه الفريق ، وإذا انتقلت إلى bucket6 ، فأنت تعرف ما يعتبرونه أولوية. كما يمكنك معرفة ما لا يعتبرونه عاجلاً إذا نظرت إلى المعالم الأخرى على الطريق.

كما يجب أن يكون سبب إضافة شيء ما إلى قلب الرفرفة أكثر من "يمكنني عمل مكون إضافي وهو يعمل مع الجميع ويريده الجميع". هذا سبب لإنشاء مكون إضافي ، ولكن ليس كافيًا لإضافته إلى هذا الريبو أو مستودعات الرفرفة الأخرى.

مثال على الأشياء التي لا ينبغي أن تكون مكونات إضافية: الأشياء التي أضافهاdnfield إلى المحرك حتى يتمكن من الاستفادة والاستخدام من المكون الإضافي الذي يمتلكه. لن يكون لمثل هذا البرنامج المساعد أي فرصة للقيام بجميع الميزات التي يفعلها إذا لم تتم إضافتها إلى المحرك.

أن تكون صريحًا أمرًا مهمًا ، لكنه لن يضمن أبدًا استمراره. إن وضع الشفرة في مكان يكون فيه الفم مهم أيضًا ولكنه لا يزال غير كافٍ. يتمتع هذا المشروع بقدر كبير من الشفافية وهم يستمعون بوضوح إلى ما يقوله المطورون ، لكنه ليس ديمقراطية ولا يعني أن التصويت الشعبي سيفوز دون التفكير في العواقب.

نعم ، من فضلك لا تقلق من أن المطورين الذين يعملون على إطار عمل Flutter ستشتت انتباههم بسبب المناقشات حول الأخطاء. :-) نحن نقرأ المناقشات ، ونهتم كثيرًا بآراء الجميع ، ولكن في نهاية اليوم لدينا مبادئ إرشادية واضحة ولن نكتفي بالرد على الأصوات العالية. نقوم بإجراء تحليل دقيق للسوق لتحديد ما يهتم به المجتمع ككل.

محادثة شيقة تترك لي سؤال بسيط. كيف يوصي فريق Flutter بالانتقال من مرحلة التصميم (SVG) إلى الرسومات المتجهة في Flutter؟

lukepighetti يمكنك تجربة https://github.com/dnfield/flutter_svg وتحقق من المسافة التي تستغرقها.

أنا شخصياً لست سعيدًا بالحل المقدم لملفات SVG في Flutter. لقد استخدمت حزمة flutter_svg وأنا لست سعيدًا بها.

يجب دعم دعم SVG محليًا في رأيي في المكتبة القياسية. إذا كنا سنبدأ في استخدام Flutter على شاشات أكبر مثل تطبيقات سطح المكتب ومواقع الويب ، فهذا أمر لا بد منه.

socialmammoth ، هل يمكنك توضيح أوجه القصور التي تراها؟

هناك شيء واحد كنت أفكر فيه منذ فترة وهو ما إذا كان من المجدي دعم تنسيق .skp (SKIAPICT). أعتقد أن هناك أسبابًا وجيهة لعدم القيام بذلك بشكل مباشر - التنسيق غير مضمون ليكون مستقرًا من إصدار إلى إصدار Skia باعتباره الإصدار الكبير.

ومع ذلك ، فإنه يحتوي على بعض الخصائص المثيرة للاهتمام - على وجه الخصوص ، من الممكن الحصول على Chrome / Chromium لإنشاء SKP (ربما من SVG الذي تم تقديمه) ، ومن المحتمل جدًا أننا ندعم بالفعل معظم أو كل أوامر رسم Skia المطلوبة فعليًا تقديم الغالبية العظمى من SKPs.

لقد كنت أخطط لإنشاء نوع حل من نوع الشفرة لمكوِّن SVG الإضافي ، بحيث يمكنك إنشاء رمز Dart / Flutter من ملف SVG. أعتقد في هذه المرحلة أنه قد يكون أكثر إثارة للاهتمام التحقيق في عملية إنشاء SKP إلى Dart - يمكن نقل بعض التعليمات البرمجية المكتوبة لـ Flutter SVG إلى إطار العمل (على سبيل المثال RawPicture والبنية التحتية ذات الصلة ، والتي يتوافق تقريبًا مع RawImage ) ، ويمكننا توصيل شيء ما من شأنه أن يأخذ ناتج SKP (ربما تم إنشاؤه من SVG كما تم تقديمه بواسطة Chrome ، وهو معيار ذهبي تقريبًا لعرض SVG على أي حال). يجب أن يكون من الممكن إنشاء أدوات تتطلب SVG ، واستدعاء Chromium مقطوع الرأس لتقديمه إلى SKP ، ثم تحويل SKP إلى بعض ملفات Dart التي يمكن أن يعرضها Flutter في وقت التشغيل.

إحدى المناطق الكبيرة التي لم يتم حلها هي تحميل رسم متجه ديناميكيًا في وقت التشغيل (على سبيل المثال SvgPicture.network ) ، لكنني مهتم بالتعليقات حول ما إذا كان هذا سيظل حلاً مفيدًا / مقبولًا حتى مع هذا القيد.

أقول هذا أيضًا مع الإيمان بأنه في هذه المرحلة ، لن نحصل أبدًا على دعم "محلي" لـ SVG في Flutter. هذا جزئيًا لأن SVG نفسه لديه الكثير من الأمتعة (XML ، CSS ، القدرة على جلب الأصول الخارجية) التي لا تعد بسيطة للتنفيذ خارج المتصفح / برنامج عرض HTML وستضيف الكثير من الانتفاخ إلى البرامج التي نحاولها لينكمش. يرجع ذلك جزئيًا أيضًا إلى أنه من الممكن تمامًا تنفيذ قدر كبير من SVG دون إجراء أي تغييرات ضخمة على إطار العمل - على الرغم من أن بعض الأشياء ( filterEffect s و textPath s على وجه الخصوص في الوقت الحالي) من المحتمل الاستفادة من بعض التعديلات على المحرك.

أعتقد أن القدرة على تحميل SVGs مباشرة من الشبكة هي فائدة كبيرة حتى لو كان ذلك يعني أننا ندعم فقط مجموعة فرعية من وظائف التنسيق.

يبدو أن وجود تنسيق متجه خاص بـ Flutter يشبه ما يفعله Android باستخدام VectorDrawables ، والذي بينما يعمل بشكل جيد ، فإنه يعني أيضًا أنه لا يمكن الاستفادة من الكثير من الأدوات الموجودة بالفعل لـ SVG. كما أنه يجعل من الصعب تكرار التصميمات بسبب كل تحويلات التنسيق.

أرغب في رؤية Flutter يدعم SVGs محليًا لأن هذا هو ما يتوقعه مطورو الواجهة الأمامية من أطر عملهم في 2018. أود أن يجد مطورو الواجهة الأمامية Flutter متاحًا ، لأنني أريد أن ينمو النظام البيئي.

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

.skp (SKIAPICT) بتنسيق.

نهج مثير للاهتمام IMHO. ولكن بعد ذلك تحتاج أدوات Flutter (على الأقل في AS) إلى التعامل بسلاسة مع التحويل. المصممون معتادون إلى حد ما على القيود التي تفرضها واردات Android الحالية القابلة للرسم ، لذلك سيكونون بالتأكيد قادرين على التعامل مع مجموعة أخرى من المهام والمهام.

بالنسبة للمطور العادي ، يجب أن يقرأ الدليل ما يلي: " اترك رسومات svg هنا ، ضع تعليقًا توضيحيًا هنا ، واستخدمها في الإرادة. إذا لم تلتزم svg بمجموعة SVG الفرعية المدعومة (انظر هنا) المترجم أو المحلل ( flutter analyze ) سيخبرنا لك ما هو الخطأ في svg الخاص بك ". أو شيء من هذا القبيل.

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

الحصول على كروم / كروميوم لتوليدها

جيد لـ PoC والاختبار ، ولكن الحل الحقيقي IMHO قد لا يتطلب مثل هذه التبعية الضخمة - وواحدة يصعب كتابتها كخطوة وسط CI. بالطبع في الإصدار التجريبي ثم "بالطريقة الصعبة" الثانية ، قد يكون الأمر جيدًا - على سبيل المثال. للحصول على رسم متحرك سهل يسمح به skPicture. قد أكون مخطئا. حيث يمتلك المصممون عادةً مجموعة كبيرة من المتصفحات أسفل رفرف الكمبيوتر المحمول. ومع ذلك ، ضع في اعتبارك أن العمل الفني يتغير كثيرًا. ليس فقط في مرحلة النماذج الأولية ولكن أيضًا مع اقتراب وقت الإطلاق والمطورين في حمى صيد الحشرات.

[بمعنى آخر. نحتاج إما إلى أدوات رفرفة تتعامل مع استيراد svg المطابق أو نحتاج إلى طريقة يكون فيها الكروم بالكامل في أيدي المصمم. ليس مطور.]

ملاحظة. قد تعمل طريقة حزمة launcher_icons في البداية: flutter packages pub run flutter_svg_to_skp:main -i path/to/svgs -o path/to/skps .

- بلدي ¢ 2

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

القدرة على تحميل SVGs مباشرة من الشبكة

هذا عمل لحزمة ضخمة منفصلة ستتعامل مع التحقق من الصحة والحلول البديلة
حول حالات عدم التوافق المحتملة والمراوغات التي يقوم بها المنتجون.
أولاً ، احصل على محرك لرسم تنسيق المتجه المقدم من المطور والذي ستستخدمه حزمة "تحميل SVG من الشبكة" بالتأكيد. :)

فقط لكي أكون واضحًا cachapa و ohir - يدعم flutter_svg _ بالفعل_ تحميل SVG عبر الشبكة ( SvgPicture.network ). ومع ذلك ، لن تنتهي هذه الحزمة أبدًا بدعم كامل مواصفات SVG - الهدف هو دعم ما يكفي من المواصفات لتقديم معظم SVGs. إنه يفعل ذلك بالفعل ، مع الاستثناءات الرئيسية في هذه المرحلة وهي fliterEffect s (لذلك لا تمويه ، فلاتر الألوان ، وما إلى ذلك) والكثير من الدعم المتعلق بالنص - ولكن هناك البعض الآخر ( marker s غير مدعوم ، ولا تزال الأنواع المؤكدة لمراجع xlink:href غير مدعومة). هناك أيضًا بعض المشكلات التي لا أقوم بدعمها عمدًا ، مثل مواصفات CSS الكاملة والبرمجة النصية والتفاعلية.

lukepighetti أعتقد أن التوقع موجود بالفعل فقط مع مطوري الواجهة الأمامية على شبكة الإنترنت. تدعم Qt SVG ، ولكن مجموعة فرعية محدودة فقط. يدعم GNOME بشكل أكبر مع librsvg ، ولكن مرة أخرى به بعض المشكلات (ومن الصعب حقًا استخدامه خارج بيئات Linux). أنا متحمس لرؤية ما يحدث مع resvg ، لكنني لا أعرف أي مكتبة GUI تقوم بدمجه.

dnfield لا أريد أن أنتقد عملك لأنك قمت بعمل رائع وأشكرك جزيل الشكر على ذلك. أشعر بخيبة أمل لأن اللون لا يعمل كما هو متوقع. كان علي أن أختار لوني الخاص ، فأنا لست فنانًا ، أنا أيضًا مصاب بعمى الألوان.

يحتاج Flutter إلى دعم SVGs بنفس الطريقة التي تدعمها المتصفحات الحديثة. إنه أمر لا بد منه. نحتاج إلى أن نكون قادرين على استخدام الأصول المنسوخة أو المستوردة مباشرة من صفحة الويب دون تعديل.

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

نحتاج إلى دعم كامل للمواصفات لـ SVGs. أتفق مع lukepighetti . مع Hummingbird ، هذا أمر لا بد منه ، أو سوف يضحك مطورو الويب على Flutter ويمنحونها تمريرة صعبة.

حتى yjbanov يذكرها في مقالته هنا: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8

نظرًا لأن dnfield ذكر " resvg " ، ربما يجب أن يهدفSocialMammoth أيضًا flutter_svg إلى دعم SVG الثابت بدلاً من دعم svg الكامل:
http://www.w3.org/TR/SVG11/feature#SVG -static ،
والذي أعتقد أنه يجب أن يجعل الجميع سعداء.

حتى Chrome لا يدعم جميع ميزات SVG ، ولا سيما عرض النص من اليمين إلى اليسار ، وهو عربات التي تجرها الدواب (دون أي تقدم في السنوات القليلة الماضية). بعبارة أخرى ، لا أعتقد أن دعم SVG الكامل واقعي. يبدو أن SVG-static مجموعة فرعية معقولة. في flutter_svg أفتقد إشارات النص (بما في ذلك النص على المسار) والمرشحات والأقنعة. سيكون من الجيد الحصول على دعم في Flutter لبناء شيء مثل هذا https://drifted.in/horologium-app/

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

يحتاج Flutter إلى دعم SVGs بنفس الطريقة التي تدعمها المتصفحات الحديثة

لا ، يجب أن تكون تطبيقات Flutter بسيطة. لا تتعلق هذه المشكلة بالحزمة القوية للتعامل مع جميع SVG ، فهي تقول صراحة "دعم تنسيق متجه قابل للرسم" (لا يدعم SVG ). الهدف ، كما أفهمه ، حتى الآن هو التخلص من جميع تطبيقات الرفرفة من أصول الصور النقطية قدر الإمكان. وذلك على مستوى المحرك. dnfield قام بعمل رائع عبر حزمة. حان الوقت الآن للحصول على بعض الرسومات المتجهة المتوفرة من Dart دون تضخيم محرك الرفرفة (skia) أو التطبيق نفسه . يبدو استخدام .skp اختيارًا جيدًا لهذا الهدف. إنه يسمح بالفعل بأكثر من نظام Android القابل للرسم وهو موجود بالفعل في المحرك. سوف يستوعب المصممون مجموعة الميزات الخاصة به.

ohir أعتقد أننا نختلف إذن. يعد إطار عمل الواجهة الأمامية الذي لا يدعم ملفات SVG مزحة سيئة حقًا.

حسنًا ، لا أعتقد أن الرفرفة تحتاج إلى أن تكون مفيدة ، لكنها ستكون لطيفة. وإذا لم يكن svg ، من بعض التنسيقات التي يسهل الحصول عليها من تطبيق رسومات المتجهات النموذجي.

يعد SVG أساسًا تنسيق المتجه القياسي الذي يجب استخدامه هنا ولكن لا يمكننا توقع دعم لكل ميزة من ميزات SVG. كان الهدف دائمًا هو دعم الحد الأدنى من أجل استيراد أصول متجه من تطبيقات الرسومات المتجهة النموذجية. ما هي تطبيقات الرسومات المتجهة التي يمكنها قراءة وكتابة .skp ؟

اختباري لمعرفة ما إذا كان تنسيق المتجه موجودًا في كل مكان بدرجة كافية هو ما إذا كان متاحًا في Adobe Illustrator و Affinity Designer و Inkscape. بقدر ما أعرف أن يترك SVG إلى حد كبير. وأنا أوافق على أننا لسنا بحاجة إلى كل ميزة من ميزات SVG. فقط خطوط المسارات الأساسية وتعبئتها جيدة.

لا يمكنني قول هذا بسلطة ولكني أظن أنه سيكون من الأسهل تنفيذ مجموعة فرعية من SVG بدلاً من إقناع تطبيقات الرسومات المتجهة لدعم .skp ؟

lukepighetti : فكرة دان هي استخدام التنسيق الداخلي للمحرك. جوهر هذا الحل هو تحويل SVG إلى التنسيق الذي يفهمه المحرك. لا يهم ما إذا كان Inkscape يعرف هذا التنسيق طالما أن أي محول قابل للتطبيق موجود.

كنت في شك بالأمس ، لكن اليوم ، بعد قليل من البحث ، يبدو لي أن أتمتة الكروم مدعومة جيدًا. إذا كان من الممكن استخدام الكروم بدون رأس مع وكيل تصيير ، فيمكن عمل محول svg->skp أيضًا. ثقيل بعض الشيء ، لكن ميسور التكلفة. الفاكهة المعلقة منخفضة بالفعل ، dnfield :).

كل هذا يتناسب بشكل جيد مع الأهداف التي حددها Hixie منذ ما يقرب من ثلاث سنوات.

dnfield الرجاء تصحيح لي إذا كنت مخطئا.
أفترض أن .skp هو في الأساس التنسيق الثنائي لصورة Skia.

بالنظر إلى أن dart: ui يحتوي أيضًا على غلاف لـ Skia Picture يمكن إنشاؤه من Dart land ، ألا تحتوي محتويات هذه الصور على إمكانات Skia المختلفة؟ في الأساس ، ستستخدم الوظيفة من Chrome جميع وظائف Skia ، في حين أن الوظيفة من dart: ui لن (مقيدًا بما تم توفيره عبر محرك Flutter)؟ غريب نوعًا ما بالنسبة إلى حجة "الأداء" ، أليس كذلك؟ محرك Flutter & dart: تقوم واجهة المستخدم بإزالة Skia التي تم اعتبارها بطيئة (دون إظهار أرقام الأداء) ولكن بعد ذلك يمكنك استخدام كل ذلك إذا كان يأتي عبر ملف Chrome الذي تم إنشاؤه .skp ؟

شيء آخر ، عند استخدام .skp كيف تحدد ألوان الأيقونة ، على سبيل المثال إذا كانت الأيقونة تستخدم لونين أو أكثر؟

ماذا عن الحجة القديمة القائلة باستخدام Dart في Flutter يمكنك التحكم في كل بكسل؟ بالنسبة لي ، حزمة flutter_svg التي تدعم "svg static" هي الطريق الأفضل لأنها ستمكّن الابتكار المستقبلي في Dart land. من خلال تجاوز Dart والسماح لـ C ++ بالتعامل معها ، يبدو أن Dart لا يمكنه اختراقها.

يبدو أن Skia تدعم SVG. لماذا لا يوفر Flutter دعم SVG بشكل مباشر؟

مما يمكنني قوله ، يريد فريق Flutter إبقاء حجم حزمة Skia صغيرًا قدر الإمكان. لم أكن أعلم أن Skia تدعم SVG ، ولكن إذا كانت كذلك ، فهذه مشكلة منخفضة. كملاحظة ، هناك مشكلة أخرى تتعلق بإضافة دعم Lottie لـ Flutter لأن Skia تدعمه.

لا تدعم Skia استيراد الرسومات من SVG ، ولكن لديها بعض الدعم التجريبي لإنشاء SVGs (وهو ليس مفيدًا هنا).

ونعم ، حجم العبوة مصدر قلق.

من فضلك إذا كنت تريد طلب دعم SVG ، فراجع: https://github.com/flutter/flutter/issues/15501

يتعلق هذا الخطأ تحديدًا بدعم الرسومات المتجهة دون دعم SVG.

بالنسبة للأشخاص المهتمين بتنسيق الرسومات المتجهة ، فأنا أشعر بالفضول بشأن حالات الاستخدام الخاصة بك.

أنا على علم بهذه الأمور حتى الآن:

• أيقونات. الصور الثابتة التي قد تحتاج إلى إعادة تلوينها ديناميكيًا (على سبيل المثال ، رمادية عند التعطيل) ، وقد تحتاج إلى مستويات مختلفة من التفاصيل اعتمادًا على حجم العرض المستهدف. من غير المحتمل أن يكون لديك نص.

• الرموز المتحركة: رمزان كما هو موضح أعلاه ، ووصف لكيفية الانتقال بسلاسة من رمز إلى آخر.

• الخلفيات: الصور التي قد تكون أكبر بكثير من الشاشة ، وقد تظهر مع اختلاف المنظر ؛ بشكل عام ، مشاهد بسيطة ذات أشكال وتدرجات وظلال ، من غير المحتمل أن تحتوي على نص.

هل هناك حالات استخدام أخرى تحفزك على استخدام الرسومات المتجهة؟ يرجى وصفها هنا. شكرا.

دعم دقة متعددة برسم واحد ، لا سيما مع التوافق مع الأمام لشاشات ذات دقة أعلى

تطبيقي هو في الأساس رفيق مؤتمر. أريد تضمين خرائط الفندق ، مع إمكانية التحريك والتكبير / التصغير. يعد استخدام البيانات النقطية عالية الدقة أمرًا غير عملي لأسباب تتعلق بالحجم والأداء ؛ رسومات المتجهات مثالية.

في الوقت الحالي ، أستخدم عرض ويب PDF مضمنًا ، وهو أمر غير مريح للغاية ولا يعمل إلا عبر الإنترنت (على الرغم من أنني ربما يمكنني التغلب على ذلك إذا اضطررت إلى ذلك).

• المقابض "ذات المظهر الحقيقي" المخصص لا يمكن تحقيقها عمليًا بدون رسومات متجهة. خاصة تلك التي تدور أو تنحرف أو تذوب القص.

للإضافة إلى ما قاله دان: يمكن أن ينتج عن مصدر ناقل بحجم 1 كيلوبايت فقط تفاصيل دقيقة وصورة سلسة سواء على جهاز لوحي مقاس 7 بوصات أو على تلفاز 105 بوصات 4HD. حالة حديثة من تطبيق Kiosk للتسجيل النقدي لشاشات 10 أو 14 بوصة (مواجهة أمين الصندوق) و 5 أو 7 بوصة (مواجهة للعملاء). مجموعة من 5000+ رسومات متجهة للأشياء الجيدة كان حجمها أقل من 5 ميجابايت. تم تحويل مجموعة فرعية من "الخضار" (حوالي 150) منها إلى pngs لشاشتين مستخدمتين بالضبط أكثر من 30 ميجابايت. قد تنتهي مجموعة المخزون الكاملة في نطاق GBytes.

ملاحظة: الشيء المهم التالي هو الحصول على رسومات متجهة مع تحديد مناطق اللمس ، على سبيل المثال ، عبر تعبئة مختارة. كان هذا من شأنه أن يوفر آلاف الأسطر من التعليمات البرمجية لفئة الواجهات الثابتة في الغالب ولكن الغنية بالتفاصيل.
كما هو الحال في كتيبات مشغلي الآلات التفاعلية.

لنضع الأحلام جانبًا - فقط دع مصممينا يستخدموا الرسومات المتجهة البسيطة أولاً :)

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

ohir هل يمكنك التوسع في "التدوير أو الانحراف أو الذوبان"؟

الحل الذي أجريته لهذا الأمر والذي يسعدني كثيرًا في الواقع هو استخدام الحزمة path_parsing (https://pub.dev/packages/path_parsing) لإنشاء أوامر رسم لوحة الرسم من سلسلة مسار SVG ثم استخدامها لإنشاء أداة CustomPainter ترسمها. بالنسبة لأشكال SVG الأخرى إلى جانب المسارات (مستطيلة ، دائرة ، إلخ) ، قمت فقط بترجمتها يدويًا إلى أوامر رسم وهي مملة بعض الشيء ولكنها ليست صعبة للغاية.

يعمل هذا بشكل جيد مع رموز المتجهات البسيطة ويسمح لك باستخدام نفس الأداة بأحجام وألوان مختلفة في جميع أنحاء التطبيق.

ها هو الكود: https://gist.github.com/jpotterm/7b30739e0af722baf97a397d9841d908

يمكن أن يكون مفيدًا حقًا إذا كانت هناك أداة سطر أوامر رسمية للرفرفة تقوم بتحليل ملف SVG وتنتج أوامر رسم قماشية تؤدي إلى نتيجة مماثلة.

تضمين التغريدة
على سبيل المثال. https://dribbble.com/shots/1083175-Air-conditioning-controller#
يمكن رسم المقبض الدوار المركزي والمقياس المحيط به بدقة باستخدام واجهة برمجة تطبيقات Canvas الحالية ، ولكن يمكن أيضًا أن يتناسب مع حجم 2 كيلو بايت (xml svg) ثم حوالي 300-500 مليار قابل للرسم. إذا تم عرض الرسومات المتجهة والتحولات الأولية من مستوى Skia عبر بعض واجهات "الرسومات المتجهة" ، فيمكن جعل هذا المقبض حيًا فقط من خلال تطبيق التعبئة على مقاطع القياس وتدوير مسار دائرة المؤشر الصغيرة.

الأهم من ذلك هو أن هذا المقبض بالكامل ، مع الألوان والتفاصيل الأخرى ، سيتم رسمه تمامًا كما خطط المصمم - لأنه سيكون كل عملها مدمجًا فقط. قد تبدو واجهة رسومات المتجهات + التعبئة + التدرجات + المصمم الجيد كما يلي: https://www.artua.com/app-design-deckadance/
ستجعل التحولات التقريبية من جانب المطور مثل هذا التصميم مستجيبًا وحيويًا.
أما بالنسبة للتحولات المنحرفة والقص: يمكن على سبيل المثال. تستخدم لنمذجة تحولات ذراع التحكم.
(من المحتمل أن يكون سبب تحويل الكلمات "Melt" هو شبح سلفادور دالي ؛)

/خارج الموضوع/

تضمين التغريدة
يمكن أن يكون مفيدًا حقًا إذا كانت هناك أداة سطر أوامر رسمية للرفرفة تقوم بتحليل ملف SVG وتنتج أوامر رسم قماشية تؤدي إلى نتيجة مماثلة.

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

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

سيكون القيام بذلك بألوان متعددة وبكل كثافات مختلفة أمرًا مروعًا وغير مستدام ويجعل الحزمة النهائية عملاقة. تأتي هذه الصور من رسومات مرسومة باليد.

شكرا للجميع على ملاحظاتك. تعليقات مفيدة جدا.

بالنسبة للأشخاص المهتمين بتنسيق الرسومات المتجهة ، فأنا أشعر بالفضول بشأن حالات الاستخدام الخاصة بك.

حالة استخدام أخرى هي أي شيء يحتاج إلى رسومات ديناميكية:

• الرسوم البيانية
• قضبان التحميل
• رسم
• إلخ

أنا في الواقع مندهش جدًا من أن Flutter لا يدعم ذلك نظرًا لأن Skia تدعم مجموعة فرعية من SVG (الأجزاء المفيدة على أي حال).

أود استخدام صور SVG للفن. يمكن أن يكون حجم الكمبيوتر اللوحي بملء الشاشة PNG عالي الجودة 2 ميغا بايت أو أكثر ، في حين أنه يمكن أن يكون SVG المكافئ 5-10 كيلو بايت. أضف بضع شاشات ، ونحن نتحدث عن 20 ميغا بايت للحزمة بدلاً من 100 كيلو بايت.

بالنسبة للرسومات الآلية ، فأنا من أشد المعجبين بـ CustomPaint لذا لن أستخدم SVG لأشياء مثل المخططات وأشرطة التحميل والرسم وما إلى ذلك. بالنسبة لأولئك المهتمين بواجهة CustomPaint API ، فهي تشبه إلى حد كبير واجهة برمجة تطبيقات HTML Canvas. ونعم ، بينما أوافق على أنه من المكلف كتابة الأشياء في CustomPaint ، فإن ما تحصل عليه في النهاية هو صخر صلب ويتم عرضه بسرعة كبيرة وجميلة للغاية.

إذا كنت ستدعم SVG ، فيجب عليك دعم جميع ميزات SVG ، مثل التدرجات ، والحدود والمزيد. لم يتم ذلك في مشروع Android وهذا يثير بعض التحذيرات للمطورين ، نظرًا لأن جميع المطورين الآخرين تقريبًا. تدعم المنصات SVG والمتجهات. إنها أساسيات الرسومات ، افعلها بشكل صحيح!

harounhajem يرجى الاطلاع على https://github.com/flutter/flutter/issues/15501 لهذا الموضوع وكذلك https://github.com/dnfield/flutter_svg

PierBover للرسوم البيانية على وجه التحديد ، يرجى النظر في https://pub.dev/packages/charts_flutter

لقد قفزت للتو في رفرفة. كنت أقوم بإعادة هيكلة تطبيق شخصي من Ionic 3 إلى Ionic 4 وكان (مرة أخرى) مختلفًا تمامًا وكان يتطلب تطبيقًا من البداية.
لذلك قررت الانتقال إلى Flutter وتجربتها. كما قلت ، لقد أنهيت هذا التطبيق ويعمل وهذا يتضمن الكثير من الرسومات والأيقونات التي أعددتها على تطبيقي. أنا لست مصممًا وأحتاج إلى الدفع مقابل هذه التصميمات.
أدرك أنني لست الوحيد في هذا الموقف ، وأريد إعادة استخدام أصول SVG الخاصة به.

erperejildo - راجع https://pub.dev/packages/flutter_svg

(لست متأكدا لماذا لم يتم إغلاق هذا بعد ذلك)

لأن المشكلة الفعلية - دعم تنسيق رسم متجه بخلاف SVG - لم يتم حلها؟

أوه ، خطأي jonahgreenthal. لقد جئت إلى هنا بحثًا عن دعم SVG ورأيت أن التعليق الثالث كان يطلب نفس الشيء

فعلت Uber هذا لنظام iOS: https://github.com/uber/cyborg
سيكون من الممتع أن ترى شيئًا مثله في Flutter.

أي تحديثات على هذا؟

dnfield الذي نجح في عرض svg كعنصر واجهة مستخدم جديد ولكنه لا يعمل مع خاصية AssetImage . أحتاج إلى عرضه باستخدام أداة CircleAvatar

Hixie هناك أيضًا حالة استخدام حيث تحتاج أيقونة svg إلى ألوان متعددة لأنها تساعد المستخدم على فهم معنى الرمز. لذلك آمل أن يتضمن الحل القدرة على تخصيص لون المظهر أيضًا.

في الوقت الحالي ، يقترح بعض الأشخاص تحويل SVG إلى خط واستخدامه بنفس الطريقة التي استخدمتها حزمة الرموز ، ولكن لا يمكننا الحصول على ألوان متعددة في الرمز في هذه الحالة.

4 سنوات من التعليقات المختلفة دون أي حل مفيد. باختصار - لا ، لا ، ممكن. لا ، غير مخطط.

هل يمكننا على الأقل معرفة سبب كون هذا الأمر صعبًا / صعبًا للغاية؟

يحتوي Flutter_svg على دعم مناسب لـ SVG في الرفرفة. يدعم Rive أيضًا التنسيق المستند إلى المتجه للرفرفة.

تتعلق هذه المشكلة بإنشاء تنسيق جديد قائم على المتجه. هذا يستغرق وقتا :)

dnfield هناك بعض عناصر واجهة المستخدم ذات خصائص الخلفية التي لا يمكننا تمرير svgs. هل هناك أي طريقة لأرشفة هذا؟

الرجاء إضافة دعم svg المناسب بدلاً من إنشاء تنسيق جديد. Svg هو المعيار الفعلي.

عندما أقوم بإنشاء تطبيق ، عادة ما يكون هناك موقع ويب مرتبط به ، وتستخدم مواقع الويب svg ، ويستخدمون svg متحركة بشكل جميل ، وخفيفة الوزن وجميلة بأي دقة.
سيكون من المنطقي حقًا إعادة استخدام تلك svgs المتحركة في Flutter بحيث يمكن تحقيق التناسق بشكل صحيح بدلاً من إعادة تنفيذ الصور والرسوم المتحركة!

SVG موجود بالفعل ويعمل ومتاح على نطاق واسع مستخدمًا ومدعومًا في أي مكان آخر. التركيز على هذا ما نحتاجه.

تتعلق هذه المشكلة بإنشاء تنسيق جديد قائم على المتجه

إذن تقصد ، هذه القضية تدور حول إعادة اختراع العجلة ، أليس كذلك؟ أتفق مع @ d-silveira - من الأفضل إضافة دعم مضمّن ومناسب لـ svg ، لا نحتاج إلى أي تنسيق جديد قائم على المتجه.

نعم ، يتعلق الأمر باختراع عجلة أفضل. SVG مدعوم بالفعل في Flutter باستخدام flutter_svg.

من الأفضل أن تكون قادرًا على استيراد svg ومعالجتها داخليًا ، إما في وقت الإنشاء أو إنشاء رمز تلقائيًا أثناء الاستيراد. على غرار Android الأصلي - يمكنك استيراد svg وسيتم إنشاء تعريف مسار Android xml من المصدر svg. يمكن أن يؤدي الاستيراد إلى مشروع Flutter إلى إنشاء رمز dart لإعادة استخدامه لرسم أصل متجه.

Hixie جيد لتحسين الأمور ، لن أناقش ذلك ، ولكن كيف يمكننا دعم بعض الأدوات التي لا تسمح إلا بصور غير svg في هذه الأثناء؟ (على سبيل المثال تلك التي لها خصائص الخلفية)

سيكون هذا طلب ميزة لـ flutter_svg.

يمكن لـHixie Flutter SVG إنشاء صورة هناك ، ولكن سيكون من الجيد أن يكون إطار العمل أكثر جرأة في التقاط الصور بدلاً من الصور في بعض الحالات. تم حفظه في https://github.com/flutter/flutter/issues/49712

flutter_svg

لماذا هذا؟ هذا غير مرتبط على الإطلاق بحزمة flutter_svg :

CircleAvatar(
  backgroundImage: MySVGImage(),
)

لن تعمل Hixie flutter_svg إلا في بعض الحالات. دعني أعطيك مثالًا عمليًا: أحتاج إلى استخدام واجهة برمجة تطبيقات REST والتي تعرض في بعض نقاط النهاية عناوين url للصور. تم إنشاء الصور بواسطة المستخدم في backoffice ، ومن ثم فإن بعضها بتنسيق png والبعض الآخر بتنسيق jpg والبعض الآخر بتنسيق svg. لا يتضمن backoffice امتداد الملف في عنوان url ولا يدعم HEAD ، لذلك ليس لدينا طريقة لمعرفة نوع الصورة مسبقًا.
سيكون السلوك المتوقع للرفرفة هو تلقي عنوان url في image.network والتعامل معه ، بدلاً من إجباري على القفز عبر الأطواق لتخمين نوع الصورة ، وما إذا كانت svg التبديل إلى flutter_svg.
كل هذا لا يأخذ في الاعتبار حقيقة أن flutter_svg ليس بديلاً عن الصورة في كل حالة! : ص

لن تعمل SVG بشكل عام إلا في بعض حالات الاستخدام أيضًا. :-)

تتعلق هذه المشكلة المحددة بالحصول على تنسيق رسومات متجه غير SVG. إذا كان لديك متطلبات مختلفة ، فإنني أوصي بتقديمها كمسألة منفصلة.

من المناقشة السابقة ، بعض الاعتبارات الهامة هي:

• لا نريد دعم SVG الكامل. هناك الكثير في المواصفات باهظ الثمن و / أو ثقيل الوزن و / أو يكرر ما لدينا بالفعل في Flutter.
• يجب أن نؤكد في التنسيق المدعوم أن هذه العمليات فعالة / فعالة / محسّنة في محرك الرسومات الخاص بنا (Skia).
• قد نرغب في معالجة التنسيق في وقت الإنشاء بدلاً من دعم مترجم كامل وقت التشغيل.

إذن ، كيف يبدأ شخص ما في إنشاء تنسيق متجه جديد للصور المحسّنة للرفرفة؟ بناءً على ما سبق ، أعتقد أن هذا ما يتم اقتراحه ...

ربما يمكن للأشخاص في Rive تجميع بعض مكتبة تحويل SVG. لديهم بالفعل محرك متجه خاص (ومفتوح المصدر) لـ Flutter. @ luigi-rosso

لماذا لا تضيف دعم استيراد svg إلى مشروع Flutter. وقم بالتحويل إلى رمز dart / متجه جديد قابل للرسم وما إلى ذلك. لاحظ أن نفس الموقف ينطبق على Android الأصلي ، ولهذا السبب لا نستخدم svg مباشرةً (وهو ما أوافق على أنه ليس له معنى كبير) والاستيراد إلى المشروع بدلاً من ذلك ، يتم تجريد svg من غير مدعوم ولا يحتاج إلى مواقع وظيفية وتم تحويله إلى تعريف مسار android.

أليست هذه فكرة جيدة لـ Flutter؟

@ giaur500 هذه المشكلة لا تتعلق بذلك. إذا كان لديك اقتراح خاص حول SVG ، فالرجاء إرسال مشكلة منفصلة.

لكي نكون منصفين ، فإن العديد من التعليقات في هذا العدد تناقش SVG و Flutter.

إتبع

يعد SVG مثاليًا لواجهة مستخدم رائعة على مستوى البكسل. الأفضل بشكل صحيح حتى الآن لوحدات البكسل الرائعة.

lukepighetti نعم. لسوء الحظ ، جميعهم خارج الموضوع ولن يؤدي وجودهم هنا إلى أي تحسينات على Flutter.

من المناقشة السابقة ، بعض الاعتبارات الهامة هي:

• لا نريد دعم SVG الكامل. هناك الكثير في المواصفات باهظ الثمن و / أو ثقيل الوزن و / أو يكرر ما لدينا بالفعل في Flutter.
• يجب أن نؤكد في التنسيق المدعوم أن هذه العمليات فعالة / فعالة / محسّنة في محرك الرسومات الخاص بنا (Skia).
• قد نرغب في معالجة التنسيق في وقت الإنشاء بدلاً من دعم مترجم كامل وقت التشغيل.

ستكون أداة وقت البناء رائعة ، حيث تأخذ المتجه وتعرض كل كثافة الشاشة ، وتضيف الأصول كصور. يقوم Apple iOS بذلك باستخدام رموز PDF.

من الأفضل أن تكون قادرًا على استيراد svg ومعالجتها داخليًا ، إما في وقت الإنشاء أو إنشاء رمز تلقائيًا أثناء الاستيراد. على غرار Android الأصلي - يمكنك استيراد svg وسيتم إنشاء تعريف مسار Android xml من المصدر svg. يمكن أن يؤدي الاستيراد إلى مشروع Flutter إلى إنشاء رمز dart لإعادة استخدامه لرسم أصل متجه.

احب ذلك

@ giaur500 هذه المشكلة لا تتعلق بذلك. إذا كان لديك اقتراح خاص حول SVG ، فالرجاء إرسال مشكلة منفصلة.

تم إنشاء عدد جديد: https://github.com/flutter/flutter/issues/63752

إذن ما هي حالة هذا؟
هل هناك أي نية على الإطلاق لدعم شيء مشابه لـ VectorDrawable ، أو حتى VectorDrawable نفسها لأولئك الذين يستخدمون Android؟

بصفتي مطورًا يفكر في تبني النظام البيئي ، أود أن أقول إن هذه نقطة قوية ستقنعني بالبقاء مواطنًا ..

لم أجربها بنفسي أبدًا ، لكن flutter svg lib اعتاد أن أحظى بدعم في
أقل الملامح الرئيسية للناقلات القابلة للرسم مثل المسارات.

في السبت ، 15 أغسطس 2020 ، الساعة 19:46 مساءً ، كتب n00bmind ، [email protected] :

إذن ما هي حالة هذا؟
هل هناك نية على الإطلاق لدعم شيء مشابه لـ
VectorDrawable ، أو حتى VectorDrawable نفسها لأولئك الذين يستخدمون Android؟

بصفتي مطورًا يفكر في تبني النظام البيئي ، أود أن أقول إن هذا ملف
نقطة قوية تقنعني بالبقاء مواطنًا ..

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/flutter/flutter/issues/1831#issuecomment-674375846 ،
أو إلغاء الاشتراك
https://github.com/notifications/unsubscribe-auth/ABI4Y4LWYSYEIWI3RRSSCK3SAZKO5ANCNFSM4B3FXMMQ
.

اعتقد الدولة لا شيء. لا يوجد استنتاج هنا من هذا الموضوع وأيضًا فكرتي لتطوير شيء مشابه للمتجه الأصلي القابل للرسم مغلق على الفور.

هل هناك أي سبب يمنعك من استخدام حزمة flutter svg؟ نحن نستخدمه بنجاح كبير في أحد تطبيقاتنا. لم أستخدم Vector Drawable مطلقًا ، لذا لست متأكدًا من كيفية مقارنتها بـ SVG.

يبدو أن حزمة flutter_svg تستحق البحث عن هذا النوع من حالات الاستخدام ..
lukepighetti كيف تقيم أدائها؟ سيكون استخدامي مجرد صورة متقطعة وعدد قليل من الرسومات بحجم الأيقونة هنا وهناك في التطبيق ، لذلك لا شيء رائع.

يبدو أن حزمة flutter_svg تستحق البحث عن هذا النوع من حالات الاستخدام ..

lukepighetti كيف تقيم أدائها؟ سيكون استخدامي مجرد صورة متقطعة وعدد قليل من الرسومات بحجم الأيقونة هنا وهناك في التطبيق ، لذلك لا شيء رائع.

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

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

قبل أن يضغطوا على فريق الرفرفة لفعل شيء داخليًا.

المشكلة الحقيقية في هذه المشكلة بالذات هي أن Skia محرك الرسوميات الفلاتر لديه كل ما يلزم لعمل تنسيق متجه "يشبه الرسم" يعمل بأعلى سرعة دون استيراد حزمة سهم ثقيلة جدًا تستدعي المحرك لرسم الأساسيات خطوة بخطوة.

أعتقد أنه يجب على الناس تجربتها حقًا _ (حزمة svg) _

أعتقد أنه يجب على الأشخاص الاتصال بصوت عالٍ وفي كل مكان ممكن لموظفي Google لحل هذه المشكلة ، لأنه الآن - بعد أربع سنوات - فقط العلاقات العامة السلبية قد تدفع شخصًا ما في Google إلى التفكير فيما إذا كان يجب أن يجبرنا إطار العمل المحمول في عام 2020 على الاستمرار. كل ذلك الميجابايت من الرسومات النقطية داخل تطبيقاتنا.

[@ Hixie]

ما لم أفقد شيئًا ما ، فإن تنفيذ ميزة الرفرفة هذه سيبدو إلى حد كبير مثل حزمة flutter_svgdnfield التي يبدو أنها تحل حالة الاستخدام التي تصفها. علاوة على ذلك ، فإن المشرف موجود في فريق Flutter الأساسي حتى نتمكن من التأكد من جودته. هل ستشعر بتحسن إذا كانت هذه الحزمة في https://github.com/flutter/plugins ؟

إذا كان هناك شيء مفقود ، فلا تتردد في تثقيفي حتى أتمكن من معرفة المزيد حول هذا الموضوع.

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

أعتقد أنه يجب جعل "ليس SVG" في عنوان الإصدار باللون الأحمر ، والخط العريض والوميض.

هذه المشكلة على وجه التحديد ليست حول تنسيق svg.

كان OP (وأنا) يأمل في الكشف عن واجهة برمجة تطبيقات مسار Skia بحيث يمكن تمثيل رسومات الأصول في شكل مضغوط - أي ثنائي ثابت ثابت. حتى أن دان أجرى تصحيحًا على Skia يعمل مع flutter_svg ، والذي بدوره يتيح لنا الآن استخدام أصول svg. على الرغم من أننا ما زلنا نحلل xml في وقت تشغيل التطبيق ونرسم من خلال استدعاء المحرك - أيضًا للأصول الثابتة المجمعة في apk.

مع الدعم المناسب لتنسيق الرسم المتجه المخصص (دعنا نسميه fvd ) ، سيحدث تحليل عمل المصمم مرة واحدة - في وقت إنشاء التطبيق ، ثم سيتم طرح الكائن بتنسيق fvd مباشرة في Skia. في التطبيق المليء بالرسومات ، سيكون لمثل هذا الأسلوب تأثير هائل على حجم التطبيق وتوفيرات ملحوظة في وقت العرض. [ نقلا عن النفس ]

آمل أن يوضح ما ورد أعلاه كيف أرى هذه المشكلة ويبرر مكالمتي لإنجازها أخيرًا.
حتى كجزء من مكتبة flutter_svg.

يستحق Flutter ميزة أخرى على التقنيات المنافسة.

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

يبدو أن flutter_svg يعمل بشكل جيد للغاية على الرغم من عدم دعم البرمجة النصية و HTML و SMIL وما إلى ذلك.

يبدو جيدًا ويمكننا إنشاء SVG من أصول الملفات أو الشبكة أو السلاسل العادية.