时间戳

首页 > 解决方案 > 将画布中的圆点与用户在画布中绘制的图形进行比较

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

问题描述

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

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

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

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

标签： javascriptarrayscanvascoordinatesgeometry

解决方案

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

推荐阅读