Cara Menentukan Titik Koordinat pada Gambar Menggunkan CorelDRAW | amatirkode

Alhamdulillah kita bertemu kembali dalam hal sharing ilmu, yang kali ini mungkin berbeda dari tema sebelumnya tapi saya rasa ini adalah materi penting bagi kita khususnya saya sendiri. Karena apa? Yah tidak lain karena tugas dari dosen wkwkwk.

Ini adalah trik murni saya foundernya sendiri, bukannya sombong tapi ini fakta. Banyak dari teman-teman saya bingung dalam menentukan titik koordinar pada suatu gambar, oleh karena itu alangkah  lebih baiknya saya share agar kita semua sama-sama mengetahuinya.

Memang agak sulit sih, saya kategorikan ini level hard, karena apa yah karena nanti ada codingannya. Kalau cuma di Corel mungkin mudah sekali. Untuk mengatasi masalah dicodingan saya sudah menyediakan gambar codingan yang akan kita pelajari.

Langsung ke List Materi yang Akan Saya Bahas:

Pengenalan Sumbu X dan Sumbu Y

Cara Mengubah Satuan ke Pixel di CorelDRAW

Penentuan Titik Koordinat

Ngoding Bersama AmatirKode

Mungkin cuma itu materi yang akan saya ulas pada kesempatan kali ini. Sebelum masuk ke materi saya harap teman-teman sudah memiliki hal yang diperlukan diantaranya:

CorelDRAW (Saya sarankan pakai CorelDRAW X7 agar sesuai dengan punya saya, bisa pake yang lain tapi mungkin akan beda tampilan)

Text Editor (Disini saya pakai Sublime Text 3)

Gambar yang akan diberi titik koordinat

Saya rasa hanya itu bahan yang diperlukan untuk materi kali ini, lanjut ke pembahasan materi

Saya tidak akan panjang lebar tentang hal ini, intinya yang harus teman-teman pahami ialah:

X = Sumbu Horizontal (Kanan ke Kiri)

Y = Sumbu Vertikal (Atas ke bawah)

Ingat betul-betul 2 kalimat diatas agar tidak salah paham ke belakangnya.

Caranya Cukup Mudah, teman-teman cuma perlu mengarahkan cursor(panah) ke area putih (sembarang) di luar lembar kerja corel, nanti akan muncul pilihan untuk mengubah satuan, selebihnya bisa lihat gambar:

Langkah-langkah sebagai berikut:

Buka CorelDRAW dan buat file baru jangan lupa width=400 height=300 dengan satuan pixel

Import gambar ke dalam corel dengan cara Ctrl+ i

Ubah ukuran gambar dengan cara:

Klik gambar akan muncul icon diatas untuk lebar dan tinggi dan ubah sesuai dengan lebar dan tinggi di codingan HTML lebar=400 px tinggi = 300 px

Buat kotak dan letakkan di area yang akan diberi titik koordinat jangan lupa kasih warna

Buat kotak lagi dan tarik dari ujung kiri atas gambar sampai ke pojok kiri atas kotak yang berwarna

Akan Muncul lebar dan tinggi kotak kedua dibagian atas kita tinggal catat itu:

X1 = 68

Y1 = 61

Buat kotak lagi dan tarik dari ujung kiri atas gambar sampai pojok kanan bawah kotak berwarna dan catat juga lebar dan tingginya:

X2 = 156

Y2 = 122

Tentukan lebar dan tinggi gambar yang kita punya di codingan HTML

Setelah kita lihat HTML diatas, saya beri nilai witdh=400px dan height=300px

Kita bahas intinya saja yaitu sebagai berikut:

Atribut coords untuk shape="rect" berbentuk x.1, y.1, x.2, y.2, dimana x.1, y.1 menandakan koordinat awal, dan x.2, y.2 menandakan koordinat akhir. Pada tag pertama saya menggunakan coords="68,61,156,122" untuk menandai kotak berwarna biru dimana aula lantai 3 berada.


Kita buat kodingan lengkapnya seperti gambar dibawah ini:

Simpan dengan format *.html jangan lupa Save as type = All Files contoh disini saya menyimpannya dengan nama coba.html dan ketika saya buka dibrowser Mozilla hasilnya seperti berikut:

Coba arahkan kursor anda ke area yang sudah diberi titik koordina dan akan muncul Aula Lantai 3 seperti yang ada di title

Yah Mungkin cukup panjang untuk materi ini tapi semoga bermanfaat untuk teman sekalian, apabila ada kesalahan dalam postingan saya, saya selaku penulis mohon maaf dan saya buka pertanyaan dikomentar sebanyak-banyaknya mengenai postingan ini! Terimakasih.