javascript - 找出沿圆有多少列和行

Question

所以下面的代码会生成一个圆数组。我希望能够单击一个圆圈并弹出一个窗口，告诉我该圆圈从 (1,1) 开始的行数和列数。

有人知道怎么做吗？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var gCanvasElement = ctx;

ctx.strokeStyle="#FF0000";

ctx.strokeRect(20,20,800,600);

// Positions are hardcoded to make sure that circle starts from the right place
var startX = 55;
var startY = 55;

console.clear();

for(var i=1;i<=8;i++){
    console.group(i);
    for(var j=1;j<=i;j++){

        ctx.beginPath();
        ctx.strokeStyle='green';
        //radius is hardcoded to 30 for testing purpose
        ctx.arc(startX*j + (j-1)*10,startY*i + (i-1)*10,30,0,2*Math.PI);
        ctx.stroke();

        //console log
        console.group(j);    
        console.log(startX*j + (j-1)*10);
        console.log(startY*i + (i-1)*10);
        console.groupEnd(j);
    }

    console.groupEnd(i);
}

Answer 1

正如我在评论中所写， Canvas 只是一个光栅图像。与矢量图形 (SVG) 不同，它不存储形状。因此，您需要使用数学来确定用户是否单击了圆圈。

http://jsfiddle.net/tarabyte/Jct6j/

function distance(x1, y1, x2, y2) { //helper to get distance between 2 points
    return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));    
}

function center(i) { //helper to get coordinates of i-th circle
    return (i*2-1)*radius + (i-1)*step/2;    
}

c.addEventListener('click', function(ev){ //click lister
    var x = ev.pageX - c.offsetLeft - (startX - radius), //normalized coords
        y = ev.pageY - c.offsetTop - (startY - radius), //normalized coords
        grid = 2*radius + step/2,
        i, j, d;

    if(x < 0 || y < 0) { return;} //out of circles

    //cell inside your grid
    i = Math.ceil(x/grid); 
    j = Math.ceil(y/grid);

    if(i > j) { return;} //out of circles

    d = distance(x, y, center(i), center(j));

    if(d > radius) {return;} //to far from center


    console.log(i, j);
}, false);