Meneroka CSS Paint API: Sempadan Poligon

Mewujudkan bentuk yang rumit dengan clip-path adalah mudah, tetapi menambah sempadan memberikan cabaran yang berterusan. CSS tidak mempunyai penyelesaian yang mantap, sering memerlukan penyelesaian yang rumit. Artikel ini menunjukkan penyelesaian menggunakan API cat CSS.

Siri Eksplorasi API CSS Cat CSS ini berterusan:

• Bahagian 1: Kesan Pemecahan Imej
• Bahagian 2: Animasi Gumpalan
• Bahagian 3: Sempadan Polygon (artikel semasa)
• Bahagian 4: Bentuk Bulat

Butiran artikel ini mewujudkan sempadan poligon. Ingat, teknik ini kini disokong hanya dalam pelayar berasaskan kromium (Chrome, Edge, Opera). Semak Caniuse untuk maklumat keserasian terkini.

Kod ini tetap ringkas dan mudah disesuaikan, memerlukan hanya pelarasan pembolehubah kecil untuk mengubah bentuknya.

Konsep teras

Sempadan poligon dicapai dengan menggabungkan clip-path dan topeng tersuai yang dihasilkan dengan API cat:

1. Mulakan dengan segi empat tepat standard.
2. Sapukan clip-path untuk membentuknya menjadi poligon.
3. Sapukan topeng tersuai untuk membuat sempadan poligon.

Struktur CSS

CSS untuk langkah clip-path adalah:

.box {
  --Path: 50% 0,100% 100%, 0 100%;

  Lebar: 200px;
  Ketinggian: 200px;
  Latar Belakang: Merah;
  paparan: blok sebaris;
  Clip-Path: Polygon (var (-Path));
}

Kuncinya ialah pembolehubah CSS --path . Kedua-dua clip-path dan topeng menggunakan pembolehubah ini untuk parameter yang konsisten.

Kod CSS lengkap menjadi:

.box {
  --Path: 50% 0,100% 100%, 0 100%;
  -Border: 5px;

  Lebar: 200px;
  Ketinggian: 200px;
  Latar Belakang: Merah;
  paparan: blok sebaris;
  Clip-Path: Polygon (var (-Path));
  -Webkit-mask: cat (polygon-sempadan);
}

Selain clip-path , topeng tersuai digunakan, dan --border mengawal ketebalan sempadan. CSS tetap mudah dan generik, menonjolkan kemudahan penggunaan API cat.

Pelaksanaan JavaScript

Rujuk Bahagian 1 siri ini untuk pemahaman yang lebih baik mengenai struktur API cat.

Kod JavaScript paint() Fungsi:

const points = properties.get ('-Path'). ToString (). Split (',');
const b = parsefloat (properties.get ('-sempadan'). nilai);
const w = size.width;
const h = size.height;

const cc = function (x, y) {
  // ...
}

var p = mata [0] .trim (). split ("");
p = cc (p [0], p [1]);

ctx.beginpath ();
ctx.moveto (p [0], p [1]);
untuk (var i = 1; i <points.length i p="mata" .trim split ctx.lineto ctx.closepath ctx.linewidth="2" b ctx.strokestyle="'Black';" ctx.stroke><p> Kod ini membaca pembolehubah <code>--path</code> , mengubahnya menjadi array titik, dan kemudian menarik poligon menggunakan <code>moveTo</code> dan <code>lineTo</code> . Poligon ini mencerminkan poligon <code>clip-path</code> . Strok mencipta sempadan; Pengisian bentuknya telus.</p><p> Mengubah laluan dan ketebalan membolehkan sempadan poligon yang pelbagai. Kecerunan dan imej boleh menggantikan warna pepejal kerana penggunaan harta <code>background</code> CSS.</p><p> Untuk menggabungkan kandungan, elemen pseudo diperlukan untuk mengelakkan keratan. Hartanah topeng dipindahkan ke elemen pseudo, manakala <code>clip-path</code> kekal pada elemen utama.</p><h3> Soalan yang sering ditanya</h3><p> Beberapa soalan umum mengenai skrip yang disediakan ditangani di bawah.</p><h4> Apakah fungsi <code>cc()</code> ?</h4><p> Fungsi ini menukarkan koordinat titik (peratusan atau nilai piksel) ke dalam nilai piksel yang boleh digunakan dalam elemen kanvas.</p><pre class="brush:php;toolbar:false"> const cc = function (x, y) {
  var fx = 0, fy = 0;
  jika (x.indexof ('%')> -1) {
    fx = (parsefloat (x)/100)*w;
  } else if (x.indexof ('px')> -1) {
    fx = parsefloat (x);
  }
  jika (y.indexof ('%')> -1) {
     FY = (parsefloat (y)/100)*h;
  } else if (y.indexof ('px')> -1) {
    FY = parsefloat (y);
  }
  kembali [fx, fy];
}

Mengapa menggunakan clip-path jika topeng sudah klip?

Menggunakan hanya topeng membawa kepada isu -isu dengan penjajaran strok dan kawasan yang boleh dibersihkan. clip-path menyelesaikan masalah ini.

Mengapa menggunakan @property dengan nilai sempadan?

@property mendaftarkan harta tersuai, menentukan jenisnya (dalam kes ini,<length></length> ), membolehkan pengiktirafan dan pengendalian penyemak imbas sebagai jenis yang sah, bukan hanya rentetan. Ini membolehkan pelbagai unit panjang.

Bagaimana dengan pembolehubah --path ?

Pembolehubah --path ditangani sebagai rentetan kerana batasan dalam mendaftarkan jenis kompleks dengan @property . Fungsi cc() mengendalikan penukaran rentetan-ke-piksel.

Bolehkah kita mempunyai sempadan putus -putus?

Ya, menggunakan ctx.setLineDash() . Pembolehubah tambahan mengawal corak dash.

Mengapa tidak menggunakan @property untuk pemboleh ubah dash?

Walaupun secara teknikal mungkin, mengambil nilai -nilai dalam paint() terbukti bermasalah. Buat masa ini, pembolehubah --dash dianggap sebagai rentetan.

Aplikasi praktikal

Beberapa kes penggunaan mempamerkan teknik sempadan poligon:

• Butang: Buat butang berbentuk adat dengan kesan hover.
• Breadcrumbs: Memudahkan navigasi breadcrumb.
• Kad mendedahkan animasi: ketebalan sempadan animasi untuk kesan hover atau mendedahkan animasi.
• Callouts & Ucapan Gelembung: Mudah tambahkan sempadan ke bentuk kompleks.
• Animasi Dashes: Buat pelbagai animasi dash menggunakan setLineDash() dan lineDashOffset .

Artikel ini menyediakan panduan yang komprehensif untuk mewujudkan sempadan poligon menggunakan API cat CSS, yang menawarkan fleksibiliti dan kecekapan dalam gaya bentuk.

Atas ialah kandungan terperinci Meneroka CSS Paint API: Sempadan Poligon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!