كيفية رسم منحنيات بيزير التربيعية على HTML5 SVGs

فحص مقال “كيفية إنشاء مسارات معقدة في SVGs” ملف <path> وشرح كيفية رسم سلسلة من الخطوط والأقواس لإنشاء أي شكل. (غالبًا ما يتم استخدامه لنسخ الخطوط دون الحاجة إلى تنزيل خط كامل.)

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

ما هي منحنيات تربيعية بيزير؟

يحتوي المنحنى التربيعي على نقطة بداية (P0) ونقطة نهاية (P2). تحدد نقطة تحكم واحدة (P1) انحناء الخط. صفحة منحنى بيزير في ويكيبيديا يقدم توضيح جيل جيد:

منحنى تربيعي

مصدر الصورة

يمكن لنينجا الرياضيات أيضًا فحص المعادلات التي تسبب الصداع النصفي في ولفرام ماث وورلد.

المنحنيات التربيعية رائعة لرسم حواف ناعمة. كما ترى من هذه الصورة ، من السهل تحديد نقطة تحكم حيث تظهر الحافة المربعة عادةً:

من الدرجة الثانية بيزير

مسارات محيرة

يتم تحديد منحنيات بيزير التربيعية باستخدام أ Q التوجيه في مسار SVG d ينسب:

<path d="M100,250 Q250,100 400,250" />

الأولي M التوجيه يحرك القلم إلى النقطة الأولى (100,250). إحداثيان يتبعان Q: نقطة التحكم المفردة (250,100) والنقطة الأخيرة التي يتم رسمها إلى (400,250).

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

<path d="M100,250 q150,-150 300,0" />

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

<path d="M100,250 Q250,100 400,250 T700,250" />

يرسم منحنى من 100,250 إلى 400,250 بنقطة تحكم عند 250,100. يتم رسم منحنى آخر ينتهي عند 700,250 ونقطة التحكم هي 550,400.

استمرار منحنى بيزير التربيعي

ستكون نقطة التحكم المستنبطة صحيحة رياضيًا ولكنها قد لا تكون دائمًا ما تحتاجه!

قد يكون من الصعب بعض الشيء ترميز منحنيات بيزير التربيعية وتصورها ، لذلك ستنشئ أداة التوليد السريع هذه <path> رمز لك:

انظر القلم
SVG quadradic أداة إنشاء مسار منحنى بيزير
بواسطة SitePoint (تضمين التغريدة)
على كود.

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

لاحظ أن هذه الأداة يجب أن تحول إحداثيات صفحة DOM إلى إحداثيات SVG للتأكد من أنها تعمل في جميع أحجام الشاشات. قد يكون هذا أكثر تعقيدًا قليلاً مما تتوقع ، لذا ارجع إلى “كيفية الترجمة من DOM إلى إحداثيات SVG والعودة مرة أخرى” للحصول على التفاصيل الكاملة.

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

المصدر

أضف تعليق