HTML5 SVG 2D مقدمة 10 - تعريف واستخدام المرشحات

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

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

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

ستولد بعض تأثيرات المرشح نقاط بكسل غير محددة ، والتي ستتم معالجتها في آثار شفافة.

دعونا نلقي نظرة على مثال:

<svg viewbox = "0 0 200 120"

xmlns = "http://www.w3.org/2000/svg" الإصدار = "1.1">

<Title> SVG Filter Effect مثال </title>

<SESC> استخدم تأثيرات المرشح المختلفة لتحقيق تأثيرات الإضاءة ثلاثية الأبعاد لزوج من الرسومات. </desc>

<defs>

<filter id = "myfilter" filterunits = "userpaceonuse" x = "0" y = "0">

<fegaussianblur في = "sourcealpha" stddeviation = "4" result = "blur"/>

<feoffset في = "Blur" dx = "4" dy = "4" result = "OffsetBlur"/>

<fespecularlighting في = "Blur" surfacescale = "5" specularConstant = ". 75"

specularexponent = "20" Lighting-Color = "#BBBBBBB"

النتيجة = "المواصفات">

<fePointlight x = "-5000" y = "-10000" z = "20000"/>

</fespecularlighting>

<fecomposite in = "specout" in2 = "sourcealpha" compator = "in" result = "specout"/>

<fecomposite في = "SourceGraphic" in2 = "specout" compator = "Arithmetic"

k1 = "0" k2 = "1" k3 = "1" k4 = "0" result = "litpaint"/>

<pemerge>

<femergenode in = "OffsetBlur"/>

<femergenode في = "litpaint"/>

</femerge>

</ilter>

</defs>

<rect x = "1" y = "1" fill = "#88888" stroke = "Blue" />

<g filter = "url (#myfilter)">

<g>

<path fill = "none" stroke = "#d90000" stroke-width = "10"

D = "M50،90 C0،90 0،30 50،30 L150،30 C200،30 200،90 150،90 Z" />

<path fill = "#d90000"

D = "M60،80 C30،80 30،40 60،40 L140،40 C170،40 170،80 140،80 Z" />

<g fill = "#ffffff" stroke = "black" font-size = "45" font-family = "verdana">

<text x = "52" y = "76"> svg </extry>

</g>

</g>

</g>

</svg>

تأثير هذا المثال الذي يعمل على Firefox هو نتيجة الصورة الأخيرة:

ملاحظة: قد يكون هناك بعض الاختلافات في المتصفحات الأخرى.

يستخدم هذا المرشح 6 تأثيرات ، بدوره (يتم عرض خطوة واحدة في الصورة أعلاه :):

Fegaussianblur: هذه الخطوة هي إجراء معالجة طمس غاوسي ؛ إدخال هذا التأثير الخاص هو قيمة الشفافية لصورة المصدر ، ويتم تخزين الإخراج في التمويه المؤقت. يتم استخدام قيمة التمزق كمدخلات FeOffset و Fespecularlight أدناه.

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

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

مرتين Fecomposite: هاتان الخطوتين تجمع بين طبقات ذاكرة التخزين المؤقت المختلفة.

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

تشير منطقة تأثير المرشح إلى المنطقة التي يعمل فيها تأثير المرشح. يتم تعريف حجم هذه المنطقة من خلال الخصائص التالية لعنصر المرشح:

تحدد هذه الخاصية مساحة الإحداثيات المستخدمة بواسطة X و Y و Width and Right. مثل الخصائص الأخرى المتعلقة بالوحدة ، تحتوي هذه الخاصية على قيمتان: UsperSpaceonuse و ObjectBoundingBox (افتراضي).

يمثل UsperSpaceonuse نظام إحداثيات المستخدم الذي يستخدم العنصر الذي يشير إلى عنصر المرشح.

تعني ObjectBoundingBox استخدام النسبة المئوية لمربع المحيط الذي يشير إلى عنصر المرشح كنطاق قيمة.

تحدد هذه الخصائص المنطقة المستطيلة حيث يعمل المرشح. لن يتم تطبيق تأثير المرشح على نقاط خارج هذا المجال. القيمة الافتراضية لـ x ، y هي -10 ٪ ، والقيمة الافتراضية للعرض والارتفاع هي 120 ٪.

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

بالإضافة إلى هذه الخصائص ، فإن الخصائص التالية لعنصر المرشح مهمة أيضًا:

تحدد هذه الخاصية مساحة الإحداثيات التي تستخدمها الإحداثيات والأطوال في كل عملية ذرية. قيمة هذه الخاصية هي userpaceonuse و ObjectBoundingBox. لكن القيمة الافتراضية هي userpaceonuse.

يتم استخدام هذه الخاصية للإشارة إلى عناصر المرشح الأخرى في عنصر المرشح الحالي.

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

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

لن أقول الكثير عن هذه الخصائص. يحددون المنطقة التي تعمل فيها ذرات المرشح ، لذلك قد تصبح كذلك منطقة المرشح. تقتصر هذه السمات على منطقة عمل عنصر التصفية. بشكل افتراضي ، القيم هي 0 و 0 و 100 ٪ و 100 ٪ على التوالي. منطقة عمل هذه الذرات تتجاوز منطقة عنصر المرشح لا تعمل.

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

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

SourceGraphic: تمثل هذه القيمة الإدخال لاستخدام عنصر الرسم البياني الحالي كعملية.

SourCealpha: تمثل هذه القيمة الإدخال لاستخدام قيمة ألفا عنصر الرسم البياني الحالي كعملية.

BackgroundImage: تمثل هذه القيمة استخدام لقطة الشاشة الخلفية الحالية كمدخل للعملية.

BackgroundAlpha: تمثل هذه القيمة إدخال العملية باستخدام قيمة ألفا لقطات الشاشة الحالية.

FillPaint: تستخدم هذه القيمة قيمة سمة التعبئة لعنصر الرسم البياني الحالي كمدخل للعملية.

StrokePaint: تستخدم هذه القيمة قيمة سمة السكتة الدماغية لعنصر الرسم الحالي كمدخل للعملية.

من بين هذه القيم ، قد يكون من الصعب فهم الخلفية والخلفية. دعنا نلقي نظرة على هاتين القيمتين أدناه.

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

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

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

تراكم القيمة الافتراضية ، ويعتمد تأثيرها على السياق: إذا كان عنصر الحاوية الأصل يستخدم Enable-Background: جديد ، فإن جميع العناصر الرسومية للحاوية ستشارك في تقديم الخلفية. خلاف ذلك ، فهذا يعني أن الحاوية الأصل ليست جاهزة لالتقاط لقطة شاشة للخلفية ، ويتم عرض عرض عنصر الرسوم لهذا العنصر فقط على الجهاز.

يوضح المثال التالي تأثير هذه القيم:

<svg viewbox = "0 0 1350 270"

xmlns = "http://www.w3.org/2000/svg" الإصدار = "1.1">

<title> مثال على استخدام لقطات الشاشة الخلفية </title>

<desc> تشرح الأمثلة التالية استخدام لقطات الشاشة الخلفية في حالات مختلفة </desc>

<defs>

<filter id = "shiffbgandblur"

filterUnits = "userpaceonuse" x = "0" y = "0">

<SESC> يتجاهل هذا المرشح الصورة المصدر ، ولكنه يستخدم لقطات الشاشة الخلفية </desc>

<feoffset في = "backgroundimage" dx = "0" dy = "125" />

<fegaussianblur stddeviation = "8" />

</ilter>

<filter id = "shiffbgandblur_withsourcegraphic"

filterUnits = "userpaceonuse" x = "0" y = "0">

<SESC> يجمع هذا التأثير الخاص المرشح بين لقطات الخلفية وصور العنصر الحالي <//desc>

<feoffset في = "backgroundimage" dx = "0" dy = "125" />

<fegaussianblur stddeviation = "8" result = "Blur" />

<pemerge>

<femergenode في = "Blur"/>

<pemergenode في = "SourceGraphic"/>

</femerge>

</ilter>

</defs>

<g transform = "Translate (0،0)">

<SESC> الصورة الأولى هي تأثير عدم إضافة مرشح </desc>

<rect x = "25" y = "25" fill = "red"/>

<g عتامة = ". 5">

<circle cx = "125" cy = "75" r = "45" fill = "green"/>

<Polygon Points = "160،25 160،125 240،75" fill = "Blue"/>

</g>

<rect x = "5" y = "5" fill = "none" stroke = "Blue"/>

</g>

<g enable-background = "new" transform = "Translate (270،0)">

<SESC> الصورة الثانية هي استخدام تأثيرات المرشح على الحاوية </desc>

<rect x = "25" y = "25" fill = "red"/>

<g عتامة = ". 5">

<circle cx = "125" cy = "75" r = "45" fill = "green"/>

<Polygon Points = "160،25 160،125 240،75" fill = "Blue"/>

</g>

<g filter = "url (#ShiftBgandblur)"/>

<rect x = "5" y = "5" fill = "none" stroke = "Blue"/>

</g>

<g enable-background = "new" transform = "Translate (540،0)">

<SESC> الصورة الثالثة هي استخدام تأثير المرشح على الحاوية الداخلية ، انتبه إلى الفرق من الصورة الثانية </desc>

<rect x = "25" y = "25" fill = "red"/>

<g filter = "url (#shiftbgandblur)" opacity = ". 5">

<circle cx = "125" cy = "75" r = "45" fill = "green"/>

<Polygon Points = "160،25 160،125 240،75" fill = "Blue"/>

</g>

<rect x = "5" y = "5" fill = "none" stroke = "Blue"/>

</g>

<g enable-background = "new" transform = "Translate (810،0)">

<SESC> الصورة الرابعة هي استخدام تأثيرات المرشح على العناصر الرسومية </desc>

<rect x = "25" y = "25" fill = "red"/>

<g عتامة = ". 5">

<circle cx = "125" cy = "75" r = "45" fill = "green"/>

<Polygon Points = "160،25 160،125 240،75" Fill = "Blue"

Filter = "url (#ShiftBgandblur)"/>

</g>

<rect x = "5" y = "5" fill = "none" stroke = "Blue"/>

</g>

<g enable-background = "new" transform = "Translate (1080،0)">

<SESC> الصورة الخامسة هي استخدام تأثيرات مرشح مختلفة على العناصر الرسومية </desc>

<rect x = "25" y = "25" fill = "red"/>

<g عتامة = ". 5">

<circle cx = "125" cy = "75" r = "45" fill = "green"/>

<Polygon Points = "160،25 160،125 240،75" Fill = "Blue"

Filter = "url (#ShiftBgandBlur_WithSourceGraphic)"/>

</g>

<rect x = "5" y = "5" fill = "none" stroke = "Blue"/>

</g>

</svg>

العروض هي كما يلي (الصف الأول هو العروض النهائية ، والصف الثاني هو تأثير المرشح):

1. الصور في المجموعة الأولى لا تستخدم أي تأثيرات مرشح.

2. تستخدم المجموعة الثانية نفس الصورة ، ولكنها تتيح تأثير استخدام الخلفية.

3. تستخدم المجموعة الثالثة نفس الصورة ، ولكنها تستخدم تأثير المرشح في الحاوية الداخلية.

4. تستخدم المجموعة الرابعة تأثيرات المرشح على عناصر حاوية المحتوى.

5. تستخدم المجموعة الأخيرة نفس تأثير المرشح مثل المجموعة الرابعة ودمج الصورة المصدر.

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

فهرس البرنامج النصي: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

مركز التطوير: https://developer.mozilla.org/en/svg

المرجع الشعبي: http://www.chinasvg.com/

المستند الرسمي: http://www.w3.org/tr/svg11/