Question

我必须编写一个从画布中的圆圈开始的代码，用户可以在其上进行绘制，并将正确的圆圈的点与用户在顶部绘制的圆圈进行比较。从而得出用户失败或成功的百分比。

这就是我保持正确圆的坐标的方式。

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();
        }
    }
}

我不知道绘制时保存坐标的方式是否正确，也不知道如何比较两个数组。

Answer 1

我建议一种更简单的查找坐标的方法是将初始圆值存储在一个对象中，其中每个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))
})

将画布中圆的点与用户在画布中绘制的图形进行比较

1 个答案: