Saya mencoba mengidentifikasi pusat x dan y dari lingkaran yang diambil dari sumber gambar png di kanvas, apakah ada fungsi konteks 2d yang dapat melakukan ini? Atau adakah fungsi yang dapat melacak lingkaran dalam file png sehingga saya dapat mengidentifikasi koordinatnya untuk pusat x dan y?

Saya hanya butuh logika terima kasih

-1
PauAI 27 Mei 2015, 10:12
Tergantung lingkarannya, apakah padat, bergaris, apakah ada beberapa lingkaran, apakah itu lingkaran yang tepat, warna tertentu, ...? terlalu luas seperti pertanyaannya sekarang imo.
 – 
user1693593
27 Mei 2015, 18:51
Hanya satu lingkaran hitam di dalam ruang putih yang luas dengan latar belakang posisi dan jari-jarinya acak.
 – 
PauAI
28 Mei 2015, 04:02

1 menjawab

Jawaban Terbaik

Tidak ada metode asli untuk mengidentifikasi bentuk pada kanvas html5.

Setelah piksel digambar, informasi apa pun tentang bagaimana mereka digambar (lingkaran, persegi panjang, dll) dilupakan.

Metode untuk menemukan lingkaran Anda

Lingkaran Anda harus dibedakan dari gambar lainnya.

Apakah itu warna yang unik? Apakah sisa gambar transparan?

Pada titik di mana Anda memiliki diferensiasi, Anda dapat menggunakan getImageData untuk mengambil informasi merah, biru, hijau & alfa tentang setiap piksel di kanvas.

var pixelData = context.getImageData(0,0,canvas.width,canvas.height).data;

PixelData ini adalah satu larik panjang dengan data warna setiap piksel berada dalam sebuah elemen:

firstPixelRed=pixelData[0];
firstPixelGreen=pixelData[1];
firstPixelBlue=pixelData[2];
firstPixelAlpah=pixelData[3];
//
secondPixelRed=pixelData[4];
secondPixelGreen=pixelData[5];
secondPixelBlue=pixelData[6];
secondPixelAlpah=pixelData[7];

Anda dapat menggunakan pixelData ini untuk mengidentifikasi semua piksel yang ada di dalam lingkaran Anda.

Dari piksel "dalam lingkaran" ini, temukan koordinat minimumX, minimumY, maximumX & maximumY.

Minimum & maksimum ini akan memberi Anda kotak pembatas lingkaran.

topleft    = [minumumX,minumimY]
topright   = [maximumX,minimumY]
bottomright= [maximumX,maximumY]
bottomleft = [minumumX,maximumY]

Jari-jari lingkaran adalah:

var radius = (maximumX - minimumX) /2;

Jadi titik pusat lingkaran adalah :

var centerX = minimumX + radius;
var centerY = minimumY + radius;

Dan Anda memiliki lingkaran dengan titik pusat [centerX,centerY] dengan radius!

1
markE 28 Mei 2015, 03:46