如何检测对象是不是位于画布元素上的坐标处？

Posted 2023-03-05

【中文标题】如何检测对象是不是位于画布元素上的坐标处？

【英文标题】：How to detect if an object is at cordinates on canvas element?如何检测对象是否位于画布元素上的坐标处？

【发布时间】：2013-10-13 13:52:02

【问题描述】：

我正在努力在画布上创建一个井字游戏。我目前被困在一个点，我检测到画布上的 x/y 坐标是否已经存在符号（X 或 O）。

我尝试使用 ImageData 检查元素是否存在，但如果不存在则返回错误。我还想也许我可以为正方形或符号分配一个 ID。然而，从我所读的内容来看，这似乎是不可能的。

任何帮助将不胜感激。

你可以在这里看到运行的游戏http://jsfiddle.net/weeklygame/dvJ5X/30/

function TTT() 
    this.canvas = document.getElementById('ttt');
    this.context = this.canvas.getContext('2d');
    this.width = this.width;
    this.height = this.height;

    this.square = 100;
    this.boxes = [];
    this.turn = Math.floor(Math.random() * 2) + 1;

    this.message = $('.message');
;

var ttt = new TTT();

TTT.prototype.currentPlayer = function() 
    var symbol = (this.turn === 1) ? 'X' : 'O';
    ttt.message.html('It is ' + symbol + '\'s turn');
;

// Draw the board
TTT.prototype.draw = function(callback) 
    // Draw Grid
    for(var row = 0; row <= 200; row += 100) 
        var group = [];
        for(var column = 0; column <= 200; column += 100) 
            group.push(column);
            this.context.strokeStyle = 'white';
            this.context.strokeRect(column,row,this.square,this.square);
        ;
        this.boxes.push(group);
    ;

    callback;
;

// Get center of the click area cordinates
TTT.prototype.cordinates = function(e) 
    var row = Math.floor(e.clientX / 100) * 100,
        column = Math.floor(e.clientY / 100) * 100;

    return [row, column];
;

// Check if the clicked box has symbol
TTT.prototype.check = function(row, column) 

;

// Get cordinates and set image in container
TTT.prototype.click = function(e) 
    var cordinates = ttt.cordinates(e),
        x = cordinates[0] + 100 / 2,
        y = cordinates[1] + 100 / 2,
        image = new Image();

    if (ttt.turn === 1) 
        image.src = 'http://s8.postimg.org/tdp7xn6lt/naught.png';
        ttt.turn = 2;
     else 
        image.src = 'http://s8.postimg.org/9kd44xt81/cross.png';
        ttt.turn = 1;
    ;

    ttt.context.drawImage(image, x - (image.width / 2), y - (image.height / 2));
    ttt.currentPlayer();
;

function render() 
    ttt.draw($('#ttt').on("click", ttt.click));
    ttt.currentPlayer();
;

(function init() 
    render();
)();

【参考方案1】：

使用数组跟踪网格位置不是更容易吗？当您在网格上放置某些东西时，请在数组中分配该位置。这样，您不必想办法从 Canvas 中读取它，您只需在数组中查看即可。这也允许您在需要时从数组中快速重绘画布，例如在屏幕调整大小时...

【讨论】：

+1 是的，数组也可以用于检查您的棋盘中的获胜位置。

是的，这确实很有意义。我很可能会走那条路。只是为了知识，我将如何检测坐标处的对象？

我可能错了，因为距离我上次进行画布编程已经有几年了，但画布本身并没有“对象”。您绘制的所有内容最终都只是像素。您基本上必须自己跟踪对象。如果您想在更高级别的“对象”而不是像素上进行编程，请考虑使用 SVG。查看 Raphael.js，了解基于 SVG 的漂亮、干净的 API（在旧版 IE 上它也下降到 VML）。

@slebetman 所说的是正确的，您可以通过从画布上读取像素来“检测”，或者使用您自己对象的坐标来解决它。您有责任跟踪您放在画布上的所有内容。

【参考方案2】：

要检测点击了哪个字段，请遍历 9 个字段并检查点击的位置是否在绘制字段的区域内。

为了能够做到这一点，请存储字段的状态（位置以及它是否有 X、O 或什么都没有）。您还应该将 9 个字段存储在一个数组中，以便您可以轻松地迭代它们。我会将它存储在一个二维数组 (3x3) 中。

function Field(x, y) 
    this.x = x;
    this.y = y;
    this.value = null; // Can be null, 'X' or 'O'

tic tac toe 字段的初始化：

var fields = [
    [new Field(0,0), new Field(1,0), new Field(2,0)],
    [new Field(0,1), new Field(1,1), new Field(2,1)],
    [new Field(0,2), new Field(1,2), new Field(2,2)]
];

迭代：

for (var y = 0; y <= 2; y++) 
    for (var x = 0; x <= 2; x++) 
        var field = fields[y][x];
        // Do something with the field.
    

我会用模型坐标存储字段的位置。所以你将坐标乘以一个值来得到在画布上绘图的坐标。

【讨论】：

如何遍历画布上绘制的 9 个字段？