Cara Menempatkan Handle Bézier dengan Koordinat yang Tepat di Inkscape

Kolom koordinat pada Node tool mengubah posisi node yang dipilih. Handle Bézier adalah titik kontrol terpisah yang membentuk kurva di dekat node tersebut. Jadi, memasukkan koordinat handle yang diinginkan ke toolbar justru mengubah bagian geometri yang keliru. Inkscape Beginners’ Guide secara jelas menyebut kolom tersebut sebagai koordinat untuk node yang dipilih. Opsi Node Tool

Gunakan Node tool untuk mengidentifikasi kurva secara visual: tekan N, pilih path, lalu pilih sebuah node. Handle-nya akan tampak sebagai lingkaran kecil yang terhubung ke node dengan garis tipis. Lingkaran tersebut adalah titik yang posisi angkanya akan Anda edit. Mengedit Path dengan Node Tool

Segmen Bézier kubik memiliki node awal, dua titik kontrol, dan node akhir. Dalam data path SVG, node awal berasal dari perintah sebelumnya. Huruf kapital C kemudian mencantumkan kedua titik kontrol dan titik ujung dalam urutan tersebut. W3C: Perintah kurva Bézier kubik

Perhatikan nilai atribut d berikut sebagai ilustrasi:

M 40 120 C 40 40 200 40 200 120

Baca angkanya sebagai berikut:

Bagian	Koordinat	Arti
M 40 120	(40, 120)	Node awal
Pasangan pertama setelah C	(40, 40)	Handle keluar dari node awal
Pasangan kedua setelah C	(200, 40)	Handle masuk ke node akhir
Pasangan ketiga setelah C	(200, 120)	Node akhir

Aturan praktisnya adalah mengelompokkan enam nilai setelah C menjadi tiga pasangan sebelum mengedit apa pun. Untuk mengubah posisi satu handle sekaligus mempertahankan kedua node, ubah hanya pasangannya. Tutorial SVG MDN mendokumentasikan urutan yang sama dan menjelaskan bagaimana titik kontrol menentukan arah kurva di dekat masing-masing titik ujung. MDN: Paths

Untuk percobaan pertama yang terkontrol, gunakan dokumen SVG lengkap ini. Simpan sebagai exact-curve.svg di editor teks biasa, lalu buka di Inkscape. Dokumen ini berisi satu path biasa tanpa grup, transformasi, atau efek path.

<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 dan perhitungan koordinat di bawah ini telah diperiksa dengan Python. Interaksi di aplikasi desktop tidak dijalankan.

1. Pilih kurva di Inkscape.
2. Buka XML Editor dengan Ctrl+Shift+X, pintasan bawaan yang didokumentasikan.
3. Pilih elemen path yang ditandai dengan id="curve" pada pohon XML.
4. Pilih atribut d dan edit nilainya.
5. Terapkan nilainya dengan Ctrl+Enter, atau kontrol Set attribute pada dialog. Perintah ini didokumentasikan dalam referensi pintasan Inkscape. Referensi papan ketik dan tetikus Inkscape

Misalnya, ubah handle pertama dari (40, 40) menjadi (70, 30) dengan memasukkan nilai atribut ini:

M 40 120 C 70 30 200 40 200 120

Tempelkan hanya string data path ke kolom nilai—bukan d=, tanda kutip, atau elemen <path> lengkap. Biarkan pasangan awal, pasangan kontrol kedua, dan pasangan akhir tetap sama. Dengan begitu, Anda dapat memeriksa perubahan satu handle ini dengan mudah.

Beralih kembali ke Node tool dan pilih node awal. Periksa secara visual arah handle yang baru, lalu periksa kembali nilai d untuk memastikan angkanya. Pada garis luar yang sudah ada dengan beberapa segmen, pertahankan perintah di sekitarnya dan edit hanya pasangan kontrol yang relevan; mengganti seluruh atribut dengan contoh singkat ini akan mengganti seluruh garis luar.

Koordinat data path menggunakan unit pengguna SVG. viewBox dan transformasi dokumen menentukan bagaimana unit tersebut dipetakan ke gambar yang terlihat. Sistem koordinat SVG awal memiliki titik asal di kiri atas, dengan X bertambah ke arah kanan dan Y bertambah ke arah bawah. W3C: Sistem Koordinat, Transformasi, dan Unit

Dalam contoh yang diberikan, viewport 240 × 160 dan viewBox="0 0 240 160" menghasilkan pemetaan yang sederhana. Perpindahan dari (40, 40) ke (70, 30) menempatkan titik kontrol 30 unit lebih ke kanan dan 10 unit lebih tinggi. Ini adalah koordinat desain ilustratif, bukan aturan untuk bentuk karakter tertentu.

