قماش تعليمي 01 | كيفية استخدام قماش في الرفرفة؟

0. ما سوف نخلق؟

اليوم ، سأخبرك بكيفية استخدام لوحة الرسم القماشية لرسم شكلنا الخاص - هذه خطوة بخطوة تعليمي ، دعنا نذهب! أولاً ، دعني أريكم ما سنخلقه!

شعار الرفرفة المفتوحة

نعم ، أنت على حق ، سنقوم بإنشاء شعار Flutter Open.

1. تنسيق أو حجم الصورة

قبل أن نبدأ العمل ، يجب أن نعرف بيكسل تصميم الشعار ، مثل ماذا عن حجم الدائرة أو موضع المستطيل وما إلى ذلك ، لذلك يجب أن نعرف ، فإن الصورة أدناه يجب أن تقوم بتنسيق أو حجم الشكل ، يجب أن تلاحظ أن نقطة الصفر هي left_top في الشاشة وأن الصورة هي 584 * 648 بكسل.

ملاحظات الدوائر ذات الإحداثيات المركزية ونصف القطر.تدوير شعار رفرفة التصاعدي مع تنسيق نقطة

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

أيضا ، لا تنسى الألوان.

const BLUE_NORMAL = اللون (0xff54c5f8) ؛
const GREEN_NORMAL = اللون (0xff6bde54) ؛
const BLUE_DARK2 = اللون (0xff01579b) ؛
const BLUE_DARK1 = اللون (0xff29b6f6) ؛

2. حجم التصميم مقابل الحجم المنطقي للجهاز

عندما نصمم الشكل ، فإننا نستخدم البيكسل الذي نحبه فقط ، ولكن هناك العديد من الأجهزة ذات حجم الشاشة المختلفة وحجم المنطق مختلف أيضًا ، وأحيانًا نضع شكلنا المخصص في الحاوية ، حتى نتمكن من رسم الحجم على النحو بقدر القطعة الأم. على سبيل المثال ، حجم هذا الشعار هو 548 * 648 كتصميم ، ولكن الحجم المنطقي لإظهار هذا الشعار هو 200 * 400 ، ثم سيظهر على النحو التالي:

ما يمكننا القيام به مع هذا ، دعونا نرى الكود أدناه

أولا ، يجب علينا تحديد فئة استخدام

استيراد "الحزمة: رفرفة / material.dart" ؛
استيراد "دارت: الرياضيات" ؛
حجم الصف
  ثابت ثابت _DESIGN_WIDTH = 580 ؛
  ثابت ثابت _DESIGN_HEIGHT = 648 ؛

  // حجم المنطق في الجهاز
  حجم ثابت _logicSize.

  // جهاز راديو بكسل.

  الحصول على عرض ثابت {
    return _logicSize.width؛
  }

  ثابت الحصول على ارتفاع {
    return _logicSize.height؛
  }

  مجموعة ثابتة الحجم (الحجم) {
    _logicize = الحجم ؛
  }

  // @ param w هو التصميم w ؛
  getAxisX مزدوج ثابت (مزدوج ث) {
    return (w * width) / _DESIGN_WIDTH؛
  }

// الاتجاه ذ
  getAxisY مزدوج ثابت (h مزدوج)
    عودة (ح * الارتفاع) / _DESIGN_HEIGHT ؛
  }

  // قيمة الاتجاه المائل مع حجم التصميم s.
  getAxisBoth ثابت مزدوج (s مزدوج) {
    عائدات *
        sqrt ((العرض * العرض + الارتفاع * الارتفاع) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT)) ؛
  }
}

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

SizeUtil.size = MediaQuery.of (سياق) .size؛

3. تحديد CustomPainter

هذه هي الفئة الأكثر استيرادًا لتعريف شكلنا ، حيث يتم كتابة كل الشكل المنطقي لرسم الشكل هنا.

أولا ، إنشاء فئة يمتد CustomPainter وإنشاء الطلاء. إذا لم يكن الحجم أصغر من 1.0 ، فقم بتعيينه كحجم منطقي.

الفئة OpenPainter يمتد CustomPainter {
@تجاوز
الطلاء باطل (قماش قماش ، حجم الحجم) {
if (size.width> 1.0 && size.height> 1.0) {
  طباعة ( "> 1.9")؛
  SizeUtil.size = size ؛
}
var paint = الرسام ()
  ..style = PaintingStyle.fill
  ..color = BLUE_NORMAL
  ..isAntiAlias ​​= صواب ؛
}
 @تجاوز
  bool shouldRepaint (CustomPainter oldDelegate) => false؛
}

ثم ارسم شعار الرفرفة. لكن أولاً ، يجب علينا استخدام 'canvas.drawPath' لرسم رباعي الأطراف.

