Blog Metlivi

Cara Meletakkan Pemegang Bézier dengan Koordinat Tepat dalam Inkscape

Untuk meletakkan pemegang Bézier dengan koordinat tepat dalam Inkscape, edit nilai titik kawalan dalam atribut d laluan menggunakan Editor XML. Bagi lengkung kubik yang ditulis dengan C huruf besar, dua pasangan koordinat pertama menentukan pemegang; pasangan terakhir menentukan titik hujung. W3C: Laluan

Tutorial ini ditujukan kepada seseorang yang sedang memperhalus garis luar watak dan sudah tahu kedudukan pemegang lengkung yang sepatutnya. Contoh yang ditunjukkan menggunakan lengkung ringkas dengan dua nod, kemudian menerangkan cara menggunakan kaedah yang sama pada laluan sedia ada tanpa menggantikan segmen lain.

29 Oktober 2026Bacaan 6 minitOleh Metlivi Editorial Team
Bahagian 1

Mengapa medan X/Y alat Nod tidak meletakkan pemegang?

Medan koordinat alat Nod mengubah kedudukan nod yang dipilih. Pemegang Bézier ialah titik kawalan berasingan yang membentuk lengkung di sebelah nod itu. Oleh itu, memasukkan koordinat pemegang yang anda inginkan dalam bar alat akan mengubah bahagian geometri yang salah. Panduan Pemula Inkscape menerangkan secara jelas bahawa medan tersebut ialah koordinat bagi nod yang dipilih. Pilihan Alat Nod

Gunakan alat Nod untuk mengenal pasti lengkung secara visual: tekan N, pilih laluan, kemudian pilih nod. Pemegangnya muncul sebagai bulatan kecil yang disambungkan kepada nod dengan garisan nipis. Bulatan itulah titik yang kedudukan berangkanya akan anda edit. Mengedit Laluan dengan Alat Nod

Bahagian 2

Bagaimanakah anda mengenal pasti koordinat pemegang yang betul?

Segmen Bézier kubik mempunyai nod permulaan, dua titik kawalan dan nod pengakhiran. Dalam data laluan SVG, nod permulaan datang daripada arahan sebelumnya. C huruf besar kemudian memberikan dua titik kawalan dan titik hujung mengikut turutan tersebut. W3C: Arahan lengkung Bézier kubik

Pertimbangkan nilai atribut d ilustrasi ini:

M 40 120 C 40 40 200 40 200 120

Baca nombor-nombor itu seperti berikut:

Bahagian Koordinat Maksud
M 40 120 (40, 120) Nod permulaan
Pasangan pertama selepas C (40, 40) Pemegang keluar bagi nod permulaan
Pasangan kedua selepas C (200, 40) Pemegang masuk bagi nod pengakhiran
Pasangan ketiga selepas C (200, 120) Nod pengakhiran

Peraturan praktikalnya ialah mengumpulkan enam nilai selepas C kepada tiga pasangan sebelum mengedit apa-apa. Untuk mengubah kedudukan satu pemegang sambil mengekalkan kedua-dua nod, ubah pasangannya sahaja. Tutorial SVG MDN mendokumentasikan turutan yang sama dan menerangkan bagaimana titik kawalan menentukan arah lengkung berhampiran setiap titik hujung. MDN: Laluan

Bahagian 3

Bagaimanakah anda memasukkan koordinat tepat dalam Editor XML?

Untuk percubaan pertama yang terkawal, gunakan dokumen SVG lengkap ini. Simpannya sebagai exact-curve.svg dalam penyunting teks biasa, kemudian buka dalam Inkscape. Dokumen ini mengandungi satu laluan biasa tanpa kumpulan, transformasi atau kesan laluan.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160"
     viewBox="0 0 240 160">
  <path id="curve"
        d="M 40 120 C 40 40 200 40 200 120"
        fill="none"
        stroke="black"
        stroke-width="2" />
</svg>

Struktur XML contoh ini dan pengiraan koordinat di bawah telah disemak menggunakan Python. Interaksi dalam aplikasi desktop tidak dilaksanakan.

  1. Pilih lengkung dalam Inkscape.
  2. Buka Editor XML dengan Ctrl+Shift+X, iaitu pintasan lalai yang didokumenkan.
  3. Pilih unsur laluan yang dikenal pasti oleh id="curve" dalam pepohon XML.
  4. Pilih atribut d dan edit nilainya.
  5. Gunakan nilai itu dengan Ctrl+Enter, atau kawalan Tetapkan atribut dalam dialog. Arahan ini didokumentasikan dalam rujukan pintasan Inkscape sendiri. Rujukan papan kekunci dan tetikus Inkscape

Sebagai contoh, ubah pemegang pertama daripada (40, 40) kepada (70, 30) dengan memasukkan nilai atribut ini:

M 40 120 C 70 30 200 40 200 120

Tampal rentetan data laluan sahaja ke dalam medan nilai—bukan d=, tanda petik atau unsur <path> yang lengkap. Kekalkan pasangan permulaan, pasangan kawalan kedua dan pasangan pengakhiran tanpa perubahan. Dengan itu, perubahan ini hanya melibatkan satu pemegang dan mudah diperiksa.

Kembali kepada alat Nod dan pilih nod permulaan. Periksa arah baharu pemegang secara visual, kemudian semak semula nilai d untuk pengesahan berangka. Pada garis luar berbilang segmen yang sedia ada, kekalkan arahan di sekelilingnya dan edit pasangan kawalan yang berkaitan sahaja; menggantikan keseluruhan atribut dengan contoh ringkas ini akan menggantikan seluruh garis luar.

Bahagian 4

Sistem koordinat manakah yang digunakan oleh nombor-nombor ini?

Koordinat data laluan menggunakan unit pengguna SVG. viewBox dan transformasi dokumen menentukan cara unit tersebut dipetakan kepada lukisan yang kelihatan. Sistem koordinat SVG awal mempunyai titik asal di kiri atas, dengan X bertambah ke kanan dan Y bertambah ke bawah. W3C: Sistem Koordinat, Transformasi dan Unit

Dalam contoh yang diberikan, ruang pandang 240 × 160 dan viewBox="0 0 240 160" memberikan pemetaan yang mudah. Pergerakan daripada (40, 40) kepada (70, 30) meletakkan titik kawalan 30 unit lebih ke kanan dan 10 unit lebih tinggi. Ini ialah koordinat reka bentuk ilustrasi, bukannya preskripsi untuk bentuk watak tertentu.

Bagi dokumen sedia ada, periksa laluan dan kumpulan induknya untuk atribut transform sebelum menganggap koordinat setempatnya sebagai kedudukan pada halaman. Sebagai pengiraan ilustrasi, satu translate(30,20) sahaja memetakan pemegang setempat pada (70,30) kepada (100,50) dalam sistem koordinat induknya. Untuk mencapai (100,50) di bawah translasi itu, masukkan (70,30) sebagai koordinat setempat. Penskalaan, putaran dan transformasi leluhur tambahan memerlukan pemetaan lengkap diambil kira. W3C: Sistem koordinat dan transformasi

Bahagian 5

Bagaimana jika laluan menggunakan `c` huruf kecil atau bentuk ringkas `S`?

c huruf kecil menyimpan ofset dari titik permulaan segmen. Ketiga-tiga pasangan menggunakan titik permulaan yang sama; ia bukan pergerakan berturutan dari satu titik kawalan ke titik kawalan seterusnya. C huruf besar menyimpan koordinat mutlak dalam sistem koordinat pengguna semasa. W3C: Arahan lengkung Bézier kubik

Bagi contoh asal, tolak nod permulaan (40,120) daripada setiap titik berikutnya:

Titik Kedudukan mutlak Ofset relatif
Pemegang pertama (40,40) (0,-80)
Pemegang kedua (200,40) (160,-80)
Titik hujung (200,120) (160,0)

Oleh itu, nilai atribut yang setara ialah:

M 40 120 c 0 -80 160 -80 160 0

Jangan sekadar menukar c kepada huruf besar sambil mengekalkan nombor-nombor itu: tindakan tersebut mengubah maksudnya. Apabila mengedit laluan relatif yang lebih panjang, kira titik permulaan segmen semasa terlebih dahulu.

Segmen S tidak menyertakan titik kawalan pertamanya. Selepas segmen kubik, SVG mendapatkan titik kawalan itu dengan mencerminkan titik kawalan terakhir segmen sebelumnya merentasi nod yang dikongsi. Untuk menentukan kedua-dua titik kawalan secara berasingan, kembangkan bentuk ringkas itu menjadi segmen C yang jelas sambil mengekalkan titik kawalan pertama yang dikira pada mulanya. MDN: Laluan

Bahagian 6

Bagaimanakah jenis nod mempengaruhi pelarasan pemegang kemudian?

Jenis nod Inkscape mengehadkan pengeditan interaktif seterusnya. Nod cusp membolehkan pemegang digerakkan secara berasingan. Nod licin memastikan kedua-dua pemegang dan nod berada pada satu garis. Nod simetri juga memastikan jarak pemegang adalah sama. Nod licin automatik melaraskan jarak pemegang secara automatik apabila nod digerakkan. Perihal Jenis Nod

Pilih tingkah laku nod yang dikehendaki sebelum menentukan kedudukan angka terakhir. Untuk titik kawalan yang ditentukan secara berasingan, nod cusp ialah pilihan yang berguna. Untuk sambungan yang mengalir, rancang koordinat yang serasi pada kedua-dua sisi nod yang dikongsi, kemudian semak nilai akhir selepas sebarang penukaran jenis nod.

Sebagai contoh, katakan satu nod yang dikongsi berada pada (200,120) dan kawalan masuknya ialah (200,40). Kawalan keluar pada (200,200) ialah pantulannya merentasi nod itu: 2 × (200,120) − (200,40). Pengiraan ilustrasi ini menghasilkan vektor pemegang yang sama panjang tetapi berlawanan arah. Ini memberikan semakan koordinat yang jelas untuk sambungan simetri.

Bahagian 7

Bagaimanakah anda menyemak suntingan yang kelihatan salah?

Lakukan semakan berikut mengikut turutan:

  1. Sahkan unsur. Semak ID laluan yang dipilih sebelum mengubah atributnya.
  2. Kenal pasti pasangan. Jika perlu, tandakan nod permulaan, kawalan pertama, kawalan kedua dan titik hujung pada kertas.
  3. Baca huruf arahan. Tentukan sama ada nombornya mutlak, relatif atau bentuk ringkas.
  4. Semak pemetaan koordinat. Periksa viewBox, transformasi laluan dan transformasi induk.
  5. Semak pengeditan seterusnya. Periksa semula koordinat selepas menyeret pemegang atau mengubah jenis nod.
  6. Kekalkan nilai asal. Simpan salinan rentetan d yang lengkap supaya anda boleh memulihkannya jika suntingan mengubah segmen yang tidak dimaksudkan.

Bagi kerja garis luar watak yang tepat, akhiri dengan menyemak kontur yang kelihatan dan koordinat kawalan yang disimpan. Setelah jenis arahan dan sistem koordinat jelas, penempatan pemegang yang tepat menjadi suntingan kecil yang mudah dijejaki: kenal pasti segmen, ubah pasangan yang dikehendaki dan sahkan hasilnya.

Bahagian 8

Sumber

Bacaan berkaitan

Terus meneroka topik ini