Şəkillərə yuvarlaq künclər əlavə etmək: UI əyriliyi, squircle formaları və alfa maskaları üzrə texniki bələdçi
⚡Şəkil künclərini 3 sadə addımda necə yuvarlaqlaşdırmaq olar
1. Şəklinizi idxal edin
JPG, PNG və ya WebP fotonuzu studiya iş sahəsinə sürükləyib buraxın və ya cihazınızın yaddaşından seçin. Alət şəkil ölçülərini brauzerinizdə dərhal oxuyur.
2. Künc radiusunu tənzimləyin
İnteraktiv sürgü ilə istədiyiniz əyri radiusunu piksellə seçin — zərif 12px UI əyrisindən tam 50% dairəvi avatar maskasına qədər.
3. Yuvarlaq PNG-ni endirin
Şəffaflıq şəbəkəsi üzərində canlı hamarlaşdırılmış önizləməni yoxlayın. Şəffaf əyri künclü şəkli dərhal cihazınıza saxlamaq üçün 'PNG şəklini endir' düyməsinə klikləyin.
Sərt 90 dərəcəlik düzbucaqlı künclər erkən katod-şüa displeylərinin və primitiv piksel şəbəkəsi yaddaş arxitekturalarının tarixi qalıqlarıdır. Müasir rəqəmsal dizaynda — Apple-ın iOS və macOS İnsan İnterfeysi Qaydaları, Google-un Material Design 3 və Tailwind UI kimi müasir CSS freymvorkları tərəfindən dəstəklənən — yuvarlaq künclər və hamar əyrilik zəriflik, əlçatanlıq və rəqəmsal erqonomikanın universal vizual dilinə çevrilib. Psixofizioloji tədqiqatlar göstərir ki, iti künclər vizual sürtünmə yaradır, yüngül idrak ayıqlığı oyadır və tamaşaçının baxışını kənarlara doğru çəkir. Əksinə, yuvarlaq künclər fovea baxışını hamar şəkildə mərkəzi foto obyektinə yönəldir.
Brauzerdə işləyən Yuvarlaq künclər əlavə et alətimiz şəkil əyriliyi üzərində dəqiq nəzarət verir. Müasir veb kart komponentləri üçün zərif 8px–16px mikro radiuslar, tətbiq mağazası maketləri üçün geniş 32px əyrilər və ya qüsursuz profil avatarları üçün tam 50% dairəvi maskalar lazım olsun — mühərrikimiz şəkillərinizi riyazi subpiksel dəqiqliyi ilə formalaşdırır. Kəsilmiş künc sahələri ipək kimi hamar, hamarlaşdırılmış 32 bitlik şəffaf alfa kanallarına çevrilir və açıq, tünd və ya qradiyent fonlar üzərində qüsursuz görünür. Aparat sürətləndirməli Canvas API-ləri ilə 100% brauzer tərəfində işlədiyi üçün şəxsi portretləriniz və xüsusi UI aktivləriniz heç vaxt uzaq bulud serverlərinə toxunmur.
Tam texniki bələdçini oxu
Əyriliyin psixologiyası: fovea meyli və idrak vizual erqonomikası
İnsan vizual qavrayışında və neyropsixologiyada iti həndəsi bucaqlar və kəskin künclər beynin görmə qabığı tərəfindən artırılmış müdafiə ayıqlığı ilə emal olunur. Təbiətdə iti künclər potensial təhlükələri (tikanlar, yırtıcı dişləri, kələ-kötür qayalar) təmsil edir, yuvarlaq, üzvi konturlar isə təhlükəsizlik, hamarlıq və təbii harmoniya ifadə edir.
Rəqəmsal interfeys dizaynına tətbiq ediləndə iti düzbucaqlı foto sərhədləri 'fovea yayınması' yaradır: iti təpələr gözün fokusunu şəklin dörd kənar küncünə çəkir. Hamar künc radiusu tətbiq etməklə kənarların sərt istiqamət vektorları yumşalır. Tamaşaçının baxışı təbii şəkildə əsas fokus obyektinə — portretdə insanın üzünə, e-ticarət məhsulunun detallarına və ya infoqrafikadakı əsas göstəricilərə — yönəlir. Bu incə psixoloji dəyişiklik göz yorğunluğunu azaldır və vizual cəlbediciliyi xeyli artırır.
Riyazi həndəsə: dairəvi qövslər, Bezier splaynları və davamlı əyrilik
Kompüter 2D qrafikasında düzbucaqlının künclərini əyməq qapalı həndəsi vektor kəsmə yolu yaratmağı tələb edir. Standart yuvarlaq düzbucaqlı dörd xətti kənar seqmentini `R` radiusu ilə müəyyən edilən dörd 90 dərəcəlik dörddəbir dairə qövsü ilə birləşdirməklə qurulur.
Standart dairəvi qövslər (`arcTo` həndəsəsi) kiçik radiuslarda təmiz görünsə də, böyük radiuslarda düz xəttin dairəvi əyri ilə birləşdiyi toxunma nöqtəsində vizual kəskinlik yarana bilər — sənaye dizaynında bu G1 həndəsi davamlılıq adlanır. Müasir yüksək səviyyəli interfeys sistemləri (Apple-ın ikonik 'squircle' forması və ya `|x/a|^n + |y/b|^n = 1` superellips tənliyi ilə müəyyən edilən Lamé əyrisi, burada `n ≈ 4 to 5`) G2 davamlı əyriliyə nail olur, əyrilik dəyişmə sürətini tədricən keçirərək kəskin toxunma keçidlərini aradan qaldırır.
Mühərrikimiz subpiksel yol koordinatlarını son dərəcə riyazi dəqiqliklə hesablayır, kəskin keçidləri aradan qaldıran hamar Bezier əyri yaxınlaşmaları yaradır və istənilən ekran ölçüsündə müasir, axıcı konturlar təqdim edir.
Subpiksel hamarlaşdırma: qüsursuz 256 səviyyəli alfa kanal şəffaflığı
Fiziki piksellərin diskret düzbucaqlı şəbəkəsi üzərində əyri həndəsə formalaşdırarkən əsas çətinlik hamarlaşdırmadır (anti-aliasing). Alət ikili kəsmə tətbiq edərsə (əyrinin daxilindəki piksellər 100% qeyri-şəffaf, xaricindəkilər 100% şəffaf), nəticədə əyri perimetrdə çirkin pilləli 'nərdivan' pikselləşməsi yaranır və vizual zəriflik məhv olur.
Künc yuvarlaqlaşdırma mühərrikimiz kəsmə yolu ilə kəsişən hər sərhəd pikselinin dəqiq həndəsi sahə örtüyünü qiymətləndirir. Sərhəd piksellərinə 0 ilə 255 arasında dəqiq kəsr alfa şəffaflıq dəyəri təyin edilir. Əyri tərəfindən 40% örtülmüş piksel 102 alfa dəyəri alır (`0.40 * 255`). Bu çoxnümunəli subpiksel hamarlaşdırma yuvarlaq şəkliniz qaranlıq rejimli interfeyslər, canlı rəng qradiyentləri və ya video fonlar üzərində yerləşdiriləndə əyri perimetrin ipək kimi hamar qarışmasını, kələ-kötür kənarlar və xoşagəlməz ağ halo olmadan təmin edir.
Veb performans üstünlüyü: hazır rastrlar və CSS border-radius yenidən çəkilmələri
Müasir frontend tərtibatçıları şəkilləri brauzerdə dinamik yuvarlaqlaşdırmaq üçün tez-tez CSS xüsusiyyətlərinə (`border-radius: 16px; overflow: hidden;`) güvənir. Rahat olsa da, sürətlə sürüşdürülən mobil veb lentində (sosial media lenti, e-ticarət kataloqu və ya portfolio şəbəkəsi) onlarla yüksək ölçülü şəklə CSS kəsmə tətbiq etmək əhəmiyyətli GPU göstərmə yükü yaradır.
CSS overflow kəsməsi mobil brauzer mühərriklərini (Chromium, WebKit) ayrı birləşdirmə qatları ayırmağa və hər sürüşdürmə kadrında icra zamanı stensil bufer maskaları tətbiq etməyə məcbur edir. Orta səviyyəli Android smartfonlarda bu, kadr itkisinə və ləng sürüşdürməyə səbəb ola bilər. Yuvarlaq künclər birbaşa şəkil rastrına şəffaf 32 bitlik PNG və ya WebP kimi yerləşdirildikdə brauzer aktivə sadə statik bitmap kimi baxır. Qat birləşdirmə xərcləri sıfıra enir, çəkiliş ləngimələri aradan qalxır və axıcı 60fps sürüşdürmə təcrübəsi təmin olunur.
UI komponentləri, tətbiq mağazası maketləri və dairəvi profil avatarları
Yuvarlaq şəkillər müasir rəqəmsal iş axınlarında əvəzsiz funksiyalar yerinə yetirir:
1. Müasir UI kart komponentləri: 12px–24px arası künc radiusu müasir dizayn sistemi spesifikasiyalarına (Apple iOS, macOS Sonoma, Tailwind UI, Material You) mükəmməl uyğun gəlir və bloq şəbəkələri, marketinq bannerləri və proqram panelləri üçün cilalanmış kart miniatürləri yaradır.
2. App Store və Play Store maketləri: Mobil tətbiq tərtibatçıları yerli tətbiq ikonu həndəsəsini əks etdirən realistik cihaz maketləri, tanıtım bannerləri və portfolio nümayişləri yaratmaq üçün yuvarlaq künclərdən istifadə edir.
3. Dairəvi komanda və avatar ikonları: Kvadrat (1:1) fotoda künc radiusunu 50%-ə qaldırmaq istənilən standart portreti korporativ Slack kataloqları, LinkedIn profilləri, CV başlıqları və icma forumu nişanları üçün qüsursuz dairəvi profil avatarına çevirir.
Əlaqəli UI istehsal axını: kəs, yuvarlaqlaşdır, kölgə və sıx
Studiya səviyyəli rəqəmsal UI komponentləri yaratmaq üçün bu sadələşdirilmiş emal zəncirini izləyin:
Addım 1 - Kvadrat kompozisiya: Dairəvi avatar və ya balanslı UI kartı yaratmaq niyyətindəsinizsə, Şəkli kəs və ya Avatar kəsimi aləti ilə fotonu 1:1 kvadrat nisbətinə kəsin.
Addım 2 - Künc əyriliyi: Bu Yuvarlaq künclər əlavə et aləti ilə istədiyiniz künc radiusunu tətbiq edin və hamar şəffaf künclər yaradın.
Addım 3 - Ölçülü hündürlük: Kölgə əlavə et aləti ilə yumşaq kölgə tətbiq edərək yuvarlaq kartınıza realistik fiziki dərinlik verin.
Addım 4 - Rəng çərçivəsi (istəyə bağlı): Dizaynınız fərqli rəngli çərçivə tələb edirsə, yuvarlaqlaşdırmadan əvvəl Çərçivə əlavə et aləti ilə onu əlavə edin.
Addım 5 - Yeni nəsil veb nəşri: Alfa şəffaflığını qoruyaraq endirmə həcmini 70%-ə qədər azaltmaq üçün hazır şəffaf aktivi PNG-ni WebP-yə çevir aləti ilə ixrac edin.
💡Mükəmməl yuvarlaq künclər üçün tövsiyələr
- •16px–24px arası künc radiusu müasir Apple iOS və Tailwind UI kart komponenti dizayn standartlarına mükəmməl uyğundur.
- •Qüsursuz dairəvi profil şəkli yaratmaq üçün əvvəlcə şəklin 1:1 kvadrat nisbətində kəsildiyinə əmin olun və radius sürgüsünü 50%-ə qoyun.
- •Şəffaf künclərin qorunması üçün yuvarlaq şəkli həmişə PNG kimi saxlayın; JPG kimi saxlamaq şəffaf küncləri bütöv ağ və ya qaraya çevirəcək.
- •Düz şəkilləri havada süzülən, toxunulan UI kart maketlərinə çevirmək üçün yuvarlaqlaşdırmadan sonra Kölgə əlavə et aləti ilə birləşdirin.
- •Yuvarlaq künclərin birbaşa şəkil fayllarına yerləşdirilməsi ağır CSS overflow kəsməsinin yaratdığı mobil brauzer GPU yenidən çəkilmə ləngiməsini aradan qaldırır.
- •Bir neçə əməkdaş portretini yükləmə növbəsi və bulud server gecikməsi olmadan brauzer tabınızda ardıcıl emal edin.
- •Bütün vektor kəsmə və PNG kodlaması 100% cihazınızın yaddaşında yerli icra olunur və şəxsi portretləriniz ciddi şəkildə məxfi qalır.
🛡️Brauzer tərəfli vektor yol kəsməsi, Canvas alfa maskaları və sıfır yükləmə məxfiliyi
Yuvarlaq künclər əlavə et alətimiz tamamilə müasir veb brauzerinizin təcrid olunmuş brauzer tərəfli mühitində işləyir. Şəkil yüklənəndə brauzer bit axınını aparat yaddaşında sıxılmamış 32 bitlik RGBA piksel massivinə açır. Mənbə şəklin dəqiq piksel ölçülərinə uyğun daxili HTML5 Canvas2D və ya OffscreenCanvas konteksti ayrılır. Mühərrik kvadratik Bezier əyriləri və dairəvi qövs həndəsəsi ilə qapalı 2D vektor kəsmə yolu müəyyən edir (`ctx.beginPath()`, `ctx.moveTo()`, `ctx.arcTo()`, `ctx.closePath()` və `ctx.clip()`). Mənbə şəkil aparat sürətləndirməli `drawImage` funksiyaları ilə bu vektor stensil vasitəsilə çəkilir. Brauzerin yerli qrafika rastrlaşdırıcısı əyri perimetr boyunca subpiksel sahə örtüyünü hesablayır və ImageData buferinin alfa kanalına hamarlaşdırılmış kəsr şəffaflıq dəyərləri (0–255) yazır. Nəticədə alınan qrafika RFC 2083-ə uyğun 32 bitlik truecolor RGBA PNG bit axını kimi ixrac edilir və müvəqqəti yerli Blob URL-ə (blob:2run.tools/...) bağlanır. Heç bir məlumat xarici şəbəkələr vasitəsilə bulud serverlərinə ötürülmədiyi üçün şəxsi portretləriniz, korporativ komanda fotolarınız və xüsusi UI dizaynlarınız 100% məxfi qalır və üçüncü tərəflərin ələ keçirməsindən qorunur.
Texnologiya: WebAssembly • Çoxaxınlı Web Workers • HTML5 Canvas API
Məxfilik: Fayllar cihazınızı tərk etmir və buludda saxlanmır; analitika yalnız razılığınızla işləyir.
Bu iş axını üçün tamamlayıcı alətlər
Yüksək performanslı iş axınları üçün bu brauzer alətlərini birlikdə istifadə edin.
Çərçivə əlavə et
Şəkilləri fərdi çərçivə, rəng və kənar boşluqlarla əhatə edin.
Kölgə əlavə et
Qrafiklərə və UI maketlərinə peşəkar kölgə effekti tətbiq edin.
Şəkli sıx
JPG, PNG və WebP fayllarının ölçüsünü görünən keyfiyəti itirmədən azaldın. Sürətli və 100% məxfi brauzer sıxması.
Şəklin ölçüsünü dəyiş
Nisbətləri qoruyaraq dəqiq piksel və ya faizlə ölçünü dəyişin və formatı çevirin.