Question

有一个rectangular网格，其大小为12 by 12，其中每个角都是可单击的，这是12*12网格每个角的6 * 3个单元格（单击一次在任何4 corners上应该选择6*3 cells），这将通过颜色变化来表示。

单击一个角后，将检查剩余的单元格，即(144-18 =126) 126个单元格是否可以被数字整除。

例如126/6 =21，因此现在每个21部分都应使用不同的颜色表示。必须检查的数字取决于用户，如果用户提供的数字不可分割，则不会显示任何更改。

我尝试应用的逻辑是，我创建了一个大小为12*12的多维数组，其中包含全零。当用户通过其中一个角坐标6*3时，单元格将变为1。但是我不知道如何在html画布中实现此逻辑，也不知道如何进一步进行。

addBed = (x, y) => {
  let test = Array(12).fill(0).map(x => Array(12).fill(0));
  let bedX = 3, bedY = 6; // BED AREA = 6*3                               
  let dx = 1, dy = 1; 
  let endX = bedX, endY = bedY;
  const roomX = 11, roomY = 11  
  
  if (x === roomX) {
    dx = -1
    endX = roomX - bedX
  }
  if (y === roomY) {
    dy = -1
    endY = roomY - bedY
  }
  for (let i = x; dx === 1 ? i < endX : i > endX; i += dx) {
    for (let j = y; dy === 1 ? j < endY : j > endY; j += dy) {
      test[i][j] = 1;
    }
  }
  console.log(test)
  // this.setState({ testMap: test });                                                     
}

addBed(0, 0); // this will make the first corner to be turned to 1

enter image description here

Answer 1

要获得预期结果，请使用以下查找坐标和单元格编号的选项

在x和y轴上使用for循环绘制网格
添加mousedown事件以查找x，y坐标
从x，y坐标和单元格宽度中查找单元格

    var bw = 480;
    var bh = 480;
    var p = 0;
   var cw = 40
       var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
function drawBoard(){
        for (var x = 0; x <= bw; x += cw) {
            context.moveTo(0.5 + x + p, p);
            context.lineTo(0.5 + x + p, bh + p);
        }

        for (var x = 0; x <= bh; x += cw) {
            context.moveTo(p, 0.5 + x + p);
            context.lineTo(bw + p, 0.5 + x + p);
        }

        context.strokeStyle = "black";
        context.stroke();
    }

    drawBoard();

function getCursorPosition(canvas, event, cw) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    const cy = (y + (cw - y%cw))/cw
    const cx = (x + (cw - x%cw))/cw
    //console.log("x: " + cx + " y: " + cy, (cx*40) - 40, (cy*40) -40)
  if(cx === 1 || cx === 12 || cy ===1 || cy === 12){
       var context2 = canvas.getContext("2d");
       context2.beginPath();
       context2.fillStyle = "red";
       if(cx=== 1 && cy=== 1){
          context2.fillRect(0, 0, 3*cw, 6*cw);       
       }
     if(cx=== 12 && cy=== 1){
          context2.fillRect(9*cw, 0, 3*cw, 6*cw);       
       }
     if(cx=== 1 && cy=== 12){
          context2.fillRect(0, 6*cw, 3*cw, 6*cw);       
       }
     if(cx=== 12 && cy=== 12){
          context2.fillRect(9*cw, 6*cw, 3*cw, 6*cw);       
       }

  }


   
}

canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e, cw)
})

<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;">
</canvas>

codepen-https://codepen.io/nagasai/pen/MMMGXx

请参考此链接以获取图形网格-Draw Grid / Table on Canvas HTML5

如何制作可点击的颜色变化的网格？

1 个答案: