HTML5 Canvas определяет фигуры из sillouette

Question

Я пытаюсь идентифицировать центр x и y круга, взятого из источника изображения png в холсте, есть ли функция контекста 2d, которая может это сделать? Или есть функция, которая может отслеживать круг в png-файле, чтобы я мог идентифицировать его координаты для центра x и y?

мне просто нужно логика благодаря

Answer 1

Там нет нативного метода, чтобы определить формы на html5 холсте.

Как только пиксели рисуются, любая информация о том, как они были нарисованы (круг, прямоугольник и т. Д.), Является забытой.

метод, чтобы найти свой круг

Ваш круг должен быть дифференцирован от остальной части изображения.

Это уникальный цвет? Является ли остальная часть изображения прозрачной?

В точке, где у вас есть дифференциация, вы можете использовать getImageData для получения красного, синего, зеленого & альфа-информации о каждом пикселе на холсте.

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

Это pixelData один длинный массив с бытием данные цвета каждого пикселя в элементе:

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

Вы можете использовать эту pixelData, чтобы идентифицировать все пиксели, которые находятся внутри вашего круга.

Из этих пикселей «внутри круга» найдите свой минимумX, минимальный Y, максимумX & максимумY координаты.

Эти минимумы & максимумы предоставят вам ограничительный квадрат круга.

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

Радиус окружности:

var radius = (maximumX - minimumX) /2; 

Так центральная точка окружности:

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

А у вас есть свой круг с точкой в ​​центре [CenterX, центр Y] с радиусом!