Javascript: общая площадь окружностей или сколько цветных пикселов на картинке
Расчёты общей площади или пересечения, образуемого несколькими фигурами, пусть даже просто окружностями, достаточно трудоёмки. Грубый Brute Force, хотя у него в данном случае сложность N2, зачастую оказывается более быстрым и очевидным решением - почему бы, к примеру, просто не отрисовать нужную картинку на чёрном и затем подсчитать долю не-чёрных пикселов на ней?
Разумеется, само приведение к конечным по размерности пикселам вместо аналитических формул тоже вносит свою погрешность, но уже на сетке 100 на 100 и выше она вполне приемлема.
Показанный ниже код не нужно считать примером для любых расчётов, где точность и аналитическая строгость имеют значение :) Даже в разных браузерах ответы могут несколько различаться.
Пример можно выполнить в любом современном браузере, сохранив его как файл типа .html
<p>Общая площадь на простом попиксельном сканировании цвета</p> <p><canvas id="circlesCanvas" width="200" height="200"></canvas></p> <p>Area = <span id="circlesResult"></span></p> <script type="text/javascript"> var canvas = document.getElementById('circlesCanvas'); var ctx = canvas.getContext('2d'); function circle(x,y,r) { //Отрисовка окружности на JS ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } //Заливка фона чёрным ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); //Отрисовка любыми цветами, кроме фонового ctx.fillStyle = 'green'; circle(100, 100, 40); ctx.fillStyle = 'red'; circle(80, 40, 20); ctx.fillStyle = 'blue'; circle(40, 60, 20); //Массив байт RGBA var img = ctx.getImageData (0, 0, canvas.width, canvas.height); var pixels = img.data; //Подсчитать количество не-фоновых пикселов var area = 0; for (var i = 0; i < pixels.length; i += 4) { if (!(pixels[i]==0 && pixels[i+1]==0 && pixels[i+2]==0)) area++; } //Нормализовать и вывести процент не-фоновых пикселов area = area/(canvas.width*canvas.height)*100; document.getElementById('circlesResult').innerHTML = area.toFixed(2)+'%'; </script> <noscript>Нужен включённый Javascript для работы примера</noscript>

вид этого примера в браузере
20.10.2017, 23:21 [2465 просмотров]