Сравните точки круга на холсте с рисунком, сделанным на холсте пользователем - PullRequest
Новая
       9

Сравните точки круга на холсте с рисунком, сделанным на холсте пользователем

0 голосов
/ 20 декабря 2018

Я должен сделать код, который начинается с круга на холсте , пользователь может нарисовать его и сравнить точки правильного круга с тем, который пользователь нарисовал сверху.Таким образом, определяя процент неудач или успехов, который был у пользователя.

Так я сохраняю координаты правильного круга. 

var centerX=200;
var centerY=200;
var radius=70;

// array save circlePoints
var points=[];

for(var degree=0;degree<360;degree++){
    var radians = degree * Math.PI/180;
    var x = centerX + radius * Math.cos(radians);
    var y = centerY + radius * Math.sin(radians);
    points.push({x:x,y:y});
}

Этокак пользователь может рисовать на холсте, и я сохраняю эти координаты: 

function findxy(res, e) {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        arrayCoordenadas.push({currX:currX,currY:currY});

        flag = true;
        dot_flag = true;
        if (dot_flag) {
            ctx.beginPath();
            ctx.fillStyle = x;
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            arrayCoordenadas.push({currX:currX,currY:currY});
            draw();
        }
    }
}

Я не знаю, правильный ли способ сохранения координат при рисовании, и не знаю, каксравнить оба массива.

1 Ответ

0 голосов
/ 20 декабря 2018

Я бы предположил, что более простой способ поиска ваших координат - это сохранить ваши начальные значения окружности в объекте, где каждое значение x имеет массив y значений, связанных с ним.В этом примере показано, как проверить каждую точку пользователя, чтобы убедиться, что она соответствует точке на окружности. 

var centerX=200;
var centerY=200;
var radius=70;

// array save circlePoints
  //set to object instead, for each X value store an array of Y values that correspond.
  //this makes checking a user point easier
var points = {};

for(var degree=0;degree<360;degree++){
    var radians = degree * Math.PI/180;
    var x = centerX + radius * Math.cos(radians);
    var y = centerY + radius * Math.sin(radians);
    
    if(!points[x]) points[x] = [] //if the array for point x doesn't exist, create it
    points[x].push(y) //push the y value into the array for the x value
}


function isPointOnCircle(x,y){
  return !!points[x] && points[x].indexOf(y) > -1
}


var userPoints = [
  [270,200],
  [130,50],
  [200,270],
  [100,200]
]

userPoints.forEach(point => {
  console.log(isPointOnCircle(...point))
})
...