画布上的鼠标移动高亮显示正方形

Question

我有一个画布，上面有许多栅格，并且会显示一个文本。我也需要用户与画布交互。

我想突出显示相应的方块，当用户在画布上拖动鼠标或点击它时。

我无法选择使用Javascript突出显示的网格。 发布整个代码 - fiddle-link

我试过这个，但它不工作。

$('.canvasld').mousedown(function(e){ 
    let x = e.clientX - $('.canvasld').offsetLeft, 
      y = e.clientY - $('.canvasld').offsetTop, 
      col = Math.floor(x /6), 
      row = Math.floor(y /6); 
     context.rect(x, y, 5, 5); 
     //pixel['enabled'] = true; 
     context.fillStyle = canvasConfig.options.enabledPixelColor; 
     context.fill(); 
}); 

Answer 1

您所连结的的jsfiddle有几个问题：

首先，你的x和y的值都NaN，因为 $('.canvasld').offsetLeft)是不确定的。在JQuery中，查询中不存在offsetLeft属性。

您可以使用JQuery .offset()方法，该方法返回具有属性left和right的对象。

其次，您的context和canvasConfig都未定义。

下面是有关问题的代码片段，纠正了这些问题。我用你的默认对象代替了不存在的canvasConfig：

// revised mousedown code 
$('.canvasld').mousedown(function(e) { 

    // small square size 
    let squareSize = (defaults.pixelSize/2); 

    // get the x and y of the mouse 
    let x = e.clientX - $('.canvasld').offset().left; 
    let y = e.clientY - $('.canvasld').offset().top; 

    // get the grid coordinates 
    let col = Math.floor(x/squareSize); 
    let row = Math.floor(y/squareSize); 

    // get the canvas context 
    let context = $('.canvasld')[0].getContext('2d'); 

    // check if the square falls into the smaller grid 
    if(col > 0 && row > 0 && col % 2 > 0 && row % 2 > 0) { 
    // draw the rectangle, converting the grid coordinates back 
    // into pixel coordinates 
    context.rect(col * squareSize, row * squareSize, squareSize, squareSize); 
    context.fillStyle = defaults.enabledPixelColor; 
    context.fill(); 
    } 

}); 

希望我能帮忙！ :-)