مسارات SVG

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

يمكن إنشاء مسارات SVG بسهولة نسبية باستخدام Adobe Illustrator. من الأفضل أن تبدأ بصورة PNG عادية ترغب في تبسيطها إلى مسار SVG. بعد أن تجد صورة الخلفية، أنشئ مشروعًا جديدًا في Illustrator بالنقر على New واختيار الإعداد المسبق Web Large.

بعد ذلك، استورد صورتك المرجعية إلى لوح الرسم الجديد بالنقر على File -> Place في شريط الأدوات، ثم اختر صورتك من النافذة المنبثقة التي تظهر.

غالبًا ما يكون لوح الرسم أكبر بكثير من الصورة التي استوردتها. لإصلاح ذلك، انقر على الخيار Object -> Artboards -> Fit to Artwork Bounds.

بعد ذلك، اختر جزءًا من الصورة ترغب في عزله في مسار. تتكون صور SVG من مضلعات يحددها مسار حدودها الخارجية. ويمكن بعد ذلك ملء هذه المضلعات بلون أو تدرّج لوني باستخدام JS Canvas API.

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

عندما تصبح راضيًا عن مسارك، صدّره بالنقر على File -> Export ->Export As. تأكد من اختيار نوع الملف SVG.

في النافذة التالية التي تفتح، تأكد من ضبط Image على Link، ثم انقر على الخيار Show Code.

في نافذة Notepad التي تفتح، حدّد موقع الوسم <polygon> وانسخ السمة points بالكامل. يجب أن تكون سلسلة طويلة من الأرقام. بعد ذلك، انقر على Cancel، إذ أصبح لديك الآن جميع البيانات التي تحتاجها.

لرسم صورة قائمة على المسار على لوحة التأثير، عرّف ثابتين جديدين. أولًا، عرّف ثابتًا قيمته السلسلة النصية التي نسختها سابقًا.

نصيحة

على سبيل المثال، 351 396.5 440 435.5 501.84 ستصبح M351 396.5 440 435.5 501.84.

الآن، أنشئ مسارًا جديدًا باستخدام new Path2D(path) حيث path هو اسم الثابت الأول.

يمكن الآن رسم هذه الصورة باستدعاء ctx.fill(path2d) حيث path2d هو اسم المسار الذي عرّفته في الخطوة السابقة.

لتحديد لون الشكل، استدعِ ctx.fillStyle(color) قبل رسم الصورة. تقبل هذه الدالة رموز الألوان السداسية العشرية (hex)، وأسماء ألوان CSS، ودوال ألوان CSS، والتدرجات اللونية كوسائط.

يمكنك أيضًا استخدام المجموعة الكاملة من تأثيرات تحويل اللوحة (canvas) مثل التحجيم والإزاحة. لضمان أن تنطبق التحويلات على الصورة الحالية فقط، استخدم ctx.setTransform(1,0,0,1,0,0) بعد رسم كل طبقة.

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

var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");

// Data copied from Illustrator. Make sure the first character is M.
const pondData = "M351 396.5 440 435.5 501.84 435.5 539.37 435.5 584.5 415.5 581.5 396.5 570 385.5 581.5 383.13 546 370.5 502 365.5 480.5 384.66 457.42 365.5 443.63 365.5 432.14 365.5 413 380.5 408 390.5 371 387.5 351 396.5";
// Create a new Path2D from the data.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Optional canvas transformation. You can also use ctx.translate(x,y) to move the location of the new path.
  ctx.fillStyle = "blue"; // Set color of path. You can also use gradients here.
  ctx.fill(pondPath); // Draw the path.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transformation so it only affects this path.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

يجب أن تُنتج الشيفرة أعلاه هذه النتيجة: