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

تركز سلسلة المقالات المقترحة ، "SVG Filtering Effects" ، التي أعدتها سارة سويدان ، وهي مطورة مستقلة لواجهة UI / UX ومؤلفة للعديد من المقالات الفنية في لبنان ، على عمل مرشحات SVG وتتكون من المقالات التالية:

آثار تصفية SVG

1. آثار تصفية SVG. الجزء 1. مرشحات SVG 101
2. آثار تصفية SVG. الجزء 2. الخطوط العريضة النص مع feMorphology
3. آثار تصفية SVG. الجزء 3. تأثير ملصق الصورة باستخدام feComponentTransfer
4. تأثيرات مرشح SVG: صور Duotone مع feComponentTransfer .
5. تأثيرات مرشح SVG: مطابقة النص إلى سطح السطح باستخدام feDisplacementMap

تفترض هذه المقالة أنك على دراية بأساسيات عوامل تصفية SVG أو قرأت المقالة الأولى في هذه السلسلة - "SVG Filters 101". إذا لم تكن قد فعلت ذلك ، فلا تتردد في قضاء بضع دقائق لملء قاعدة معارفك.

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

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

يحدث الملصق في جميع أنحاء الصورة ، ولكنه يكون أكثر وضوحًا في منطقة تغيير اللون الدقيق.

Fig_1. مثال لصورة بتنسيق JPEG (ألوان 24 بت أو 16.7 مليون لون) قبل الملصق ، على عكس نتيجة الحفظ في تنسيق GIF (256 لونًا). (المصدر: ويكيبيديا)

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

Fig_2. يؤدي تطبيق تأثير posterization على الصورة على اليسار باستخدام feComponentTransfer إلى تقليل عدد الألوان في هذه الصورة (يمين).

ولكن أولا ، النظر في الأساسيات التقنية ...

FeComponentTransfer في لمحة

تتيح لك البدائية feComponentTransfer تغيير كل مكون من مكونات R و G و B و A الموجودة بالبكسل. بمعنى آخر ، يسمح لك feComponentTransfer بمعالجة كل قناة ملونة بشكل مستقل بنفس طريقة قناة ألفا في إدخال الرسومات. يسمح لك بالتحكم الدقيق في ضبط السطوع ، ضبط التباين ، توازن اللون أو إعداد العتبة.

يتم تعديل مكونات RGBA عن طريق أداء وظائف نقل هذه المكونات. ولهذا الغرض ، يكون لكل مكون عنصر خاص به يسمى عنصر وظيفة النقل . خلال المقالة ، سأشير إلى هذه العناصر على أنها " عناصر مكونة " - أي العناصر التي تتعلق بمكونات RGBA الفردية. هذه العناصر متداخلة في feComponentTransfer . لذلك لا يقوم feComponentTransfer سوى بوضع عناصر مكون RGB الفردية. عناصر مكون RGBA هي: feFuncR ، feFuncG ، feFuncB و feFuncA .

يتم استخدام سمة الكتابة في عنصر المكون لتحديد نوع الوظيفة التي تريد استخدامها لتعديل هذا المكون. هناك حاليا خمسة أنواع من الوظائف: الهوية ، الجدول ، المنفصلة ، الخطية وغاما . تُستخدم أنواع الوظائف هذه لتعديل مكونات مصدر الرسومات R / G / B / A. سننظر في معظمها في هذه السلسلة ونرى كيف يمكن استخدامها.

<feComponentTransfer> <!-- The RED component --> <feFuncR type="identity | table | discrete | linear | gamma"></feFuncR> <!-- The GREEN component --> <feFuncG type="identity | table | discrete | linear | gamma"></feFuncG> <!-- The BLUE component --> <feFuncB type="identity | table | discrete | linear | gamma"></feFuncB> <!-- The ALPHA component --> <feFuncA type="identity | table | discrete | linear | gamma"></feFuncA> </feComponentTransfer>"> 

لكل نوع من أنواع الوظائف ، هناك سمة واحدة أو أكثر تتيح لك تحديد معلومات إضافية حول الوظيفة المستخدمة. على سبيل المثال ، تشتمل الوظيفة الخطية على سمة الميل ، والتي تُستخدم للإشارة إلى ميل الوظيفة الخطية التي سيتم استخدامها لتغيير المكون الذي يتم تطبيقها عليه.

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

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

مثال: استخدام مكون ألفا لتقليل عتامة الكائن

مثال بسيط على الحياة الحقيقية هو استخدام عنصر مكون feFuncA لتقليل عتامة مصدر الرسومات. في المقالة الأولى في هذه السلسلة ، رأينا كيف يمكن استخدام feColorMatrix لتقليل عتامة عنصر ما عن طريق تغيير قيمة قناة ألفا في مصفوفة الألوان. أنا شخصياً أفضل استخدام feComponentTransfer لهذا النوع من العمل.

تطبيق المرشح التالي على مصدر يقلل من عتامة هذا المصدر إلى 0.5:

 <filter id="redOp"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0.5"></feFuncA> </feComponentTransfer> </filter> 

ذكرنا أعلاه أن لدينا خمس وظائف مختلفة يمكننا استخدامها للسيطرة على مكونات RGBA. يعمل نوع دالة الجدول عن طريق مطابقة قيم المكون ، وهي قناة ألفا في مثالنا ، مع سلسلة القيم التي توفرها سمة tableValues .

إذن ماذا يعني هذا؟

عادةً ما تقع قناة ألفا لعنصر ما في النطاق [0 ، 1]. باستخدام وظيفة الجدول وتوفير قيمتين: 0 و 0.5 ، نطلب من المتصفح تحديد خريطة نطاق ألفا [0 ، 1] إلى النطاق الجديد: [0 ، 0.5]. في هذه الحالة ، يتم تقليل العتامة بمقدار النصف.

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

تأثير ملصق الصورة: تقليل عدد الألوان في صورة ما باستخدام الوظيفة المنفصلة

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

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

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

شخصيا ، تذكرني الوظيفة المنفصلة بخطوات التزامن () في CSS. بالمقارنة مع دالة خطية ، تنتقل وظيفة خطوة بخطوة من قيمة إلى أخرى ، بدلاً من الانتقال الخطي بينها.

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

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

يتم تحديد هذه الوظيفة من خلال خطوات الوظيفة المحددة في سمة tableValues ، والتي توفر قائمة من القيم n لتحديد وظيفة الخطوة لخطوات n. - مواصفات مرشحات SVG

دعونا نرى ما يعنيه هذا بعبارات بسيطة. افترض أن لدينا جزء الكود التالي:

 <svg width="500" height="335" viewBox="0 0 500 335"> <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 .5 1" /> </feComponentTransfer> </filter> <image xlink:href="..."cwidth="100%" height="100%" x="0" y="0" filter="url(#posterize)"></image> </svg> 

في جزء الشفرة أعلاه ، نستخدم وظيفة منفصلة لتغيير القناة الحمراء في مصدر الصورة. نحن نقدم 3 قيم مختلفة يجب أن يتطابق معها المتصفح مع القيم الحمراء. في مرشح SVG ، يتم تمثيل قيم المكونات كسور في النطاق [0 ، 1]. هذا يعني أن قيمة المكون الأحمر في أي بكسل يمكن أن تكون 0 (0٪ أحمر / أسود بالكامل) ، 1 (أحمر 100٪) أو أي قيمة (ظل أحمر) بينهما. الشيء نفسه ينطبق على القنوات الخضراء والأزرق والألفا.

لأي عدد من القيم ( n ) التي تدخلها ، سينشئ المتصفح نطاقات n . بشكل أكثر تحديدًا ، سيتم تقسيم [0 ، 1] إلى نطاقات n . بعد ذلك سوف يعرض قيم اللون الموجودة داخل هذه النطاقات بواسطة قيم n . قم بتطبيق هذا المنطق على مقتطف الشفرة الخاص بنا:

• يرى المتصفح ثلاث قيم حمراء مختلفة في tableValues ؛
• يقسم القيم الحمراء في النطاق [0 ، 1] إلى ثلاثة أجزاء متساوية. لذلك لدينا ثلاثة نطاقات هي كما يلي:
  
  • [0 ، 0.33]
  • [0.33 ، 0.66]
  • [0.66 ، 1]
• علاوة على ذلك ، يتحقق المستعرض من القيمة الحمراء لكل بكسل في الصورة ويحدد النطاق الذي يوجد فيه ؛
• ثم يتم عرض جميع القيم الحمراء لنطاق واحد بالقيمة الجديدة المرتبطة بهذا النطاق من تلك التي قدمتها. العرض على النحو التالي:
  
  • يتم عرض الألوان في النطاق [0 ، 0.33] كـ 0 ؛
  • يتم عرض الألوان في النطاق [0.33 ، 0.66] على أنها 0.5 ؛
  • يتم عرض الألوان في النطاق [0.66 ، 1] كـ 1.

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

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

Fig_4. تعيين قيم اللون لنطاق اللون.

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

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

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

لإنشاء هذا التأثير ، قصرت عدد ألوان RGB على خمسة ، بدءًا بأقل قيمة 0.25:

 <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncG type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncB type="discrete" tableValues=".25 .4 .5 .75 1" /> </feComponentTransfer> </filter> 

يمكنك اللعب بالتأثير في العرض التوضيحي التالي:

الخاتمة

آمل أن يكون هذا المقال قد ساعد في توضيح feComponentTransfer قليلاً وأظهر لك مدى قوة عناصر التحكم في ألوان البكسل والمكونات.

في المقالة التالية ، سننظر في نوعين أكثر قوة من وظيفة النقل feComponentTransfer . سننظر في كيفية محاكاة تأثير صورة فوتوشوب ثنائية اللون ، وكيف يمكنك التحكم في السطوع والتباين وكثافة اللون للصورة باستخدام feComponentTransfer . ابق معنا