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

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

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

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

من المحتمل أنك واجهت منحنيات بيزير مكعبة في حزم النشر المكتبي والرسومات. يحددون نقطة البداية (P0) ونقطة النهاية (P3). ومع ذلك ، في حين أن المنحنيات التربيعية تستخدم نقطة تحكم واحدة ، فإن منحنيات بيزير التكعيبية لها نقطتان: واحد لكل نهاية الخط (P1 و P2). صفحة منحنى بيزير في ويكيبيديا يقدم توضيح جيل جيد:

منحنى مكعب

مصدر الصورة

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

توفر منحنيات Bézier المكعبة المزيد من الاحتمالات. يمكن أن تولد نقطتا التحكم منحنيات تعكس الاتجاه أو تلتف حول نفسها.

مكعب بيزير

مسار الألغاز

يتم تحديد منحنيات Bézier المكعبة باستخدام C التوجيه في المسار d ينسب:

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

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

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

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

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

<path d="M100,250 C100,100 400,100 400,250 S700,400 700,250" />

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

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

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

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

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

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

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

المصدر

أضف تعليق