إضافة زوايا مستديرة للصور: الدليل التقني لانحناء الواجهات والـ Squircles وأقنعة ألفا
⚡كيفية تدوير زوايا الصورة في 3 خطوات بسيطة
1. استيراد صورتك
قم بسحب وإسقاط صورتك بصيغة JPG أو PNG أو WebP في مساحة العمل، أو استعرض الملفات من وحدة تخزين جهازك. تقرأ الأداة أبعاد صورتك فورياً داخل متصفحك.
2. ضبط نصف قطر الزوايا
استخدم شريط التمرير التفاعلي لتحديد نصف قطر الانحناء المطلوب بالبكسل - من انحناء واجهات رقيق بحجم 12 بكسل إلى قناع دائري كامل بنسبة 50% للصورة الرمزية.
3. تنزيل صورتك بصيغة PNG المستديرة
عاين النتيجة المنعمة في الوقت الفعلي فوق شبكة الشفافية. انقر فوق 'تنزيل صورة PNG' لحفظ صورتك ذات الزوايا المنحنية الشفافة مباشرة على جهازك.
تعد الزوايا المستطيلة الحادة بزاوية 90 درجة مخلفات تاريخية لشاشات أنبوب الأشعة المهبطية الأولى ومعماريات ذاكرة شبكة البكسل البدائية. وفي التصميم الرقمي المعاصر - الذي تقوده إرشادات واجهة المستخدم البشرية لـ iOS وmacOS من Apple، وMaterial Design 3 من Google، وأطر عمل CSS الحديثة مثل Tailwind UI - أصبحت الزوايا المستديرة والانحناءات الانسيابية اللغة البصرية الشاملة للأناقة وسهولة الوصول وبيئة العمل الرقمية المريحة. وتكشف الأبحاث النفسية الفيزيولوجية أن الزوايا الحادة تخلق احتكاكاً بصرياً يثير يقظة إدراكية طفيفة ويسحب بصر المشاهد نحو الأطراف والمحيط الخارجي. في المقابل، توجه الزوايا المستديرة النظرة البصرية المركزية (foveal gaze) بسلاسة إلى الداخل نحو الموضوع الفوتوغرافي الرئيسي.
تمنحك أداة تدوير زوايا الصورة المدمجة في المتصفح تحكماً جراحياً في انحناء الصورة. وسواء كنت بحاجة إلى أنصاف أقطار دقيقة بحجم 8 إلى 16 بكسل لمكونات بطاقات الويب الحديثة، أو منحنيات واسعة بحجم 32 بكسل لنماذج عروض متاجر التطبيقات، أو أقنعة دائرية كاملة بنسبة 50% لإنشاء صور رمزية دائرية نقية لحساباتك؛ يقوم محركنا بنحت صورك بدقة رياضية متناهية للبكسلات الفرعية. وتُعرض مناطق الزوايا المقتطعة في قنوات ألفا شفافة بدقة 32 بت فائقة النعومة ومضادة للتشوه - تطفو بسلاسة فوق الخلفيات الفاتحة أو الداكنة أو المتدرجة. وتنفذ العملية بأكملها محلياً بنسبة 100% من جانب العميل عبر واجهات برمجة تطبيقات Canvas المسرعة عتادياً؛ دون أن تلمس صورك الشخصية وأصول الواجهات أي خوادم سحابية عن بُعد.
اقرأ الدليل التقني الكامل
سيكولوجية الانحناء: الانحياز البصري وبيئة العمل المعرفية المريحة
في الإدراك البصري البشري وعلم النفس العصبي، تعالج القشرة البصرية للدماغ الزوايا الهندسية الحادة بيقظة دفاعية مشددة. ففي الطبيعة، تمثل الزوايا الحادة أخطاراً محتملة (الأشواك، وأنياب المفترسات، والصخور المسننة)، في حين تنقل الخطوط الدائرية العضوية الأمان والنعومة والتناغم الطبيعي.
وعند تطبيقها على تصميم الواجهات الرقمية، تسبب حدود الصور المستطيلة الحادة 'تشتتاً بصرياً': حيث تسحب الرؤوس الحادة تركيز العين نحو الزوايا الأربع المحيطة بالصورة. ومن خلال تطبيق نصف قطر زاوية انسيابي، يتم تنعيم متجهات الحواف الصلبة. وتتم إعادة توجيه نظرة المشاهد بصورة طبيعية نحو موضوع التركيز الأساسي - وجه الشخص في لقطة البورتريه، أو تفاصيل منتج في متجر إلكتروني، أو المقاييس الرئيسية في مخطط بياني. ويقلل هذا التحول النفسي الدقيق من إجهاد العين ويزيد بشكل كبير من التفاعل البصري.
الهندسة الرياضية: الأقواس الدائرية ومنحنيات بيزييه والانحناء المستمر
في رسومات الحاسوب ثنائية الأبعاد، يتطلب تدوير زوايا المستطيل توليد مسار قص متجهي مغلق. ويُبنى المستطيل المستدير القياسي عن طريق ربط أربعة أجزاء حواف خطية بأربعة أقواس دائرية تمثل ربع دائرة بزاوية 90 درجة يحددها نصف القطر `R`.
وفي حين تبدو الأقواس الدائرية القياسية (هندسة `arcTo`) نقية للأنصاف الأقطار الصغيرة، إلا أن أنصاف الأقطار الأكبر يمكن أن تُظهر مفاجأة بصرية عند نقطة التماس التي يلتقي فيها الخط المستقيم بالمنحنى الدائري - وهي ظاهرة تُعرف في التصميم الصناعي باسم الاستمرارية الهندسية G1. وتحقق أنظمة الواجهات الحديثة الفاخرة (مثل منحنى squircle الأيقوني لشركة Apple أو منحنى Lamé، المحدد بمعادلة القطع الفائق `|x/a|^n + |y/b|^n = 1` حيث `n ≈ 4 إلى 5`) انحناءً مستمراً من الدرجة G2؛ مما يغير معدل تقوس المنحنى تدريجياً للتخلص من التحولات المفاجئة.
يحسب محركنا إحداثيات المسار للبكسلات الفرعية بدقة رياضية متناهية، مولداً تقريبات منحنيات بيزييه الانسيابية التي تلغي التحولات القاسية وتنتج خطوطاً عصرية وانسيابية عبر أي دقة شاشة.
تنعيم البكسلات الفرعية: شفافية نقية لقناة ألفا عبر 256 مستوى تعتيم
عند نحت هندسة منحنية عبر شبكة مستطيلة منفصلة من البكسلات المادية، يكمن التحدي الأساسي في تنعيم الحواف (anti-aliasing). فإذا طبقت أداة ما قصاً ثنائياً (حيث تكون البكسلات داخل المنحنى معتمة بنسبة 100% والبكسلات خارجه شفافة بنسبة 100%)، فسيُظهر المحيط المنحني الناتج درجات سلالم محببة قبيحة (تسنن)، مما يدمر الجودة البصرية.
يقيم محرك تدوير الزوايا لدينا التغطية المساحية الهندسية الدقيقة لكل بكسل حدودي يتقاطع مع مسار القص. وتُخصص لبكسلات الحدود قيمة عتامة ألفا كسرية دقيقة تتراوح من 0 إلى 255. فالبكسل المغطى بنسبة 40% بالمنحنى يتلقى قيمة ألفا تبلغ 102 (`0.40 * 255`). ويضمن هذا التنعيم متعدد العينات للبكسلات الفرعية أنه عند وضع صورتك المستديرة فوق واجهات الوضع الداكن، أو التدرجات اللونية النابضة بالحياة، أو خلفيات الفيديو، فإن المحيط المنحني يمتزج بنعومة حريرية خالية تماماً من الحواف الخشنة أو الهالات البيضاء القبيحة.
ميزة أداء الويب: الصور النقطية المعالجة مسبقاً مقابل إعادة رسم border-radius في CSS
يعتمد مطورو الواجهات الأمامية المعاصرون بانتظام على خصائص CSS (`border-radius: 16px; overflow: hidden;`) لتدوير الصور ديناميكياً في المتصفح. ورغم ملاءمة هذه الطريقة، إلا أن تطبيق قص CSS على عشرات الصور عالية الدقة في موجز ويب للهواتف سريع التمرير (مثل التغذية الإخبارية، أو كتالوجات المتاجر، أو شبكات الأعمال) يفرض حملاً برمجياً كبيراً على وحدة معالجة الرسومات (GPU).
يجبر قص الفائض في CSS محركات عرض متصفحات الهواتف (Chromium وWebKit) على تخصيص طبقات تركيب منفصلة وتنفيذ أقنعة مخزن مؤقت استنسل في كل إطار تمرير. وفي الهواتف الذكية متوسطة الأداء، يمكن أن يؤدي ذلك إلى هبوط في معدل الإطارات وتمرير ثقيل. ومن خلال التجهيز المسبق للزوايا المستديرة مباشرة في ملف الصورة النقطية كملف PNG أو WebP شفاف بدقة 32 بت، يتعامل المتصفح مع الأصل كصورة نقطية ثابتة وبسيطة. وتنخفض تكاليف تركيب الطبقات إلى الصفر، مما يقضي على تباطؤ الرسم ويضمن تجربة تمرير انسيابية بمعدل 60 إطاراً في الثانية.
مكونات الواجهات ونماذج متاجر التطبيقات والصور الرمزية الدائرية
تخدم الصور ذات الزوايا المستديرة وظائف لا غنى عنها في تدفقات العمل الرقمية الحديثة:
1. مكونات بطاقات الواجهات الحديثة: يؤدي تعيين نصف قطر زاوية بين 12 و24 بكسل إلى مطابقة مثالية لمواصفات أنظمة التصميم المعاصرة (Apple iOS وmacOS Sonoma وTailwind UI وMaterial You)، مما ينتج مصغرات بطاقات مصقولة لشبكات المدونات، واللافتات التسويقية، ولوحات تحكم البرمجيات.
2. نماذج متاجر App Store وPlay Store: يستخدم مطورو تطبيقات الهواتف الزوايا المستديرة لإنشاء نماذج واقعية للأجهزة، ولافتات ترويجية، ومعارض أعمال تعكس بدقة هندسة أيقونات التطبيقات الأصلية.
3. أيقونات الملفات الشخصية وفرق العمل الدائرية: يؤدي ضبط نصف قطر الزاوية على 50% لصورة مربعة (1:1) إلى تحويل أي لقطة بورتريه قياسية إلى صورة رمزية دائرية مثالية لدلائل Slack المؤسسية، وملفات LinkedIn، وترويسات السير الذاتية، وشارات المنتديات.
سير عمل إنتاج الواجهات المتكامل: القص، التدوير، إضافة الظل والضغط
لصناعة مكونات واجهة مستخدم رقمية بمستوى الاستوديوهات الاحترافية، اتبع خط المعالجة الانسيابي التالي:
الخطوة 1 - التكوين المربع: إذا كنت تنوي إنشاء صورة رمزية دائرية أو بطاقة واجهة متوازنة، فقص صورتك بنسبة مربعة 1:1 عبر [قص الصورة](/ar/tools/image/crop/) أو [قص الصورة الرمزية](/ar/tools/image/avatar-crop/).
الخطوة 2 - انحناء الزوايا: طبق نصف قطر الزاوية المطلوب باستخدام أداة تدوير زوايا الصورة هذه لتوليد زوايا شفافة وانسيابية.
الخطوة 3 - الارتفاع البعدي: امنح بطاقتك المستديرة عمقاً فيزيائياً واقعياً من خلال تطبيق ظل ساقط ناعم باستخدام أداة [إضافة ظل للصورة](/ar/tools/image/add-shadow/).
الخطوة 4 - التأطير اللوني (اختياري): إذا كان تصميمك يتطلب إطاراً ملوناً بارزاً، فأضفه قبل التدوير عبر [إضافة حدود للصورة](/ar/tools/image/add-border/).
الخطوة 5 - النشر عبر الويب للجيل التالي: صدر الأصل الشفاف النهائي باستخدام [تحويل PNG إلى WebP](/ar/tools/image/convert-png-to-webp/) لتقليص أحجام التنزيل بنسبة تصل إلى 70% مع الحفاظ التام على شفافية ألفا.
💡نصائح احترافية للحصول على زوايا مستديرة مثالية
- •يطابق نصف قطر الزاوية بين 16 و24 بكسل بدقة معايير تصميم بطاقات Apple iOS وTailwind UI الحديثة.
- •لإنشاء صورة ملف شخصي دائرية نقية، تأكد أولاً من اقتصاص صورتك بنسبة مربعة 1:1 واضبط شريط تمرير نصف القطر على 50%.
- •احرص دائماً على حفظ صورتك المستديرة بصيغة PNG للحفاظ على شفافية الزوايا؛ حيث يحول الحفظ بصيغة JPG الزوايا الشفافة إلى لون أبيض أو أسود معتم.
- •ادمج الأداة مع أداة إضافة الظل بعد التدوير لتحويل الصور المسطحة إلى نماذج بطاقات واجهات تفاعلية وعائمة.
- •يقضي التجهيز المسبق للزوايا المستديرة مباشرة في ملفات الصور على تباطؤ إعادة رسم GPU في متصفحات الهواتف الناتج عن قص CSS المكثف.
- •عالج صوراً شخصية متعددة للموظفين بالتتابع داخل لسان تبويب متصفحك دون قوائم انتظار للرفع أو تأخيرات سحابية.
- •تنفذ جميع عمليات القص المتجهي وترميز PNG محلياً بنسبة 100% في ذاكرة RAM لجهازك، مما يضمن بقاء صورك الشخصية سرية تماماً.
🛡️قص المسار المتجهي من جانب العميل، وأقنعة Canvas ألفا والأمان دون رفع
تعمل أداة تدوير زوايا الصورة بالكامل داخل بيئة الحماية المعزولة من جانب العميل في متصفح الويب الحديث لديك. عند تحميل صورة، يفك المتصفح ترميز تدفق البيانات الثنائية إلى مصفوفة بكسل RGBA غير مضغوطة بدقة 32 بت في ذاكرة العتاد. ويُخصص سياق HTML5 Canvas2D أو OffscreenCanvas داخلي يطابق أبعاد بكسل الصورة المصدر بدقة. يحدد المحرك مسار قص متجهي ثنائي الأبعاد مغلق باستخدام منحنيات بيزييه التربيعية وهندسة الأقواس الدائرية (`ctx.beginPath()` و`ctx.moveTo()` و`ctx.arcTo()` و`ctx.closePath()` و`ctx.clip()`). وتُرسم صورة المصدر عبر هذا القالب المتجهي باستخدام إجراءات `drawImage` المسرعة عتادياً. يحسب منقط الرسومات الأصلي للمتصفح تغطية مساحة البكسلات الفرعية على طول المحيط المنحني، كاتباً قيم عتامة كسرية منعمة الحواف (من 0 إلى 255) في قناة ألفا لمخزن بيانات ImageData. وتُصدر الصورة الناتجة كتدفق بيانات PNG بنظام RGBA ذي الألوان الحقيقية بدقة 32 بت متوافق مع معيار RFC 2083 وتُطابق مع عنوان URL محلي مؤقت (blob:2run.tools/...). ونظراً لعدم نقل أي بيانات عبر الشبكات الخارجية إلى خوادم سحابية، تظل لقطات البورتريه الشخصية وصور فرق العمل وتصميمات الواجهات خاصة بنسبة 100% ومحمية تماماً من اعتراض أي طرف ثالث.
التقنيات: WebAssembly • خيوط معالجة Web Workers المتعددة • واجهة HTML5 Canvas
الخصوصية: لا تغادر الملفات جهازك ولا تُخزَّن سحابيًا؛ والتحليلات تعمل بموافقتك فقط.
أدوات مكملة شائعة الاستخدام
قم بدمج هذه الأدوات معاً للحصول على أفضل نتائج وسرعة.
إضافة إطار للصور
إضافة إطارات وهوامش قابلة للتخصيص حول الصور بألوان وسماكات متنوعة.
إضافة ظل للصور
تطبيق تأثيرات الظل الساقط الاحترافية حول الرسومات وتصميمات واجهات المستخدم.
ضغط الصور
تقليل حجم ملفات JPG و PNG و WebP دون فقدان الجودة المرئية. معالجة سريعة وآمنة 100% داخل المتصفح.
تغيير حجم الصور
تغيير أبعاد الصورة بالبكسل أو النسبة المئوية مع الحفاظ على تناسق الأبعاد.