void _drawFourShape (قماش قماش ،
    {إزاحة left_top ،
    إزاحة right_top ،
    إزاحة right_bottom ،
    إزاحة left_bottom ،
    حجم الحجم ،
    رسم}) {
  left_top = _convertLogicSize (left_top ، الحجم) ؛
  right_top = _convertLogicSize (right_top ، الحجم) ؛
  right_bottom = _convertLogicSize (right_bottom ، الحجم) ؛
  left_bottom = _convertLogicSize (left_bottom ، الحجم) ؛
  var path1 = المسار ()
    ..moveTo (left_top.dx ، left_top.dy)
    ..lineTo (right_top.dx ، right_top.dy)
    ..lineTo (right_bottom.dx ، right_bottom.dy)
    ..lineTo (left_bottom.dx ، left_bottom.dy) ؛
  canvas.drawPath (path1 ، الطلاء) ؛
}
إزاحة _convertLogicSize (إزاحة ، حجم المقاس) {
  return Offset (SizeUtil.getAxisX (off.dx) ، SizeUtil.getAxisY (off.dy)) ؛
}

أخيرًا ، سوف نرسم الدوائر في وظيفة "paint (canvas ، size)".

var circleCenter = Offset (SizeUtil.getAxisX (294)، SizeUtil.getAxisY (175))؛
paint.color = BLUE_NORMAL؛
canvas.drawCircle (circleCenter، SizeUtil.getAxisBoth (174)، paint)؛
paint.color = GREEN_NORMAL؛
canvas.drawCircle (circleCenter، SizeUtil.getAxisBoth (124)، paint)؛
paint.color = Colors.white ؛
canvas.drawCircle (circleCenter، SizeUtil.getAxisBoth (80)، paint)؛

وأخيرا ، يجب علينا حفظ قماش.

canvas.save ()؛
canvas.restore ()؛

4. استخدم OpenPainter

نعرّف OpenPainter الآن ، فكيف يمكننا استخدام OpenPainter. معظم فئات الاستيراد هي CustomPaint. يجب عليك استخدامه بمثابة القطعة الأم.

CustomPaint (
  الرسام: OpenPainter () ،
)

ثم يمكننا استخدام CustomPaint كعنصر واجهة مستخدم مشترك لإظهار شكلنا. في صفحتنا الرئيسية ، يمكننا استخدام هذا مثل هذا.

سقالة(
  appBar: AppBar (
    العنوان: نص ("قماش أول") ،
  )،
  الجسم: حاوية (
      الطفل: المركز (
    الطفل: حاوية (
      العرض: 280
      الارتفاع: 320.0 ،
      الطفل: CustomPaint (
        الرسام: OpenPainter () ،
      )،
    )،
  ))،
)

وسوف تظهر مثل هذا.

بالحجم المنطقي للعرض: 280 ، الارتفاع: 320.0 ،

إذا قمنا بتغيير حجم الحاوية كما قلنا أعلاه 200 * 400 لحجم المنطق ، فسيكون الأمر مختلفًا بعض الشيء.

حاوية(
// العرض: 280 ،
// الارتفاع: 320.0 ،
          العرض: 200 ،
          الارتفاع: 400
          الطفل: CustomPaint (
            الرسام: OpenPainter () ،
          )،
        )
بالحجم المنطقي للعرض: 200 ، الارتفاع: 400.0 ،

إذا لم نقم بتعيين الحجم ، فسيكون الحجم في وظيفة "paint (canvas ، size)" صفرًا ، وسنناسب حجم الجهاز ، ودعونا نتحقق مما إذا كان صحيحًا أم لا ، في هذه المرة يتعين علينا إلغاء الأداة الرئيسية لـ Center ، ثم يمكننا زيارته.

سقالة(
// appBar: AppBar (
/ / العنوان: نص ("قماش أول") ،
//) ،
      الجسم: حاوية (
        الطفل: حاوية (
// العرض: 280 ،
// الارتفاع: 320.0 ،
          الطفل: CustomPaint (
            الرسام: OpenPainter () ،
          )،
        )،
      )،
    )؛
مع الحجم المنطقي لحجم الجهاز

هذا جميل ، لقد أكملنا شعار Flutter Open. يتم إنشاء هذا عن طريق مجتمع مفتوح المصدر Flutter. الدبابات لدعمكم.

المشروع بأكمله هنا: https://github.com/FlutterOpen/flutter-canvas. إذا أعجبك أو ساعدك قليلاً ، من فضلك أعطني نجمة في جيثب.

_______________النهاية________________

صفحة Facebook: https://www.facebook.com/flutteropen

مجموعة Facebook: https://www.facebook.com/groups/948618338674126/