当点击多个正方形对象时，它们会被选中

Multiple Square objects gets selected when clicking into them

本文关键字：对象 正方形      更新时间：2023-09-26

我创建了一个函数来识别正方形对象，当单击其中一个时，它们应该改变颜色，但当我单击它们中的任何一个时，超过一个被选中，即使它们不在同一位置。当我再次点击时，所有的都被选中了，颜色也改变了。

我做错了什么?

index . html 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Launchpad</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
    <canvas id="appArea"></canvas>

    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>
css/style.css 

body {
    background-color: black;
}
canvas {
    background-color: grey;
}
js/app.js 

var canvas = document.getElementById('appArea');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var shapelist = [];

var Square = function (x, y, size, ctx) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.ctx = ctx;
    this.selected = false;
}
Square.prototype.render = function() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, this.size, this.size);
    if (this.selected) {
        ctx.fillStyle = "gold";
    }
    ctx.fillStyle = this.color;
    ctx.fill();
};

var generateSquares = function () {
    for (var i = 0; i < 13; i++) {
        var theX = i * 40;
        var theY = i * 3;
        var theSize = 30;
        var square = new Square(theX, theY, theSize, ctx);
        square.render();
        shapelist.push(square);
    };
}
var getCoords = function (x, y) {
    var validCoords = [];
    for(index in this.shapelist){
        var shape = this.shapelist[index];
        var startX = shape.x;
        var endX = shape.x + shape.size;
        var startY = shape.y;
        var endY = shape.y + shape.size;
        if (x >= startX && x <= endX && y >= startY && y <= endY) {
            validCoords.push(shape);
        }
    }
    return validCoords;
} 

var startEvent = function(e) {
    var self = this;
    canvas.addEventListener('mousedown', function (e) {
        var shapes = getCoords(e.offsetX, e.offsetY);
        if (shapes.length) {
            var selectedShape = shapes[shapes.length-1];
            selectedShape.selected = true;
        }
        render();
    }, false);
}

var render = function(){
    ctx.clearRect(0, 0, this.width, this.height);
    for(index in shapelist){
        shapelist[index].render();
    }
}
generateSquares();
startEvent();
render();

1)您只能在构造函数中设置为false，而不能在其他地方设置。

所以所选方块的数量只会继续增长。

所以如果你想要一个单独的选定的正方形，重置所有正方形的'selected'属性之前设置一个为真。

2)重新阅读你的渲染函数:颜色将永远是这个。Color，它恰好在提供的代码中未定义。

另一件事是你提到这个。你只会得到一个引用错误，它不会得到通知，因为它是在事件处理程序中调用的。

这里的一切都是固定的:

http://jsfiddle.net/4bqtU/

canvas.addEventListener('mousedown', function (e) {
    var shapes = getCoords(e.offsetX, e.offsetY);
    if (shapes.length) {
        resetShapeSelection();
        var selectedShape = shapes[shapes.length-1];
        selectedShape.selected = true;
    }
    render();
}, false);
function resetShapeSelection() {
    for(index in shapelist){
       var shape = shapelist[index];
       shape.selected=false;
    }
 }
相关文章：