Cerita di belakang Tryshape, pameran untuk harta klip-clip css

Saya suka semua jenis bentuk, terutamanya bentuk berwarna terang! Bentuk di laman web adalah sama pentingnya dengan warna latar belakang, gambar, sepanduk, pemisah, karya seni, dan banyak lagi: mereka membantu kita memahami konteks dan membimbing kita melalui manfaat.

Beberapa bulan yang lalu, saya membangunkan aplikasi pembelajaran matematik untuk anak perempuan saya yang berusia 7 tahun. Sebagai tambahan kepada penambahan asas dan penolakan, saya juga ingin membentangkan masalah dengan bentuk. Pada masa itu saya menjadi biasa dengan harta clip-path CSS, cara yang boleh dipercayai untuk membuat bentuk di laman web. Kemudian saya akhirnya membina aplikasi lain yang dipanggil Tryshape menggunakan kuasa clip-path .

Saya akan membawa anda melalui cerita di belakang Tryshape dan bagaimana ia membantu membuat, mengurus, berkongsi dan mengeksport bentuk. Dalam proses ini, kami akan menyelam ke dalam clip-path CSS dan bagaimana ia membantu saya membina aplikasi saya dengan cepat.

Berikut adalah beberapa pautan penting:

• Laman web tryshape
• Perpustakaan Kod Github
• Demo video
• Pakej NPM Encapsulation clip-path untuk React

Atribut dan bentuk clip-path CSS

Bayangkan anda mempunyai sekeping kertas biasa dan pensil, dan anda ingin melukis bentuk (seperti persegi) di atasnya. Apa yang akan anda lakukan? Anda kemungkinan besar akan bermula pada satu titik , kemudian lukis garis ke titik lain, dan ulangi tiga kali sebelum anda dapat kembali ke titik awal. Anda juga perlu pastikan anda mempunyai sisi yang selari dan sama bertentangan.

Oleh itu, unsur -unsur asas bentuk termasuk titik, garis, arah, lengkung, sudut dan panjang, dll. CSS clip-path membantu menentukan banyak sifat ini untuk menanam kawasan elemen HTML untuk memaparkan kawasan tertentu. Bahagian dalam kawasan yang dipotong akan dipaparkan dan selebihnya akan disembunyikan. Ia menyediakan pemaju dengan banyak peluang untuk membuat pelbagai bentuk menggunakan harta clip-path .

Ketahui lebih lanjut mengenai tanaman dan bagaimana ia berbeza daripada pelekat.

nilai clip-path untuk penciptaan bentuk

Harta clip-path menerima nilai berikut untuk membuat bentuk:

• circle()
• ellipse()
• inset()
• polygon()
• Sumber klip menggunakan fungsi url()
• path()

Kita perlu memahami sistem koordinat asas sedikit untuk menggunakan nilai -nilai ini. Apabila memohon atribut clip-path pada elemen untuk membuat bentuk, kita mesti mempertimbangkan paksi-x, paksi-y, dan koordinat awal (0,0) dari sudut kiri atas elemen.

Ini adalah elemen div dengan paksi-x, paksi-y, dan koordinat awal (0,0).

Sekarang mari kita gunakan nilai circle() untuk membuat bentuk bulatan. Kita boleh menggunakan nilai ini untuk menentukan kedudukan dan jejari bulatan. Sebagai contoh, untuk membuat bentuk bulat dengan jejari 70px pada kedudukan koordinat (70, 70), kita boleh menentukan nilai atribut clip-path sebagai:

 Klip-Laluan: Circle (70px pada 70px 70px)

Oleh itu, pusat bulatan terletak pada koordinat (70, 70) dan radius adalah 70px. Sekarang hanya kawasan bulat ini dipotong dan dipaparkan pada elemen. Selebihnya elemen tersembunyi untuk mewujudkan kesan bentuk bulat.

Seterusnya, apa yang berlaku jika kita mahu menentukan kedudukan sebagai (0,0)? Dalam kes ini, pusat bulatan terletak di kedudukan (0,0) dengan radius 70px. Ini hanya menjadikan sebahagian daripada bulatan yang kelihatan dalam elemen.

Mari kita teruskan dan gunakan dua nilai asas inset() dan polygon() . Kami menggunakan inset untuk menentukan bentuk segi empat tepat. Kita boleh menentukan jurang yang empat tepi mungkin perlu menanam kawasan dari elemen. Contohnya:

 Klip-Laluan: Inset (30px)

Nilai clip-path di atas klip kawasan dengan tidak termasuk nilai 30px dari tepi elemen. Kita dapat melihat ini dalam gambar di bawah. Kami juga boleh menentukan nilai inset yang berbeza untuk setiap kelebihan.

Seterusnya ialah nilai polygon() . Kita boleh menggunakan satu set simpul untuk membuat bentuk poligon. Sila lihat contoh ini:

 Klip-Laluan: Polygon (10% 10%, 90% 10%, 90% 90%, 10% 80%)

Di sini kami menentukan satu set simpul untuk mewujudkan kawasan untuk menanam. Angka berikut menunjukkan lokasi setiap puncak untuk membuat bentuk poligon. Kami boleh menentukan seberapa banyak simpang yang diperlukan.

Seterusnya, mari kita lihat nilai ellipse() dan url() . Nilai ellipse() membantu membuat bentuk dengan menentukan dua nilai radius dan satu kedudukan. Dalam gambar di bawah, kita melihat elips pada kedudukan dengan radius (50%, 50%), dengan lebar bentuk 70px dan ketinggian 100px.

url() adalah fungsi CSS yang menentukan nilai ID elemen clip-path untuk menjadikan bentuk SVG. Sila lihat gambar di bawah. Kami mentakrifkan bentuk SVG menggunakan unsur -unsur clipPath dan path . Anda boleh menjadikan bentuk ini menggunakan nilai ID elemen clipPath sebagai hujah kepada fungsi url() .

Di samping itu, kita boleh menggunakan nilai path secara langsung di path() fungsi untuk menarik bentuknya.

baiklah. Saya harap anda telah memahami nilai atribut clip-path yang berbeza. Dengan pemahaman ini, mari kita lihat beberapa pelaksanaan dan cuba. Berikut adalah contoh, gunakannya untuk cuba menambah, mengubah nilai untuk membuat bentuk baru.

Pengenalan kepada Tryshape

Kini tiba masanya untuk bercakap mengenai tryshape dan backstorynya. Tryshape adalah aplikasi sumber terbuka yang membantu membuat, mengeksport, berkongsi dan menggunakan apa -apa bentuk pilihan anda. Anda boleh membuat spanduk, bulatan, karya seni, poligon dan mengeksportnya sebagai fail SVG, PNG, dan JPEG. Anda juga boleh membuat coretan kod CSS untuk menyalin dan menggunakan dalam aplikasi anda.

Tryshape dibina menggunakan rangka kerja dan perpustakaan berikut (dan tentu saja clip-path ):

• CSS clip-path : Kami telah membincangkan fungsi harta CSS yang kuat ini.
• Next.js: Rangka kerja berasaskan React yang paling keren. Ia membantu saya membuat halaman, komponen, interaksi, dan API untuk menyambung ke pangkalan data backend.
• HARPERDB: Pangkalan data yang fleksibel untuk menyimpan data dan menanyakannya menggunakan interaksi SQL dan NoSQL. Tryshape mencipta skema dan jadualnya di awan Harperdb. API Next.js berinteraksi dengan skema dan jadual untuk melakukan operasi CRUD yang diperlukan oleh antara muka pengguna.
• Firebase: Perkhidmatan Pengesahan dari Google. Tryshape menggunakannya untuk membolehkan log masuk sosial menggunakan Google, GitHub, Twitter, dan akaun lain.
• React-icon: kedai untuk semua ikon untuk aplikasi React
• Tarikh-FNS: Perpustakaan ringan moden untuk pemformatan tarikh
• AXIOS: Memudahkan panggilan API dalam komponen React
• Komponen gaya: Cara berstruktur untuk membuat peraturan CSS dari komponen React
• React-Clip-Path: Modul buatan sendiri untuk mengendalikan sifat clip-path dalam aplikasi React
• React-Draggable: Membuat Elemen HTML Draggable dalam Aplikasi React. Tryshape menggunakannya untuk menyesuaikan kedudukan simpang bentuk.
• Muat turun: Trigger JavaScript Muat turun
• HTML-to-Image: Tukar elemen HTML ke imej (termasuk SVG, JPEG, dan PNG)
• Vercel: Terbaik untuk Hosting Aplikasi Next.js

Buat bentuk dalam tryshape menggunakan clip-path CSS

Biarkan saya menyerlahkan kod sumber yang membantu membuat bentuk menggunakan harta clip-path CSS. Coretan kod berikut mentakrifkan struktur antara muka pengguna elemen kontena (kotak) yang merupakan persegi 300px. Elemen kotak mempunyai dua elemen kanak -kanak, bayangan dan komponen.

<box height="300px" onclick="{(e)"> props.handlechange (e)} width = "300px">
  {
    props.shapeInformation.showshadow &&
    <shadow backgroundcolor="{props.shapeInformation.backgroundColor}"></shadow>
  }
  <component backgroundcolor="{props.shapeInformation.backgroundColor}" formula="{props.shapeInformation.formula}"></component>
</box>

Komponen Shadow mentakrifkan kawasan yang tersembunyi oleh klip clip-path . Kami menciptanya untuk menunjukkan latar belakang cahaya supaya pengguna akhir dapat melihat sebahagiannya. Komponen digunakan untuk memberikan nilai clip-path untuk memaparkan kawasan klip.

Lihat definisi komponen kotak, bayangan, dan komponen di bawah:

 // Buat kod komponen gaya untuk komponen UI menggunakan sifat CSS // Container Div
box const = styled.div`
  lebar: $ {props => props.width || '100px'};
  ketinggian: $ {props => props.height || '100px'};
  Margin: 0 Auto;
  Kedudukan: Relatif;
`;

// Shadow mentakrifkan kawasan tersembunyi oleh `clip-path` tanaman // kami memaparkan latar belakang cahaya untuk menjadikan kawasan ini sebahagiannya dapat dilihat.
const Shadow = styled.div`
  latar belakang warna: $ {props => props.backgroundcolor || '#00c4ff'};
  Kelegapan: 0.25;
  Kedudukan: Mutlak;
  Atas: 10px;
  Kiri: 10px;
  Kanan: 10px;
  Bawah: 10px;
`;

// Dapatkan nilai `Clip-Path` (formula) dan tetapkannya kepada komponen sebenar harta` Clip-Path`.
const component = styled.div`
  Clip-Path: $ {props => props.Formula};
  Kedudukan: Mutlak;
  Atas: 10px;
  Kiri: 10px;
  Kanan: 10px;
  Bawah: 10px;
`;

Jangan ragu untuk melihat asas kod lengkap dalam pangkalan kod GitHub.

Arah Pembangunan Masa Depan Tryshape

Mengendalikan tryshape mencipta dan menguruskan bentuk asas menggunakan latar belakang CSS clip-path . Ia membantu bentuk eksport dan coretan kod CSS untuk digunakan dalam aplikasi web anda. Ia mempunyai potensi untuk membangunkan ciri -ciri yang lebih berharga. Fungsi utama adalah keupayaan untuk membuat bentuk dengan tepi melengkung .

Untuk menyokong bentuk lengkung, kita perlu menyokong nilai -nilai berikut dalam tryshape:

• Sumber Klip Menggunakan url()
• path() .

Dengan nilai -nilai ini kita boleh membuat bentuk menggunakan SVG dan kemudian gunakan salah satu nilai di atas. Ini adalah contoh fungsi CSS url() yang menggunakan sokongan SVG untuk membuat bentuk.

<div> Hati</div>
<svg><clippath clippathunits="objectBoundingBox"><path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z"></path></clippath></svg>

Kemudian ada CSS:

 .heart {
  Clip-Path: URL (#Heart-Path);
}

Sekarang, mari buat bentuk menggunakan nilai path() . HTML harus mempunyai elemen seperti div:

<div> Lengkung</div>

Dalam CSS:

 .Curve {
  Clip-Path: Path ("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}

Kesimpulan

Saya harap anda menikmati aplikasi tryshape saya dan memahami falsafah di belakangnya, strategi yang saya anggap, teknologi asas dan potensi untuk masa depan. Sila pertimbangkan untuk mencuba dan periksa kod sumber. Sudah tentu, anda boleh menyumbang kepadanya pada bila -bila masa melalui soalan, permintaan ciri, dan kod.

Sebelum akhirnya, saya ingin menunjukkan kepada anda video pendek untuk hackathon Hashnode, Tryshape adalah kemasukan dan akhirnya dipilih untuk pemenang. Saya harap anda menikmatinya.

Mari hubungi kami. Anda boleh mengulas @me (@tapasadhikary) di Twitter atau mengikutinya pada bila -bila masa.

Atas ialah kandungan terperinci Cerita di belakang Tryshape, pameran untuk harta klip-clip css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!