Untuk dokumen yang sudah ada, periksa atribut transform pada path dan grup induknya sebelum menganggap koordinat lokalnya sebagai posisi pada halaman. Sebagai contoh perhitungan, satu translate(30,20) saja memetakan handle lokal di (70,30) ke (100,50) dalam sistem koordinat induknya. Untuk mencapai (100,50) dengan translasi tersebut, masukkan (70,30) sebagai koordinat lokal. Penskalaan, rotasi, dan transformasi leluhur tambahan mengharuskan Anda memperhitungkan pemetaan lengkapnya. W3C: Sistem koordinat dan transformasi

c huruf kecil menyimpan offset dari titik awal segmen. Ketiga pasangan menggunakan titik awal yang sama; pergerakannya bukan berurutan dari satu titik kontrol ke titik berikutnya. C huruf kapital menyimpan koordinat absolut dalam sistem koordinat pengguna saat ini. W3C: Perintah kurva Bézier kubik

Untuk contoh awal, kurangi setiap titik berikutnya dengan node awal (40,120):

Titik	Posisi absolut	Offset relatif
Handle pertama	(40,40)	(0,-80)
Handle kedua	(200,40)	(160,-80)
Titik ujung	(200,120)	(160,0)

Jadi, nilai atribut yang setara adalah:

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

Jangan hanya mengubah huruf c menjadi kapital sambil mempertahankan angkanya: tindakan itu mengubah maknanya. Saat mengedit path relatif yang lebih panjang, hitung terlebih dahulu titik awal segmen saat ini.

Segmen S tidak mencantumkan titik kontrol pertamanya. Setelah segmen kubik, SVG menentukan titik kontrol tersebut dengan mencerminkan titik kontrol terakhir segmen sebelumnya terhadap node yang sama. Untuk menentukan kedua titik kontrol secara terpisah, uraikan singkatan tersebut menjadi segmen C eksplisit sambil mempertahankan nilai awal titik kontrol pertama yang sudah dihitung. MDN: Paths

Jenis node Inkscape membatasi pengeditan interaktif berikutnya. Node sudut memungkinkan handle digerakkan secara terpisah. Node halus menjaga kedua handle dan node tetap segaris. Node simetris juga menjaga jarak handle tetap sama. Node halus otomatis menyesuaikan jarak handle secara otomatis saat node dipindahkan. Tentang Jenis Node

Pilih perilaku node yang diinginkan sebelum menentukan posisi akhir secara numerik. Untuk titik kontrol yang ditentukan secara terpisah, node sudut dapat menjadi pilihan yang tepat. Untuk sambungan yang mengalir, rencanakan koordinat yang selaras di kedua sisi node bersama, lalu periksa nilai akhirnya setelah mengubah jenis node.

Misalnya, node bersama berada di (200,120) dan kontrol masuknya berada di (200,40). Kontrol keluar di (200,200) merupakan pencerminannya terhadap node tersebut: 2 × (200,120) − (200,40). Perhitungan ilustratif ini menghasilkan vektor handle yang sama panjang dan berlawanan arah. Ini memberikan pemeriksaan koordinat konkret untuk sambungan simetris.

Lakukan pemeriksaan berikut secara berurutan:

1. Pastikan elemennya benar. Periksa ID path yang dipilih sebelum mengubah atributnya.
2. Identifikasi pasangan koordinatnya. Jika perlu, tandai node awal, kontrol pertama, kontrol kedua, dan titik ujung di atas kertas.
3. Periksa huruf perintahnya. Pastikan apakah angkanya absolut, relatif, atau singkatan.
4. Periksa pemetaan koordinatnya. Periksa viewBox, transformasi path, dan transformasi induknya.
5. Periksa pengeditan selanjutnya. Periksa kembali koordinat setelah menyeret handle atau mengubah jenis node.
6. Simpan nilai aslinya. Simpan salinan lengkap string d agar Anda dapat memulihkannya jika perubahan mengubah segmen yang tidak dimaksudkan.

Untuk pekerjaan garis luar karakter yang presisi, akhiri dengan memeriksa kontur yang terlihat dan koordinat kontrol yang tersimpan. Setelah jenis perintah dan sistem koordinatnya jelas, penempatan handle secara tepat menjadi perubahan kecil yang mudah ditelusuri: identifikasi segmennya, ubah pasangan yang dimaksud, lalu periksa hasilnya.

• Opsi Node Tool — Inkscape Beginners’ Guide
• Mengedit Path dengan Node Tool — Inkscape Beginners’ Guide
• Tentang Jenis Node — Inkscape Beginners’ Guide
• Referensi papan ketik dan tetikus Inkscape — sumber dokumentasi
• Paths — SVG 2, W3C
• Sistem Koordinat, Transformasi, dan Unit — SVG 2, W3C
• Paths — MDN Web Docs