HTML5 SVG 2D مقدمة 9 - مقدمة وتطبيق الأقنعة وعناصر القناع

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

أنواع الأقنعة التي تدعمها SVG:

1. مسار القطع

مسار القطع هو رسم بياني يتكون من المسار أو النص أو الرسم البياني الأساسي. جميع الرسومات داخل مسار المقطع مرئية ، وجميع الرسومات خارج مسار المقطع غير مرئي.

2. قناع/قناع

القناع عبارة عن حاوية تحدد مجموعة من الرسومات وتستخدمها كوسيلة شفافة يمكن استخدامها لدمج الكائنات الأمامية والخلفيات.

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

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

تحدد سمة الفائض السلوك الذي يتم اتخاذه عندما يتجاوز محتوى عنصر ما حدود العنصر.

يمكن استخدام هذه الخاصية للعناصر (SVG ، الرمز ، الصورة ، الأجنبية) ، عناصر النمط والعلامة التي يمكن أن تنشئ نوافذ جديدة. قيمة هذه الخاصية كما يلي:

مرئي: يعرض جميع المحتوى ، حتى لو كان المحتوى بالفعل خارج حدود العنصر ، فهذه هي القيمة الافتراضية.

مخفي: إخفاء المحتوى خارج مسار القطع. يتم تحديد مسار المقطع بواسطة خاصية مقطع.

التمرير: في شكل شريط التمرير ، تقديم المحتوى وراءه.

Auto: باستخدام سلوك محدد المتصفح ، يبدو هذا غير موثوق به.

هذه الخاصية هي في الأساس نفس خاصية الاسم نفسه في CSS2 ، باستثناء ذلك في SVG ، هناك بعض إجراءات المعالجة المختلفة:

1. السمة الفائض ليس لها أي تأثير على عناصر أخرى غير العناصر التي تنشئ نافذة جديدة (SVG ، الرمز ، الصورة ، الأجنبية) ، عناصر النمط والعلامة.

2. مسار القطع يتوافق مع النافذة. إذا تم إنشاء نافذة جديدة ، يتم إنشاء مسار قطع جديد. مسار القطع الافتراضي هو حدود النافذة.

يتم استخدام خاصية مقطع لتعيين مسار مقطع النافذة الحالية.

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

p {clip: rect (5px ، 10px ، 10px ، 5px) ؛ }

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

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

يمكن أن يحتوي Clippath على عناصر مسار وعناصر نصية وعناصر رسومية أساسية (دائرة ، إلخ) واستخدام العناصر. إذا كان عنصر استخدام ، فيجب أن يشير مباشرة إلى المسار أو النص أو عناصر الرسوم البيانية الأساسية ، ولا يمكن الرجوع إلى العناصر الأخرى.

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

بالنسبة للكائنات الرسومية ، فإن مسار المقطع يساوي اتحاد مسار المقطع الذي تم تعيينه بمفرده مع مسارات مقطع جميع العناصر الخارجية (بما في ذلك مسارات القصاصة التي تم تعيينها بواسطة مسار مقطع وتفوق). بضع نقاط يجب ملاحظة:

1. عنصر الكليبيث نفسه لا يرث مسار المقطع المحدد من Clippath من العقدة الخارجية.

2. يمكن لعنصر clippath نفسه تعيين سمة مسار القصاصة. التأثير هو تقاطع مسارين.

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

4. سيقطع مسار القطع الفارغ جميع المحتويات في العنصر.

فيما يلي بعض السمات المهمة:

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

لا يتم تقديم عنصر clippath مباشرة ، ويتم الرجوع إليه من خلال مسار القصاصات ، وبالتالي فإن تعيين سمة العرض لعنصر clippath ليس له أي تأثير.

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

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

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

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

لا يمكن استخدام سمة إعادة المقطع إلا للعناصر الرسومية الداخلية لعنصر clippath. على سبيل المثال ، تعمل الإعدادات التالية:

<g>

<clippath id = "myclip">

<path d = "..." clip-rule = "evenodd" />

</clippath>

<rect clip-path = "url (#myclip)" ... />

</g>

لا يعمل إذا لم يكن العنصر في كليبا. على سبيل المثال ، لا تعمل الإعدادات التالية:

<g clip-rule = "nonzero">

<clippath id = "myclip">

<path d = "..." />

</clippath>

<rect clip-path = "url (#myclip)" clip-rule = "evenodd" ... />

</g>

أخيرًا ، دعونا نلقي نظرة على مثال صغير على مسار القطع:

<svg>

<g>

<clippath id = "myclip">

<path d = "m 10،10 l 10،20 l 20،20 l 20،10 z" clip-rule = "evenodd" />

</clippath>

</g>

<rect clip-path = "url (#myclip)" x = "10" y = "10" fill = "red" />

</svg>

فقط مساحة الزاوية اليسرى العلوية من المستطيل مرئية.

في SVG ، يمكنك تعيين أي عنصر رسومي أو عنصر G كقناع للكائن المقدم لدمج الكائن المقدم في الخلفية.

يتم تعريف القناع بواسطة عنصر القناع. عند استخدام القناع ، تحتاج فقط إلى الرجوع إلى القناع في سمة قناع الكائن.

قد يحتوي عنصر القناع على أي عنصر رسومي وعنصر حاوية (مثل G).

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

<svg viewbox = "0 0 800 300" version = "1.1"

xmlns = "http://www.w3

<defs>

<LineArgradient id = "Gradient" GradientUnits = "userpaceonuse"

x1 = "0" y1 = "0" x2 = "800" y2 = "0">

<stop offset = "0" stop-color = "white" stop-opacity = "0" />

<stop offset = "1" stop-color = "white" stop-opacity = "1" />

</lineargradient>

<mask id = "mask" maskunits = "userpaceonuse"

x = "0" y = "0">

<rect x = "0" y = "0" fill = "url (#gradient)" />

</scks>

<text id = "text" x = "400" y = "200"

font-family = "verdana" font-size = "100" text-anchor = "middle">

نص ملثمين

</text>

</defs>

<!-خلفية النافذة->

<rect x = "0" y = "0" fill = "#ff8080" />

<!- ​​الخطوة الأولى هي رسم نص مع قناع ، ويمكنك أن ترى أن تأثير الشفافية للقناع قد تم تطبيقه على الكلمات.

الخطوة الثانية هي رسم نص بدون قناع كمخطط للنص في الخطوة الأولى ->

<استخدم xlink: href = "#text" fill = "blue" mask = "url (#mask)" />

<استخدم xlink: href = "#text" fill = "none" stroke = "black" width = "2" />

</svg>

يظهر التأثير في الشكل أدناه:

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

تم تقديم تعريف واستخدام الأقنعة. دعونا نلقي نظرة على عدة سمات مهمة:

نظام إحداثيات يحدد الإحداثيات (x ، y) والطول (العرض ، الارتفاع) في عنصر قناع: نظام إحداثيات المستخدم يشير إلى عنصر القناع ، أو القيمة النسبية للمربع المحدد بالنسبة لعنصر القناع المشار إليه. معنى هذه القيمة هو نفس المعنى في الفصل السابق.

يحدد نظام الإحداثيات لعناصر الأطفال في عنصر القناع.

يتم تعريف موقف وحجم القناع. بموجب إحداثيات BOBJECTBOUNDINGBOX الافتراضية ، تكون القيم الافتراضية -10 ٪ و -10 ٪ و 120 ٪ و 120 ٪.

فهرس البرنامج النصي: 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/