Question

我编写了一个代码，它将创建一个矩形，并通过提供值，它将在该矩形中生成行和列，基本上它是在该矩形内创建小方块。

此处可以看到代码http://jsfiddle.net/simerpreet/ndGE5/1/

<h1>Example</h1>
<canvas id="t_canvas" style="border:1px solid #000000;" width="300" height="225"></canvas>
<br/>
<button id="draw">Draw</button>        

<Script>
var x=50;
    var y=50;
    var w = 150; //width
    var h = 100; //height
    var columns=3;
    var rows =3;
    var vnp =w/columns; //vertical next point
    var hnp=h/rows;  //horizontal next point
    var canvas  = document.getElementById("t_canvas");
    var ctx = canvas.getContext("2d");
$(document).ready(function() {
     $('#draw').click(function() {
     drawVerticalLines(parseFloat(vnp));
     drawHorizontalLines(parseFloat(hnp));
     ctx.fillStyle = "#FF0000";
     ctx.strokeRect(x, y, w, h);
     ctx.stroke();
    });
});

function drawVerticalLines(np){
        var np = x + np //start point of first column 
        while(np < w+x){
            ctx.moveTo(np, y);
            ctx.lineTo(np, y+h);
            np = vnp + np;
        }

    }

 function drawHorizontalLines(np){
        var np = y + np //start point of first column
        while(np < h+y){
            ctx.moveTo(x, np);
            ctx.lineTo(x+w, np);
            np = hnp + np;
        }
    }

<script>

我已经给出了rows = 3和columns = 3的值，所以它会像squares一样创建一个tic tac toe。我的要求是当我点击任意位置的任何小方块时，它应该给我准确的中心那个特定的广场的位置，这种卡在这里，是否有任何一种算法可以做到这一点？

谢谢，鑫马

Answer 1

获得中心点的正确方法可以通过各种方式表现出来，但实质上这就是你需要做的事情：

 var mousePos = getMousePos(canvas, evt),  // get adjusted mouse position
     gw = vnp * 0.5,                       // get center of one cell
     gh = hnp * 0.5,
     ix = ((mousePos.x - x) / vnp)|0,      // get cell index clicked
     iy = ((mousePos.y - y) / hnp)|0,
     cx = ix * vnp + x + gw,               // scale up to get pixel position
     cy = iy * hnp + y + gh;

<强> Modified fiddle here

以下几行的快速细分（仅显示x，y表示相同）：

ix = ((mousePos.x - x) / vnp)|0
cx = ix * vnp + x + gw

通过从鼠标位置减去网格的起点来调整网格。这为您提供了网格中的位置：

mousePos.x - x
使用单个单元格的宽度量化值以获取索引。 |0会截断小数值，因此我们最终会得到一个整数值，这是我们下一步所需要的：

((mousePos.x - x) / vnp)|0
既然我们有一个整数索引[0,2]（你需要对网格进行边界检查或索引范围检查），我们只需将它与单元格宽度相乘，得到一个像素位置，用于开始网格单元格：

cx = ix * vnp
最后添加网格的网格起始位置以进入单元格的屏幕角落，并添加一半的单元格大小以获得此单元格的中心：

cx = ix * vnp + gw

奖励是您现在拥有可与阵列一起使用的索引（ix和iy），以便更轻松地检查游戏状态。

如何计算HTML5画布中矩形内绘制的每个小方块的中心像素（x，y）

1 个答案: