Есть код который проверяет принадлежит ли поставленная нами точка в нарисованный нами многоугольник. В целом все понятно, кроме кода который идет в цикле for
в функции isCheckPoint
. Кто-то сталкивался с подобным решение такой задачи? Как понять, что происходит в этом цикле?
<html>
<head>
<title></title>
</head>
<body>
<div class = "canvas">
<canvas id="c1" width = "800px" height = "600px"></canvas>
</div>
<div class = "buttons">
<button onclick='isCheckDrawsFigure()'>Нарисовать фигуру</button>
<button onclick='EndDraw()'>Дорисовать фигуру</button>
<button onclick='isCheckDrawsPoint()'>Нарисовать точку</button>
</div>
<script type="text/javascript">
var current = 0;
var coordinatesPointZ = [], coordinatesPointsFigure = [];
var isDrawsFigure, isDrawPoint, isDrawLine, countPoints;
var canvas = document.getElementById("c1");
var ctx = canvas.getContext('2d');
var arrayPoints = [];
ctx.beginPath();
ctx.fillStyle = 'white';
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.strokeStyle = "black";
canvas.addEventListener('mousedown', function(e) {
getCursorPosition(canvas, e)
});
function getCursorPosition(canvas, event) {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
arrayPoints.push([x,y]);
if(isDrawsFigure) {
coordinatesPointsFigure.push([x,y]);
drawsFigure(arrayPoints);
} else if(isDrawPoint) {
coordinatesPointZ = arrayPoints.pop();
drawPoint(coordinatesPointZ);
} else {
arrayPoints = [];
}
}
function drawsFigure(arrayPoints) {
if(arrayPoints.length > 0) {
for(var i = 0; i < arrayPoints.length; i++) {
ctx.beginPath();
ctx.arc(arrayPoints[i][0],arrayPoints[i][1],4,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
ctx.stroke();
ctx.beginPath();
if(i > 0) {
ctx.moveTo(arrayPoints[i - 1][0],arrayPoints[i - 1][1]);
ctx.lineTo(arrayPoints[i][0],arrayPoints[i][1]);
ctx.closePath();
ctx.stroke();
}
}
}
}
function drawPoint(arrayPoints) {
ctx.beginPath();
ctx.arc(arrayPoints[0],arrayPoints[1],4,0,2*Math.PI);
ctx.fillStyle = 'orange';
ctx.fill();
ctx.stroke();
if(isDrawPoint) {
isCheckPoint();
}
}
function isCheckDrawsFigure() {
isDrawsFigure = true;
}
function isCheckDrawsPoint() {
isDrawPoint = true;
}
function EndDraw() {
if(isDrawsFigure) {
ctx.moveTo(arrayPoints[arrayPoints.length - 1][0],arrayPoints[arrayPoints.length - 1][1]);
ctx.lineTo(arrayPoints[0][0],arrayPoints[0][1]);
ctx.closePath();
ctx.stroke();
}
isDrawsFigure = false;
isDrawPoint = false;
isDrawLine = false;
arrayPoints = [];
ctx.beginPath();
}
function isCheckPoint() {
var j = coordinatesPointsFigure.length - 1;
console.log(coordinatesPointsFigure);
console.log()
var count = 0;
for(var i = 0; i < coordinatesPointsFigure.length; i++) {
if( ( ( (coordinatesPointsFigure[i][1] <= coordinatesPointZ[1]) && (coordinatesPointZ[1] < coordinatesPointsFigure[j][1]) ) || ( (coordinatesPointsFigure[j][1] <= coordinatesPointZ[1]) && (coordinatesPointZ[1] < coordinatesPointsFigure[i][1])) ) && (coordinatesPointZ[0] > (coordinatesPointsFigure[j][0] - coordinatesPointsFigure[i][0]) * (coordinatesPointZ[1] - coordinatesPointsFigure[i][1]) / (coordinatesPointsFigure[j][1] - coordinatesPointsFigure[i][1]) + coordinatesPointsFigure[i][0]) ) {
count++;
}
j = i;
}
if(count % 2 === 0) {
ctx.beginPath();
ctx.arc(coordinatesPointZ[0],coordinatesPointZ[1],6,0,2*Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
ctx.stroke();
} else {
ctx.beginPath();
ctx.arc(coordinatesPointZ[0],coordinatesPointZ[1],6,0,2*Math.PI);
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();
}
}
</script>
<style type="text/css">
#c1 {
margin-left: 25%;
width: 800px;
height: 600px;
border: 3px solid black;
}
.buttons {
margin-right: 8%;
text-align: center;
}
</style>
</body>