2

There is a rectangular grid that will be of size 12 by 12, in which each corner will be clickable, which is 6*3 cells from each corner of 12*12 grid (single click on any the 4 corners should select 6*3 cells), which will be indicated by a color change.

After clicking one of the corners, the remaining cell i.e(144-18 =126) 126 cells, will be checked whether it is equally divisible by a number.

For example,126/6 =21, so now each 21 part should be represented by a different color. The number which has to be checked against depends upon the user, if the user gives a number which is not divisible, it will not show any change.

The logic I tried to apply is, I created a multidimensional array of size 12*12, which contains full of zero's. when the user passes one of the corner coordinates 6*3 cell will turn to one. But I don't know how to implement this logic in html canvas, also how to proceed further.

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

gman
  • 100,619
  • 31
  • 269
  • 393
christina
  • 25
  • 7
  • No, i checked it and I am totally new to java script,so i am having more trouble in understanding. – christina Jul 15 '19 at 17:57
  • I would study https://stackoverflow.com/a/25716620/295783 and the fiddle it points at: http://jsfiddle.net/m1erickson/e8bfg3h4/ – mplungjan Jul 15 '19 at 18:02
  • are you trying figure out how to get a canvas clicks x/y location? or are you trying to figure out how to change the color of a specific region of the canvas? or are you trying to figure out the math to get the bounds of those regions? or are you trying to figure out how to check which regions are divisible by a number? or is this a bunch of questions written as one? – dqhendricks Jul 15 '19 at 18:14
  • yes,it is a bunch of questions,but the main thing i want to know is how to get the x,y coordinates of the cell clicked,and how to divide the cells into equal parts. – christina Jul 15 '19 at 18:17
  • @christina okay, you may want to delete and write as separate questions then. you will get better and faster responses. generally multi-part questions get closed by moderators eventually. – dqhendricks Jul 15 '19 at 18:28
  • @christina - could you spice up your question with some pictures? I didn't get how the 12x12 grid is related to the 6x3 cells. – obscure Jul 15 '19 at 18:51
  • @obscure added. What I meant is , I need only 6*3 cells of the each corner to be selected(on a single click in the corner). – christina Jul 15 '19 at 19:00
  • please share html as well and canvas code in js – Naga Sai A Jul 15 '19 at 19:03
  • @Naga Sai I don't know how to implement this logic in canvas – christina Jul 15 '19 at 19:05

1 Answers1

1

To achieve expected result, use below option of finding coordinates and cell number

  1. Draw grid using for loop on both x and y axis
  2. Add mousedown event to find x, y coordinates
  3. Find cell from x, y coordinates and width of cell

    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

Refer this link for drawing grid - Draw Grid / Table on Canvas HTML5

Naga Sai A
  • 10,771
  • 1
  • 21
  • 40