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 menjawab
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!